為什么點擊時沒有播放音頻？

Question

我正在創建一個鼓機應用程序。 我找不到按一下按鈕即可播放音頻的方法，所以我自己嘗試了一下。 我創建了一個單獨的方法，該方法返回帶有音頻文件源的音頻元素。 我在單擊按鈕時調用了該方法，但聽不到任何聲音。 這是代碼：

 class App extends Component {
  constructor(props){
      super(props);
            this.clicker=this.clicker.bind(this);

 }
  clicker(){
  return(
    <audio autoplay>
    <source src="./1.mp3" type="audio/mpeg"/>
    </audio>
   )
 }

render() {
 return (
  <div className="App">
    <input type="button" onClick={this.clicker} value="play">
    </input>
  </div>
  );
  }
 }

我的方法對創建鼓機是正確的還是有更好的方法？ 任何進一步的幫助將不勝感激..謝謝..

Answer 1

您需要將音頻播放器添加到DOM，然后在其上調用play，這是一個簡單的示例。

 class App extends Component { constructor(props){ super(props); this.clicker=this.clicker.bind(this); } } render() { return ( <div className="App"> <input type="button" onClick="document.getElementById('myAudioPlayer').play()" value="play"> </input> </div> <audio autoplay id="myAudioPlayer"> <source src="./1.mp3" type="audio/mpeg"/> </audio> ); } } 

Answer 2

經過一番研究並閱讀了HTML5音頻后，我在本地主機的React應用程序中沒有播放此音頻，我知道您必須先導入mp3文件，然后才能將它們用作來自{{filename}}的import mp3_file 。 然后您就可以使用它們了，它就可以工作了。