如何在React.js中从对象数组中播放音频

Question

我正在努力学习React，我正在一个FreeCodeCamp.com项目上工作，以建立一个鼓机。我试图跟随一个演示视频，我有什么和演示看起来一样，除了演示版本的工作和我的没有。代码应该呈现一组按钮，这些按钮链接到一个包含音频剪辑链接的对象数组。代码正确地渲染按钮，但是声音不能播放。如果有帮助的话，我还将链接我所构建的[Codepen][1]。任何帮助都将非常感激。这是我目前掌握的信息。

const bankOne = [
{
keyCode: 81,
keyTrigger: 'Q',
id: 'Heater-1',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
},
{
keyCode: 87,
keyTrigger: 'W',
id: 'Heater-2',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
},
{
keyCode: 69,
keyTrigger: 'E',
id: 'Heater-3',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
},
{
keyCode: 65,
keyTrigger: 'A',
id: 'Heater-4',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
},
{
keyCode: 83,
keyTrigger: 'S',
id: 'Clap',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
},
{
keyCode: 68,
keyTrigger: 'D',
id: 'Open-HH',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
},
{
keyCode: 90,
keyTrigger: 'Z',
id: "Kick-n'-Hat",
url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
},
{
keyCode: 88,
keyTrigger: 'X',
id: 'Kick',
url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
},
{
keyCode: 67,
keyTrigger: 'C',
id: 'Closed-HH',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
}
];
const bankTwo = [
{
keyCode: 81,
keyTrigger: 'Q',
id: 'Chord-1',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'
},
{
keyCode: 87,
keyTrigger: 'W',
id: 'Chord-2',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'
},
{
keyCode: 69,
keyTrigger: 'E',
id: 'Chord-3',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3'
},
{
keyCode: 65,
keyTrigger: 'A',
id: 'Shaker',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3'
},
{
keyCode: 83,
keyTrigger: 'S',
id: 'Open-HH',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3'
},
{
keyCode: 68,
keyTrigger: 'D',
id: 'Closed-HH',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3'
},
{
keyCode: 90,
keyTrigger: 'Z',
id: 'Punchy-Kick',
url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3'
},
{
keyCode: 88,
keyTrigger: 'X',
id: 'Side-Stick',
url: 'https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3'
},
{
keyCode: 67,
keyTrigger: 'C',
id: 'Snare',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3'
}
];
const KeyboardKey = ({play, sound: {keyTrigger, url} }) => {
return (
<button className="drum-pad" onClick={()=> play(keyTrigger)} >
<audio className="clip" id={keyTrigger} src={url} />
{keyTrigger} 
</button>
)
}
const Keyboard = ({play}) =>{
return bankOne.map((sound) => <KeyboardKey play={play} sound={sound} />)
}

const App = () => {

const play = (keyTrigger) => {
const audio = document.getElementById(keyTrigger)
audio.currentTime = 0;
audio.play()
}
return <div id="drum-machine">
<Keyboard />
</div>

}
ReactDOM.render(<App />, document.getElementById("drum-machine")); ```

[1]: https://codepen.io/AlakT/pen/QWaRRwe

Answer 1

您忘记将play函数作为道具传递

const App = () => {

const play = (keyTrigger) => {
const audio = document.getElementById(keyTrigger)
audio.currentTime = 0;
audio.play()
}
return <div id="drum-machine">
<Keyboard play={play} /> // passing play function to <Keyboard />
</div>

}