HTML5網頁音頻控制

Question

我有音樂播放例子http://www.smartjava.org/examples/webaudio/example3.html

，我需要展示HTML5的音頻播放器（與對照組）這首歌。我怎麼能做到這一點？從下面的例子

Javascript代碼：

// create the audio context (chrome only for now) 
 
    // create the audio context (chrome only for now) 
 
    if (! window.AudioContext) { 
 
     if (! window.webkitAudioContext) { 
 
      alert('no audiocontext found'); 
 
     } 
 
     window.AudioContext = window.webkitAudioContext; 
 
    } 
 
    var context = new AudioContext(); 
 
    var audioBuffer; 
 
    var sourceNode; 
 
    var analyser; 
 
    var javascriptNode; 
 

 
    // get the context from the canvas to draw on 
 
    var ctx = $("#canvas").get()[0].getContext("2d"); 
 

 
    // create a gradient for the fill. Note the strange 
 
    // offset, since the gradient is calculated based on 
 
    // the canvas, not the specific element we draw 
 
    var gradient = ctx.createLinearGradient(0,0,0,300); 
 
    gradient.addColorStop(1,'#000000'); 
 
    gradient.addColorStop(0.75,'#ff0000'); 
 
    gradient.addColorStop(0.25,'#ffff00'); 
 
    gradient.addColorStop(0,'#ffffff'); 
 

 

 
    // load the sound 
 
    setupAudioNodes(); 
 
    loadSound("http://www.audiotreasure.com/mp3/Bengali/04_john/04_john_04.mp3"); 
 

 

 
    function setupAudioNodes() { 
 

 
     // setup a javascript node 
 
     javascriptNode = context.createScriptProcessor(2048, 1, 1); 
 
     // connect to destination, else it isn't called 
 
     javascriptNode.connect(context.destination); 
 

 

 
     // setup a analyzer 
 
     analyser = context.createAnalyser(); 
 
     analyser.smoothingTimeConstant = 0.3; 
 
     analyser.fftSize = 512; 
 

 
     // create a buffer source node 
 
     sourceNode = context.createBufferSource(); 
 
     sourceNode.connect(analyser); 
 
     analyser.connect(javascriptNode); 
 

 
     sourceNode.connect(context.destination); 
 
    } 
 

 
    // load the specified sound 
 
    function loadSound(url) { 
 
     var request = new XMLHttpRequest(); 
 
     request.open('GET', url, true); 
 
     request.responseType = 'arraybuffer'; 
 

 
     // When loaded decode the data 
 
     request.onload = function() { 
 

 
      // decode the data 
 
      context.decodeAudioData(request.response, function(buffer) { 
 
       // when the audio is decoded play the sound 
 
       playSound(buffer); 
 
      }, onError); 
 
     } 
 
     request.send(); 
 
    } 
 

 

 
    function playSound(buffer) { 
 
     sourceNode.buffer = buffer; 
 
     sourceNode.start(0); 
 
    } 
 

 
    // log if an error occurs 
 
    function onError(e) { 
 
     console.log(e); 
 
    } 
 

 
    // when the javascript node is called 
 
    // we use information from the analyzer node 
 
    // to draw the volume 
 
    javascriptNode.onaudioprocess = function() { 
 

 
     // get the average for the first channel 
 
     var array = new Uint8Array(analyser.frequencyBinCount); 
 
     analyser.getByteFrequencyData(array); 
 

 
     // clear the current state 
 
     ctx.clearRect(0, 0, 1000, 325); 
 

 
     // set the fill style 
 
     ctx.fillStyle=gradient; 
 
     drawSpectrum(array); 
 

 
    } 
 

 

 
    function drawSpectrum(array) { 
 
     for (var i = 0; i < (array.length); i++){ 
 
      var value = array[i]; 
 

 
      ctx.fillRect(i*5,325-value,3,325); 
 
      // console.log([i,value]) 
 
     } 
 
    };

Answer 1

我想你想要的是使用音頻標記爲源，並使用createMediaElementSource傳遞音頻webaudio可視化。

請注意，createMediaElementSource會檢查CORS訪問權限，因此您必須具有相應的跨源訪問權限才能使其正常工作。 （它看起來像你的音頻源不會返回適當的訪問頭爲此工作。）