新しいWeb Audio APIを使用して3つのサウンドファイル(XMLHTTPRequestより)をロードし、それぞれを個別に再生するための基本スクリプトをChromeで作成しました。私は、ユーザーが各サウンドを開始および停止できるように、サウンドごとに別々のボタンを用意しました。ウェブオーディオAPI:サウンドの再生を再開するにはどうすればよいですか?
このスクリプトでは、3つのサウンドファイルがすべて読み込まれ、完了すると、サウンドが準備完了になったときに再生を開始できるように、再生ボタンが非表示になります。さらに、ボタンをクリックすると、各ボタンのラベルが「再生」と「停止」の間で変化するように、音がループしています。
このすべてはうまくいきます...再生ボタンをクリックするとループ音が鳴り、停止ボタンを押すと音が止まります。ただし、同じサウンドをもう一度再生しようとすると、サウンドは再び再生されません。 Play/Stopボタンをクリックするたびに、適切なplaySound()またはstopSound()関数が呼び出され、適切なパラメータが渡されますが、何らかの理由で2回目の再生音が得られません。私は何か間違っているのですか?ここで
が私のコードです:また
<body>
<label for="playBtn1">Moog:</label>
<input id="playBtn1" type="button" value="Play" disabled />
<label for="playBtn1">Drums:</label>
<input id="playBtn2" type="button" value="Play" disabled />
<label for="playBtn1">Choir:</label>
<input id="playBtn3" type="button" value="Play" disabled />
<script>
var playBtn1 = document.getElementById("playBtn1");
var playBtn2 = document.getElementById("playBtn2");
var playBtn3 = document.getElementById("playBtn3");
var context = new webkitAudioContext();
var soundBuffer1 = null;
var soundBuffer2 = null;
var soundBuffer3 = null;
var soundBufferSourceNode1 = context.createBufferSource();
soundBufferSourceNode1.looping = true;
var soundBufferSourceNode2 = context.createBufferSource();
soundBufferSourceNode2.looping = true;
var soundBufferSourceNode3 = context.createBufferSource();
soundBufferSourceNode3.looping = true;
loadSound('micromoog.wav', 1);
loadSound('breakbeat-drum-loop.wav', 2);
loadSound('choir.wav', 3);
playBtn1.addEventListener("click", function(e) {
if(this.value == "Play") {
this.value = "Stop";
playSound(soundBuffer1, soundBufferSourceNode1);
} else if(this.value == "Stop") {
this.value = "Play";
stopSound(soundBufferSourceNode1);
}
}, false);
playBtn2.addEventListener("click", function(e) {
if(this.value == "Play") {
this.value = "Stop";
playSound(soundBuffer2, soundBufferSourceNode2);
} else if(this.value == "Stop") {
this.value = "Play";
stopSound(soundBufferSourceNode2);
}
}, false);
playBtn3.addEventListener("click", function(e) {
if(this.value == "Play") {
this.value = "Stop";
playSound(soundBuffer3, soundBufferSourceNode3);
} else if(this.value == "Stop") {
this.value = "Play";
stopSound(soundBufferSourceNode3);
}
}, false);
function loadSound(url, bufferNum) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// Decode asynchronously
request.onload = function() {
var successCallback = function(buffer) {
switch(bufferNum) {
case 1:
soundBuffer1 = buffer;
playBtn1.disabled = false;
break;
case 2:
soundBuffer2 = buffer;
playBtn2.disabled = false;
break;
case 3:
soundBuffer3 = buffer;
playBtn3.disabled = false;
break;
}
}
var errorCallback = function(e) {
console.log(e);
}
context.decodeAudioData(request.response, successCallback, errorCallback);
}
request.send();
}
function playSound(buffer, bufferSourceNode) {
bufferSourceNode.buffer = buffer;
bufferSourceNode.connect(context.destination);
bufferSourceNode.noteOn(0);
}
function stopSound(bufferSourceNode) {
bufferSourceNode.noteOff(0);
}
</script>
</body>
、非ループサウンドいったん解雇かもしれないイベントのいずれかの種類を認識して誰もが遊んで行われていますか?これらのサウンドをノンループにすることができれば涼しいでしょう。サウンドが再生されるとすぐに、そのようなイベントを使ってそのラベルを切り替えることができます。私は仕様に何も表示されませんが、多分もっと良い方法がありますか?
ありがとう、 Brad。
これを修正しましたか?私も同様の問題があります。 – mdm
私はまったく同じ問題を抱えています! :任意のアイデアですか? – asheinfeld