如何創建新的緩衝區以恢復Web Audio API中的播放？

Question

的Web Audio FAQ說：

才能再次播放底層緩衝區，你應該創建一個新的AudioBufferSourceNode。

我真的可以用這個例子，因爲我找不到任何地方。

我想在這個「else/if」的末尾加上一個命令來創建一個新的緩衝區。

這裏是我的代碼：

$('#container_button').click(function() { 
    if (musicPaused == true) { 
     musicPaused = false; 
     document.getElementById("button").className = "play-button-down"; 
     document.getElementById("triangle").className = "triangle-class-down"; 
     document.getElementById("lighter_triangle").className = "lighter-triangle-class-down"; 
     document.getElementById("darker_triangle").className = "darker-triangle-class-down"; 
     sourceBuffer.start(context.currentTime); 

    } else if (musicPaused == false) { 
     document.getElementById("button").className = "play-button-up"; 
     document.getElementById("triangle").className = "triangle-class-up"; 
     document.getElementById("lighter_triangle").className = "lighter-triangle-class-up"; 
     document.getElementById("darker_triangle").className = "darker-triangle-class-up"; 
     musicPaused = true; 
     sourceBuffer.disconnect(analyser); 
    } 
}); 

而這裏的整個頁面直播：

http://www.musicrevolutiondev.com/WebAudioAPI/Prototype_v12.html

Answer 1

我能得到這個工作。我需要使用在新的緩衝區中的「decodeAudioData（）」方法，使「緩衝器」可以定義爲：

/* Global variables */ 

     var context = new (window.AudioContext || window.webkitAudioContext)(); 
     var analyser = context.createAnalyser(); 
     var sourceBuffer = context.createBufferSource(); 
     var musicPaused = true; 

/* Initialize audio*/ 


     var setAudio = function (buffer) { 
      sourceBuffer.buffer = buffer; 
      sourceBuffer.connect(analyser); 
      analyser.connect(context.destination); 
     }; 


/*Load and set audio*/ 

     function loadAudio() { 
      var request = new XMLHttpRequest(); 
      request.open('GET', 'http://www.musicrevolutiondev.com/streamapp/music/Lynne_Publishing_00124511_Sunny_Autumn.mp3', true); 
      request.responseType = 'arraybuffer'; 
      request.onload = function() { 
      var undecodedAudio = request.response; 
      context.decodeAudioData(undecodedAudio, function (buffer) { 
       setAudio(buffer); 
       }); 
      }; 

      request.send(); 
     }; 

/*Load and set audio on page load*/   

     window.onload = loadAudio(); 


/* Equalizer */    
     var canvas = document.querySelector('.visualizer'); 
     var canvasCtx = canvas.getContext("2d"); 
     var canvasWidth = canvas.width; 
     var canvasHeight = canvas.height; 
     var drawVisual; 
     analyser.fftSize = 256; 
     var bufferLength = analyser.frequencyBinCount; 
     var dataArray = new Uint8Array(bufferLength); 
     canvasCtx.clearRect(0, 0, canvasWidth, canvasHeight); 

     function draw() { 
      drawVisual = requestAnimationFrame(draw); 

      analyser.getByteFrequencyData(dataArray); 

      canvasCtx.fillStyle = 'rgb(0, 0, 0)'; 
      canvasCtx.fillRect(0, 0, canvasWidth, canvasHeight); 

      var barWidth = (canvasWidth/bufferLength) * 2.5; 
      var barHeight; 
      var x = 0; 

      for(var i = 0; i < bufferLength; i++) { 
       barHeight = dataArray[i]/2; 

       canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)'; 
       canvasCtx.fillRect(x,canvasHeight-barHeight/2,barWidth,barHeight); 

       x += barWidth + 1; 
      } 
     }; 

      draw(); 

/* When play button is clicked */     

     $('#container_button').click(function() { 
      if (musicPaused == true) { 
       musicPaused = false; 
       document.getElementById("button").className = "play-button-down"; 
       document.getElementById("triangle").className = "triangle-class-down"; 
       document.getElementById("lighter_triangle").className = "lighter-triangle-class-down"; 
       document.getElementById("darker_triangle").className = "darker-triangle-class-down"; 
       sourceBuffer.start(context.currentTime); 

     } else if (musicPaused == false) { 
       document.getElementById("button").className = "play-button-up"; 
       document.getElementById("triangle").className = "triangle-class-up"; 
       document.getElementById("lighter_triangle").className = "lighter-triangle-class-up"; 
       document.getElementById("darker_triangle").className = "darker-triangle-class-up"; 
       musicPaused = true; 
       sourceBuffer.disconnect(analyser); 
       sourceBuffer.stop(0); 
       sourceBuffer = null; 
       sourceBuffer = context.createBufferSource(); 
       loadAudio(); 
      } 
     });