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，然后在其上调用播放，这是一个简单的示例。

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 audio is not playing in my React app in localhost，我知道您必须先导入mp3文件，然后才能将它们用作从{{filename}}导入mp3_file 。然后您就可以使用它们了，它就可以工作了....完美！

为什么点击时没有播放音频？

2 个答案: