2
私はreact-jsでサウンドを再生しようとしましたが、私はそれを始めることはできません。 私は、私のreactClassに初期化私のサウンドVARを持って前に初期状態を取得：react-jsでサウンドを再生
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ファイルで試しました。しかしそれは始まりません。私は間違って何をしていますか？
!!!! EDIT：
<audio id="beep" loop>
<source src="files/ring.wav" type="audio/wav" />
</audio>
そして、次のスタート/ストップと：： はまた、HTML項目を追加しようとした
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を取得しています。どうしてこれなの？
playSound（）をどこから呼び出しているのかを聞くことができますか？ – BlinkingCahill
もう少し複雑です。しかし、私は、主なindex.htmlであるreact-app.jsクラスと、タブと、ページをレンダリングするビューを持っています。 コールバック関数を持つC++ライブラリを初期化します。ネイティブのものを変更するとコールバックが返され、そこからサウンドを再生していました。私は問題を解決しました、それはかなり簡単でした、私はそれについて考えて、私は今応答を追加します –