缓冲区和Web音频API

我目前正致力于为大学项目构建Ambient Sound Generator并且遇到轻微问题。缓冲区和Web音频API

基本上我现在有3个不同的文件，用户可以暂停/播放组合，每个暂停/播放OK。唯一的问题是，如果我一次播放多个声音，在我停止播放后，我的两个声音中的一个会继续播放。

也许有人可以指出我要出错的方向和/或资源，在那里我可以了解更多关于API的知识。

<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="css/loopy_styles.css" /> 
    <!--<script type="text/javascript" src="js/loop_functions.js"></script>--> 
    <script> 
     context = new (window.AudioContext || window.webkitAudioContext)(); 

     var soundBuffer1 = null; 
     var soundBuffer2 = null; 
     var soundBuffer3 = null; 
     var soundBuffer4 = null; 
     var soundBuffer5 = null; 

     window.onload = function() { 
      create_buffers(); 
     }; 

     function create_buffers(){ 
      soundBufferSourceNode1 = context.createBufferSource(); 
      soundBufferSourceNode1.looping = true; 
      soundBufferSourceNode2 = context.createBufferSource(); 
      soundBufferSourceNode2.looping = true; 
      soundBufferSourceNode3 = context.createBufferSource(); 
      soundBufferSourceNode3.looping = true; 
      soundBufferSourceNode4 = context.createBufferSource(); 
      soundBufferSourceNode4.looping = true; 
      soundBufferSourceNode5 = context.createBufferSource(); 
      soundBufferSourceNode5.looping = true; 
     }; 

     loadSound('sounds/fire_test1.wav', 1); 
     loadSound('sounds/wind_test.wav', 2); 
     loadSound('sounds/rain_test1.wav', 3); 
     loadSound('sounds/stream.mp3', 4); 
     loadSound('sounds/spring_test.wav', 5); 


     function play_sound1(){ 
      document.getElementById('playBtn1_play').style.display = 'none'; 
      document.getElementById('playBtn1_stop').style.display = 'block'; 

      playSound(soundBuffer1, soundBufferSourceNode1); 
     } 
     function stop_sound1(){ 
      document.getElementById('playBtn1_play').style.display = 'block'; 
      document.getElementById('playBtn1_stop').style.display = 'none'; 

      stopSound(soundBufferSourceNode1); 
      create_buffers(); 
     } 
     function play_sound2(){ 
      document.getElementById('playBtn2_play').style.display = 'none'; 
      document.getElementById('playBtn2_stop').style.display = 'block'; 
      playSound(soundBuffer2, soundBufferSourceNode2); 
      p2=true; 
     }; 
     function stop_sound2(){ 
      document.getElementById('playBtn2_play').style.display = 'block'; 
      document.getElementById('playBtn2_stop').style.display = 'none'; 
      p2=false; 
      stopSound(soundBufferSourceNode2); 
      create_buffers(); 
     }; 
     function play_sound3(){ 
      document.getElementById('playBtn3_play').style.display = 'none'; 
      document.getElementById('playBtn3_stop').style.display = 'block'; 
      p3=true; 
      playSound(soundBuffer3, soundBufferSourceNode3); 
     } 
     function stop_sound3(){ 
      document.getElementById('playBtn3_play').style.display = 'block'; 
      document.getElementById('playBtn3_stop').style.display = 'none'; 
      p3=false; 
      stopSound(soundBufferSourceNode3); 
      create_buffers(); 
     } 

     function playSound(buffer, bufferSourceNode) { 
      bufferSourceNode.buffer = buffer; 
      bufferSourceNode.connect(context.destination); 
      bufferSourceNode.noteOn(0); 
     }; 
     function stopSound(bufferSourceNode) { 
      bufferSourceNode.noteOff(0); 
     }; 
     function loadSound(url, bufferNum) { 
      var request = new XMLHttpRequest(); 
      request.open('GET', url, true); 
      request.responseType = 'arraybuffer'; 

      request.onload = function() { 
      var successCallback = function(buffer) { 
       switch(bufferNum) { 
       case 1: 
        soundBuffer1 = buffer; 
       break; 
       case 2: 
         soundBuffer2 = buffer; 
       break; 
       case 3: 
        soundBuffer3 = buffer; 
       break; 
       case 4: 
        soundBuffer4 = buffer; 
       break; 
       case 5: 
        soundBuffer5 = buffer; 
       break; 
       } 
      } 
      var errorCallback = function(e) { 
       console.log(e); 
      } 
      context.decodeAudioData(request.response, successCallback, errorCallback); 
      } 
      request.send(); 
     } 
    </script> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <title>Ambient Sound Generator</title> 
    </head> 
