如何在React.js中播放来自对象数组的音频

Question

我正在努力学习如何应对，并在一个FreeCodeCamp.com项目上工作，以构建一台鼓机。我试图跟随一个演示视频，我和演示有相同的外观，除了演示版本工作和我的不工作。代码应该呈现一组按钮，这些按钮链接到对象数组，其中包含指向音频剪辑的链接。代码正确地呈现按钮，但声音不会播放。我还将链接到Codepen im，在帮助的情况下构建它。任何帮助都将不胜感激。这就是我到目前为止所拥有的。

  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

你忘了把游戏当作道具

    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>
      
    }