在react-js中播放声音 [英] Play sound in react-js

问题描述

我尝试在react-js上播放声音，但无法启动. 在获取InitialState之前，我在我的reactClass中初始化了我的声音变量:

I try to play a sound on react-js but I can't make it start. I have my sound var initialised in my reactClass, before get InitialState:

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

这是我用于启动和停止的功能:

And this are the functions that I have for start and stop:

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

但是我得到了这个答案:

But I get back this answer:

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

我已经尝试过同时使用.mp3和.wav文件.但它不会开始.我在做什么错了?

I have tried both with a .mp3 and .wav file. but it won't start. What am I doing wrong?

!!!! 还尝试添加HTML项:

!!!! Also tried adding a HTML item:

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

并使用以下开始/停止:

And with the following start/stop:

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

然后我在启动时没有错误，但是没有启动.当我按下暂停时，我得到:

Then I get no error on start, but it doesn't start. When I press pause I get:

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

!!!!

我还注意到，如果设置按钮，则可以播放声音.如果我打开文件管理器，请转到我的index.html并将其打开，即可正常运行.如果我从webpack-server尝试页面:localhost:8000/app/index.html，它将无法正常工作.得到相同的DOMException.为什么会这样?

Also I noticed, that if I set buttons, to play the sound. If I open the file manager, go to my index.html and open it, it works perfectly. If I try the page from the webpack-server: localhost:8000/app/index.html, it won't work. getting the same DOMException. why is this?

推荐答案

尝试了一段时间之后，我在index.html文件中做了2个按钮，其中1个用于启动声音，一个用于停止声音.因此，我尝试了这一点，但我注意到它可以通过文件管理器运行，但是如果我从webpack服务器上尝试则无法运行. 所以我检查了我的路径，而不是: 文件/音频.mp3"我将其更改为"../文件/音频.mp3".一个菜鸟的错误，但这就是当您让一个Android开发人员使用javascript工作时会发生的事情:)))

After trying for a while, I made 2 buttons, 1 to start the sound and one to stop, in my index.html file. So I tried that, and I noticed that it works from my file manager, but not if I try from the webpack server. So I checked my paths, and instead of: "files/audio.mp3" I changed it to "../files/audio.mp3". A rookie mistake, but that's what happens when you put a Android developer to work in javascript :)))

这篇关于在react-js中播放声音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！