2011-10-22 11 views
6

新しい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。

+1

これを修正しましたか?私も同様の問題があります。 – mdm

+1

私はまったく同じ問題を抱えています! :任意のアイデアですか? – asheinfeld

答えて

5

Web Audio APIを自分で学習するだけです。一見すると、音を演奏するたびにBufferSourceを作成することになっているからだと思います。ここでは例をチェックアウト:http://www.html5rocks.com/en/tutorials/webaudio/intro/

6

を、私は、これは後半年ですけど、私はここで、同様の問題を持っていたいくつかの簡単な検索を行なったし、私が見つけたものです:http://updates.html5rocks.com/2012/01/Web-Audio-FAQ

:このページで

次に、質問を参照してください。

  • 「AudioSourceNodeの再生が完了したらどうすれば確認できますか?」
  • "noteOn()で再生したAudioBufferSourceNodeがありますが、もう一度再生したいのですが、noteOn()は何もしません!ヘルプ!"

私が理解したところから:createBufferSource()で作成したソースは1回しか再生できません。一度停止すると、新しいものを作成する必要があります。特定のサウンドがいつ再生を停止したかを知りたければ、それをディスパッチするイベントはありません。タイムアウトを使用する必要があります。

希望すると便利です。

+1

Re。ソースの再生が終了したときにイベントが発生しないようになりました。現在、「onend」コールバックがあります。 Chrome v35で正しく動作することを確認しました。 audioSource.onended = function(){ playingSound = false; }; コメントのヒントについては、Anders Lauritsenに感謝します。http://updates.html5rocks.com/2012/01/Web-Audio-FAQ – poshaughnessy

関連する問題