<body> 
<div class="background"> 
    <div id="intro-text"> 
    <h1 id="site-title">Ambient Sound Generator</h1> 
    <p>Mix ambient sounds together to block out distractions and help you focus or relax</p> 
    <p>Click the buttons below to begin</p> 
    </div> 
    <div id="button-container"> 
    <div id="btn1"> 
     <input type="image" class="pp_img" src="img/fire-pause.png" name="Fire" id="playBtn1_play" onclick="play_sound1();" /> 
     <input type="image" class="pp_img" src="img/fire-play.png" name="Fire" id="playBtn1_stop" onclick="stop_sound1();" style="display:none" /> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    <div id="btn2"> 
     <input type="image" class="pp_img" src="img/wind-pause.png" name="Wind" id="playBtn2_play" onclick="play_sound2();" /> 
     <input type="image" class="pp_img" src="img/wind-play.png" name="Wind" id="playBtn2_stop" onclick="stop_sound2();" style="display:none" /> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    <div id="btn3"> 
     <input type="image" class="pp_img" src="img/rain-pause.png" name="Rain" id="playBtn3_play" onclick="play_sound3();"/> 
     <input type="image" class="pp_img" src="img/rain-play.png" name="Rain" id="playBtn3_stop" onclick="stop_sound3();" style="display:none"/> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    <div id="btn4"> 
     <input type="image" class="pp_img" src="img/stream-pause.png" name="Stream" id="playBtn4_play" onclick="play_sound4();"/> 
     <input type="image" class="pp_img" src="img/stream-play.png" name="Stream" id="playBtn4_stop" onclick="stop_sound4();" style="display:none"/> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    <div id="btn5"> 
     <input type="image" class="pp_img" src="img/forest-pause.png" name="Rain" id="playBtn5_play" onclick="play_sound5();"/> 
     <input type="image" class="pp_img" src="img/forest-play.png" name="Rain" id="playBtn5_stop" onclick="stop_sound5();" style="display:none" /> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    </div> 
</div> 
</body> 
    <script> 
     function refreshData(){ 
     x = 1; // x = seconds 
     var d = new Date() 
     var h = d.getHours(); 
     var m = d.getMinutes(); 
     var s = d.getSeconds(); 

     if (h<=9) {h = '0'+h}; 
     if (m<=9) {m = '0'+m}; 
     if (s<=9) {s = '0'+s}; 

     var color = '#'+h+m+s; 

      $("div.background").css("background-color", color); 
      $("p#hex").text(color); 
      setTimeout(refreshData, x*1000); 
     } 
     refreshData(); // execute function 
    </script>

来源

2014-12-01 JellyTots

您需要在playSound中缓存任何当前播放的声音，并在开始新声音之前将其停止。

您不应该在事实之前创建所有这些buffersourcenode;只要创建一个，当你想开始玩。另外，你应该使用start（）和stop（），而不是noteOn（）和noteOff（） - 后者不推荐使用。

试试这个：

