[英]Play sound in react-js
I try to play a sound on react-js but I can't make it start. 我尝试在react-js上播放声音,但无法启动。 I have my sound var initialised in my reactClass, before get InitialState: 在获取InitialState之前,我在我的reactClass中初始化了声音变量:
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.
I have tried both with a .mp3 and .wav file. 我已经尝试使用.mp3和.wav文件。 but it won't start. 但它不会开始。 What am I doing wrong? 我究竟做错了什么?
!!!! !!!! EDIT: Also tried adding a HTML item: 编辑:还尝试添加一个HTML项目:
<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().
!!!! !!!! EDIT2: EDIT2:
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. 如果我打开文件管理器,请转到index.html并打开它,它可以正常运行。 If I try the page from the webpack-server: localhost:8000/app/index.html, it won't work. 如果我从webpack-server尝试页面:localhost:8000 / app / index.html,它将无法正常工作。 getting the same DOMException. 得到相同的DOMException。 why is this? 为什么是这样?
After trying for a while, I made 2 buttons, 1 to start the sound and one to stop, in my index.html file. 尝试了一会儿之后,我在index.html文件中做了2个按钮,其中1个开始声音,一个停止。 So I tried that, and I noticed that it works from my file manager, but not if I try from the webpack server. 因此,我尝试了这一点,但我注意到它可以从我的文件管理器中使用,但是如果我从webpack服务器中尝试则不能。 So I checked my paths, and instead of: "files/audio.mp3" I changed it to "../files/audio.mp3". 因此,我检查了路径,而不是:“ files / audio.mp3”改为“ ../files/audio.mp3”。 A rookie mistake, but that's what happens when you put a Android developer to work in javascript :))) 一个菜鸟错误,但这就是当您让Android开发人员在javascript中工作时会发生的事情:)))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.