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

【问题标题】：Why audio didn't play's on click?为什么点击时没有播放音频？
【发布时间】：2019-01-01 08:33:25
【问题描述】：

我正在创建一个鼓机应用程序。我找不到在按下按钮时播放音频的方法，所以我自己尝试了一下。我创建了一个单独的方法，该方法返回带有音频文件源的音频元素。我在单击按钮时调用该方法，但我听不到任何音频。代码如下：

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

我创建鼓机的方法正确还是有更好的方法？任何进一步的帮助将不胜感激..谢谢..

【问题讨论】：

我假设您需要在开始播放之前将音频元素添加到 DOM。
因为您的点击处理程序返回的是 HTML 而不是播放 mp3，所以将您的音频标签放入文档中，找到它并在其上调用 play

标签： javascript html reactjs

【解决方案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>
  );
  }
 }

【讨论】：

好吧，您提供的信息很少，我无法提供任何帮助。也许检查控制台，看看是否有错误。音频元素是否呈现在屏幕上？仅仅说“它没有用”并没有让我有机会帮助你。
老兄，您正在添加一个字符串作为事件监听器......它说“预期 onClick 监听器是一个函数......”
在用大括号而不是引号括起来后，它说无法读取 null 的属性“play”......然后将其包装在箭头函数中，现在我没有错误，但按下时没有音频按钮....
@BilalKazmi 大声笑，它是一个元素的点击处理程序，它必须是一个字符串。
@BilalKazmi 无论哪种方式，主体都保持不变，您只需找到元素然后调用它。

【解决方案2】：

经过一番研究并阅读此HTML5 audio is not playing in my React app in localhost，我知道您必须先导入 mp3 文件，然后才能将它们用作 import mp3_file from {{filename}}。然后你就可以使用它们，它就可以工作了......完美！！

【讨论】：