I have a project consisting of 2 classes. The App class has an array of soundfile URLs. The second, Drum, returns an audio element for each soundfile.
I’d like to create buttons, which, when pressed, play a soundfile. At this stage, I know how to create buttons and set their onClick event to call a method, but that’s about it.
A row of standalone buttons would suffice, although I see that others have created a grid of buttons resembling a pocket calculator.
import React from 'react';
import './App.css';
import Drum from './components/Drum'
class App extends React.Component {
state =
{
sound_file_collection:
[
{
index:0,
soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
text:'Q',
id: 'PinkFloyd'
},
{
index:1,
soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3',
text:'W',
id: 'Handclap'
},
{
index:2,
soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
text: 'Cymbal'
},
{
index:3,
soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
text: 'A',
id:'AcousticGuitar'
},
{
index:4,
soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3',
text: 'S',
id:'GlamRock'
},
{
index:5,
soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
text: 'D',
id: "Queen"
},
{
index:6,
soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
text: 'Z',
id: 'Tambourine'
},
{
index:7,
soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3',
text: 'X',
id: 'DampenedDrum'
},
{
index:8,
soundFileURL:'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3',
text: 'C',
id: 'MetalDrum'
}
]
}//end of state
render()
{
return (
<div className="App" id="drum-machine">
<Drum class = "drum-pad" soundfiles = {this.state.sound_file_collection} />
</div>
);
}
}
export default App;
//Q, W, E, A, S, D, Z, X, C.
class Drum extends React.Component {
render() {
return this.props.soundfiles.map((eachfile) =>
//drum-pad, then audio element
<div key={eachfile.index} class = {this.props.class} id = {this.props.id} text = {this.props.text}>
<audio controls class = "clip" id = {this.props.text} source src={eachfile.soundFileURL} type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
)
}//render
}//class
export default Drum;