使用jQuery播放聲音時擺脫滯後時間

Question

我正嘗試在jQuery中使用.keydown（）事件播放聲音。我希望聲音能夠快速播放，但是當我以每秒3次的速度執行keydown事件時，似乎存在滯後時間。

這裏是我的示例代碼的jsfiddle：http://jsfiddle.net/pfrater/FRudg/3/

我使用的聲音和播放音頻html標籤：

<audio controls id="sound" preload="auto"> 
<source src="http://www.wavlist.com/soundfx/011/duck-baby.wav" type="audio/wav"/> 
</audio> 

<audio controls id="sound2" preload="auto"> 
<source src="http://rezound.sourceforge.net/examples/chirp.wav" type="audio/wav"/> 
</audio> 

<audio controls id="sound3" preload="auto"> 
<source src="http://www.all-birds.com/Sound/downychirp.wav" type="audio/wav"/> 
</audio> 

，這裏是我的jQuery：

$(document).ready(function() { 
var playing; 
$(document).bind("keydown", function(key) { 
    playing = undefined; 
    switch(parseInt(key.which, 10)) { 
     case 65: 
      playing = $("#sound").get(0); 
      break; 
     case 83: 
      playing = $("#sound2").get(0); 
      break; 
     case 68: 
      playing = $("#sound3").get(0); 
      break; 
    }; 
    if (playing) { 
     playing.play(); 
    } 
    }).on("keyup", function() { 
    if(playing){ 
     playing.pause(); 
     playing.currentTime=50; 
     playing = undefined; 
    } 
    }); 
}); 

有誰知道擺脫這種滯後的方法嗎？另外，我將要播放的實際文件是mpegs。上面的只是一個例子。

感謝您的幫助，
保羅

Answer 1

您將無法與音頻元素來做到這一點。這是因爲設置和填充緩衝區的成本將花費太多時間。

好消息是，您可以使用Web Audio API來代替。

我讓你根據this code from HTML5 rocks（你應該檢查更多細節）和你原來的小提琴的例子。

目前這個API是supported in Chrome, Firefox, Safari and Opera將能夠使用此：

Fiddle demo

window.AudioContext = window.AudioContext || window.webkitAudioContext; 

/// custom buffer loader 
/// see http://www.html5rocks.com/en/tutorials/webaudio/intro/ 
function BufferLoader(context, urlList, callback) { 
    this.context = context; 
    this.urlList = urlList; 
    this.onload = callback; 
    this.bufferList = new Array(); 
    this.loadCount = 0; 
} 

BufferLoader.prototype.loadBuffer = function (url, index) { 
    var request = new XMLHttpRequest(); 
    request.open("GET", url, true); 
    request.responseType = "arraybuffer"; 

    var loader = this; 

    request.onload = function() { 
     // Asynchronously decode the audio file data in request.response 
     loader.context.decodeAudioData(
     request.response, 

     function (buffer) { 
      if (!buffer) { 
       alert('error decoding file data: ' + url); 
       return; 
      } 
      loader.bufferList[index] = buffer; 
      if (++loader.loadCount == loader.urlList.length) 
       loader.onload(loader.bufferList); 
     }, 

     function (error) { 
      console.error('decodeAudioData error', error); 
     }); 
    } 

    request.onerror = function (e) { 
     alert('BufferLoader: XHR error'); 
    }  
    request.send(); 
} 

BufferLoader.prototype.load = function() { 
    for (var i = 0; i < this.urlList.length; ++i) 
    this.loadBuffer(this.urlList[i], i); 
} 

的主要代碼：

/// setup audio context and start loading samples 
var actx = new AudioContext(), 
    blst, 
    bLoader = new BufferLoader(
    actx, [ 
     'duck-baby.wav', 'chirp.wav', 'downychirp.wav'], 
    done), 
    isReady = false; 

/// start loading the samples 
bLoader.load(); 

function done(bl) { 
    blst = bl;       /// buffer list 
    isReady = true;      /// enable keys 
    $('#status').html('Ready!');   /// update statusw 
} 

/// this sets up chain so we can play audio 
function play(i) { 
    var src = actx.createBufferSource(); /// prepare sample 
    src.buffer = blst[i];    /// set buffer from loader 
    src.connect(actx.destination);  /// connect to speakers 
    src.start(0);      /// play sample now 
} 

/// check keys 
$(window).bind("keydown", function (key) { 
    if (!isReady) return; 
    switch (parseInt(key.which, 10)) { 
     case 65: 
      play(0); 
      return; 
     case 83: 
      play(1); 
      return; 
     case 68: 
      play(2); 
      return; 
    }  
}) 

注：當使用外部樣本，必須確保它們可以交叉使用或否則加載將失敗（我使用我的DropBox來啓用樣本加載小提琴）。