<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="css/loopy_styles.css" /> 
    <!--<script type="text/javascript" src="js/loop_functions.js"></script>--> 
    <script> 
     context = new (window.AudioContext || window.webkitAudioContext)(); 

     var soundBuffers = [null,null,null,null,null,null]; // extra entry in array as dummy '0' entry 

     window.onload = function() { 
      loadSound('sounds/fire_test1.wav', 1); 
      loadSound('sounds/wind_test.wav', 2); 
      loadSound('sounds/rain_test1.wav', 3); 
      loadSound('sounds/stream.mp3', 4); 
      loadSound('sounds/spring_test.wav', 5); 
     }; 

     var currentlyPlayingSoundNum = 0; 
     var currentlyPlayingSound = null; 

     function play_sound(num){ 
      stop_any_currently_playing_sound(); 

      if (num) { 
      document.getElementById('playBtn'+num+'_play').style.display = 'none'; 
      document.getElementById('playBtn'+num+'_stop').style.display = 'block'; 

      currentlyPlayingSoundNum = num; 
      currentlyPlayingSound = context.createBufferSource(); 
      currentlyPlayingSound.looping = true; 
      currentlyPlayingSound.buffer = soundBuffers[num]; 
      currentlyPlayingSound.connect(context.destination); 
      currentlyPlayingSound.start(0); 
      } 
     } 

     function stop_sound(){ 
      if (currentlyPlayingSound) { 
      document.getElementById('playBtn'+currentlyPlayingSoundNum+'_play').style.display = 'block'; 
      document.getElementById('playBtn'+currentlyPlayingSoundNum+'_stop').style.display = 'none'; 

      currentlyPlayingSound.stop(0); 
      currentlyPlayingSound = null; 
      currentlyPlayingSoundNumber = 0; 
      } 
     } 


     function loadSound(url, bufferNum) { 
      var request = new XMLHttpRequest(); 
      request.open('GET', url, true); 
      request.responseType = 'arraybuffer'; 

      request.onload = function() { 
      var successCallback = function(buffer) { 
       soundBuffers[bufferNum] = buffer; 
      } 
      var errorCallback = function(e) { 
       console.log(e); 
      } 
      context.decodeAudioData(request.response, successCallback, errorCallback); 
      } 
      request.send(); 
     } 
    </script> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <title>Ambient Sound Generator</title> 
    </head> 
<body> 
<div class="background"> 
    <div id="intro-text"> 
    <h1 id="site-title">Ambient Sound Generator</h1> 
    <p>Mix ambient sounds together to block out distractions and help you focus or relax</p> 
    <p>Click the buttons below to begin</p> 
    </div> 
    <div id="button-container"> 
    <div id="btn1"> 
     <input type="image" class="pp_img" src="img/fire-pause.png" name="Fire" id="playBtn1_play" onclick="play_sound(1);" /> 
     <input type="image" class="pp_img" src="img/fire-play.png" name="Fire" id="playBtn1_stop" onclick="stop_sound();" style="display:none" /> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    <div id="btn2"> 
     <input type="image" class="pp_img" src="img/wind-pause.png" name="Wind" id="playBtn2_play" onclick="play_sound(2);" /> 
     <input type="image" class="pp_img" src="img/wind-play.png" name="Wind" id="playBtn2_stop" onclick="stop_sound();" style="display:none" /> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    <div id="btn3"> 
     <input type="image" class="pp_img" src="img/rain-pause.png" name="Rain" id="playBtn3_play" onclick="play_sound(3);"/> 
     <input type="image" class="pp_img" src="img/rain-play.png" name="Rain" id="playBtn3_stop" onclick="stop_sound();" style="display:none"/> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    <div id="btn4"> 
     <input type="image" class="pp_img" src="img/stream-pause.png" name="Stream" id="playBtn4_play" onclick="play_sound(4);"/> 
     <input type="image" class="pp_img" src="img/stream-play.png" name="Stream" id="playBtn4_stop" onclick="stop_sound();" style="display:none"/> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    <div id="btn5"> 
     <input type="image" class="pp_img" src="img/forest-pause.png" name="Rain" id="playBtn5_play" onclick="play_sound(5);"/> 
     <input type="image" class="pp_img" src="img/forest-play.png" name="Rain" id="playBtn5_stop" onclick="stop_sound();" style="display:none" /> 
     <p><input type="range" min="0" max="100" value="100" onchange="sample.changeVolume();"> Volume</p> 
    </div> 
    </div> 
</div> 
</body> 
    <script> 
     function refreshData(){ 
     x = 1; // x = seconds 
     var d = new Date() 
     var h = d.getHours(); 
     var m = d.getMinutes(); 
     var s = d.getSeconds(); 

     if (h<=9) {h = '0'+h}; 
     if (m<=9) {m = '0'+m}; 
     if (s<=9) {s = '0'+s}; 

     var color = '#'+h+m+s; 

      $("div.background").css("background-color", color); 
      $("p#hex").text(color); 
      setTimeout(refreshData, x*1000); 
     } 
     refreshData(); // execute function 
    </script>

来源

2014-12-01 22:30:42 cwilso

你能告诉我如何去修改上述适合你提出什么例子，只是我想实现你的建议，现在什么都不是加工。 – JellyTots 2014-12-01 22:45:18

参见上面的例子。 – cwilso 2014-12-06 14:53:19

缓冲区和Web音频API

回答

相关问题