Question

我尝试在react-js上播放声音，但我无法启动它。在获得InitialState：

之前，我在reactClass中初始化了我的声音var

var App = React.createClass({
audio: new Audio('files/audio.mp3'),
getInitialState: function () {
return {
  playSound: false,
   ........
 }
}

这是我开始和停止的功能：

   playSound: function() {
if(!this.state.playSound){
    this.setState({
        playSound: true,
    }, function(){
      console.log("play sound 1");
      this.audio.play();
      console.log("play sound 2");
    });
}
},

stopSound: function() {
if(this.state.playSound){
    this.setState({
        playSound: false,
    }, function(){
        console.log("stop sound 1");
        this.audio.pause();
        console.log("stop sound 2");
    });
}
},

但是我回答了这个问题：

react-app.js:346 Uncaught (in promise) DOMException: The element has no supported sources.

我已尝试使用.mp3和.wav文件。但它不会开始。我做错了什么？

!!!!编辑：还尝试添加HTML项目：

  <audio id="beep" loop>
         <source src="files/ring.wav" type="audio/wav" />
      </audio>

以下开始/停止：

  playSound: function() {
if(!this.state.playSound){
    this.setState({
        playSound: true,
    }, function(){
      console.log("play sound 1");
      var audioElement = document.getElementById('beep');
      audioElement.setAttribute("preload", "auto");
      audioElement.autobuffer = true;
      audioElement.load();
      audioElement.play();
      console.log("play sound 2");
    });
}
},

stopSound: function() {
if(this.state.playSound){
    this.setState({
        playSound: false,
    }, function(){
        console.log("stop sound 1");
        var audioElement = document.getElementById('beep');
        audioElement.pause();
        console.log("stop sound 2");
    });
}
},

然后我在开始时没有错误，但它没有启动。当我按下暂停时，我得到：

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

!!!! EDIT2：

我也注意到，如果我设置按钮，则播放声音。如果我打开文件管理器，转到我的index.html并打开它，它完美无缺。如果我从webpack-server：localhost：8000 / app / index.html尝试页面，它就不会工作。得到相同的DOMException。这是为什么？

Answer 1

尝试了一段时间后，我在index.html文件中创建了2个按钮，1个用于启动声音，1个用于停止。所以我试过了，我注意到它可以从我的文件管理器中运行，但是如果我从webpack服务器尝试的话就不行。所以我检查了我的路径，而不是： “files / audio.mp3”我把它改为“../files/audio.mp3”。一个新手的错误，但是当你让一个Android开发人员在javascript中工作时会发生这种情况：）））

在react-js中播放声音

1 个答案: