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

Question

我正在尝试学习 React，并且我正在做一个 FreeCodeCamp.com 项目来构建鼓机。我正在尝试观看演示视频，我所拥有的和演示版看起来一样，除了演示版有效而我的无效。该代码应呈现一组按钮，这些按钮 linked 到一个对象数组，其中包含 links 到音频剪辑。代码正确呈现按钮，但声音不会播放。我还将 link [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>
      
    }

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

How do I play audio from an array of objects in React.js

arrays

audio

javascript-objects

reactjs