0

该程序中有 9 个按钮，我想播放与单击的按钮相对应的声音。显然[objectName].play()播放音频，但发生的是所有按钮的音频同时播放，而不是在我单击按钮时播放。我应该在程序中添加/删除什么？另外，有什么方法可以获取我点击的按钮的 id 吗？

 let audiofiles = {
   Q: 'https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Western%20and%20Latin%20Percussion/34[kb]808agogo.wav.mp3',
   W: 'https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Western%20and%20Latin%20Percussion/35[kb]badcow.wav.mp3',
   E: 'https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Electronic%20Hits/64[kb]akaizap.wav.mp3',
   A: 'https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Western%20and%20Latin%20Percussion/17[kb]bell1.wav.mp3',
   S: 'https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Electronic%20Hits/80[kb]analog_spindown.wav.mp3',
   D: 'https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Western%20and%20Latin%20Percussion/19[kb]cabasa.wav.mp3',
   Z: 'https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Western%20and%20Latin%20Percussion/434[kb]fairy-belltree.wav.mp3',
   X: 'https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Western%20and%20Latin%20Percussion/12[kb]Fingersnap.WAV.mp3',
   C: 'https://sampleswap.org/samples-ghost/DRUMS%20(SINGLE%20HITS)/Western%20and%20Latin%20Percussion/76[kb]lamo-vibraslap.wav.mp3'
 }

const DrumMachine = () => {
  let [power, setPower] = React.useState(false)
  let [displayText, setDisplayText] = React.useState('')
  
  const powerButtonInitializer = () => {
    let button = document.querySelector("#powerButton") 
    setPower(!power)   
    //console.log(power)
    if (power) {
      button.style.color = 'white'
      setDisplayText('ON')
    }
    else {
      button.style.color = 'gray'
      setDisplayText('OFF')
    }
  }
  
  const RenderButtons = (props) => {
    let allButtons = Object.keys(audiofiles).map((item) => <button className="drum-pad" id={item} onClick={playAudio(item)}>{item}</button>)
    return allButtons
  }
  
  const playAudio = (id) => {
    let audioURL = new Audio(audiofiles[id])
    audioURL.muted = true
    let afterPlayPromise = audioURL.play()
    afterPlayPromise.then().catch((error) => console.log(error))
  }
  
  return (
    <div id="drum-machine">
      <div id="head">
        <div id="display">{displayText}</div>
        <div id="power"><a id="powerButton"href="#" onClick={powerButtonInitializer}><i class="fas fa-power-off fa-2x"></i></a></div>
      </div>
      <div id="drum-pads">
        <RenderButtons /> 
      </div>
      <div id="other"></div>
    </div>
  ) 
}
4

1 回答 1

0

尝试通过handleClick()函数传递 playAudio 并且由于某种原因起作用。创建了一个默认事件并event.target.value作为属性传递给playAudio(). 按钮点击响应现在符合预期。

于 2021-07-25T10:42:00.270 回答