HTML 5 Audio/Video DOM canplaythrough 事件在移動端遇到的坑

canplaythrough 事件定義和用法

當瀏覽器預計能夠在不停下來進行緩沖的情況下持續播放指定的音頻/視頻時，會發生 canplaythrough 事件。

當音頻/視頻處於加載過程中時，會依次發生以下事件：

• loadstart
• durationchange
• loadedmetadata
• loadeddata
• progress
• canplay
• canplaythrough

瀏覽器支持

所有主流瀏覽器都支持 canplaythrough 事件。

注釋：Internet Explorer 8 或更早的瀏覽器不支持該事件。

以上是w3cschool的解釋，但是在我實驗檢測中，發現chrome，firefox對此事件是支持的，而移動端對此事件支持需要輔助方法。

我們在做移動端h5的時候，可能都會需要預加載資源，包含圖片，音視頻文件

var audio = new Audio();
audio.addEventListener("canplaythrough",function(){
    console.log("加載完成！");
},false);
audio.addEventListener("error",function(){
    console.log("加載失敗！");
},false);
audio.src = src;

看這段代碼好像每錯，在pc端檢測也沒有錯，但是當我們放到h5上面就會出錯，因為手機上面音樂是流媒體加載的，就是說在加載的過程中是可以播放的一邊加載一邊播放，canplaythrough 事件在移動端，只有允許audio/video文件加載播放完之后才會執行。

var audio = new Audio();
//canplaythrough這個事件在手機上流媒體要一邊播放才能監聽得到，pc端chrome可以完美支持
audio.addEventListener("canplaythrough",function(){
    //我們發現播放完之后這里執行了
    console.log("加載完成！");
},false);
audio.addEventListener("error",function(){
    console.log("加載失敗！");
},false);
audio.src = src;
audio.play();

但是這里會導致加載的時候就播放聲音，那於是這樣干

var audio = new Audio();
//canplaythrough這個事件在手機上流媒體要一邊播放才能監聽得到，pc端chrome可以完美支持
audio.addEventListener("canplaythrough",function(){
    audio.pause();
    audio.volume = 1;
    //我們發現播放完之后這里執行了
    console.log("加載完成！");
},false);
audio.addEventListener("error",function(){
    console.log("加載失敗！");
},false);
audio.src = src;
audio.play();
audio.volume = 0;

但是發現，效果不好，會出現停頓等現象。

 

於是最后想了一種方法，通過xmlHTTP來獲取音頻文件：

function createXHR(){
  try { return new XMLHttpRequest(); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
  return null;
}  

var xhr=createXHR();
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            callNext();
        }else{
            callNext();
        }
    }
};
scr = "song.mp3";
//true（異步）或 false（同步）
xhr.open("post",src,false);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xhr.send()

但是發現這樣做還是不完美，發現音樂還是有延遲的現象;

歡迎大神拍磚，給出解決辦法