解決html5 audio iphone,ipd,safari不能自動播放問題

http://leiyongping88.iteye.com/blog/1831145

 

html audio 在iPhone,ipd,safari瀏覽器不能播放是有原因滴
(在safri on ios裏面明確指出等待用戶的交互動作後才能播放media,也就是說如果你沒有得到用戶的action就播放的話就會被safri攔截)

找了很多資料都沒有解決,不過最終在國外網站通過翻譯解決問題,希望能幫到沒有解決此問題的童鞋

附帶源碼如下:黑色部分表示重點突出

 

var g_audio = window.g_audio = new Audio();  //創建一個audio播放器
var g_event = window.g_event =new function(){
    var events = ['load','abort','canplay','canplaythrough',
              'durationchange','emptied','ended','error',
              'loadeddata','loadedmetadata','loadstart',
              'pause','play','playing','progress',
              'ratechange','seeked','seeking','stalled',
              'suspend','timeupdate','volumechange','waiting', 'mediachange'];
    g_audio.loop = false;
g_audio.autoplay = true;
g_audio.isLoadedmetadata = false;
g_audio.touchstart = true;
g_audio.audio = true;
g_audio.elems = {};
g_audio.isSupportAudio = function(type){
    type=type||"audio/mpeg";
    try{
        var r=g_audio.canPlayType(type);
        return g_audio.canPlayType&&(r=="maybe"||r=="probably")
    }catch(e){return false;}
};
g_audio.push = function(meta){
    g_audio.previousId = g_audio.id;
    g_audio.id = meta.song_id;
    g_audio.previousSrc = g_audio.src;
    g_audio.previousTime = 0.00;
    g_audio.src = g_audio.currentSrc = meta.song_fileUrl;
    g_audio.isLoadedmetadata = false;
    g_audio.autobuffer = true;
    g_audio.load();
    g_audio.play();
    if(g_audio.previousSrc !== g_audio.src){
    g_audio.play();
    }
};

for(var i = 0, l = events.length; i < l; i++){
    (function(e){
    var fs = [];
    this[e] = function(fn){
        if(typeof fn!== 'function'){
        for (var k = 0; k<fs.length; k++){
            fs[k].apply(g_audio);
        }
        return ;
        }
        fs.push(fn);
        g_audio.addEventListener(e, function(){
        fn.apply(this);
        });
    };
    }).apply(this, [events]);
}

this.ended(function(){  //播放結束
    
});

this.load(function(){  //加載
   this.pause();
    this.play();
});

this.loadeddata(function(){
    this.pause();
    this.play();
});

this.loadedmetadata(function(){
    this.isLoadedmetadata = true;
});
this.error(function(){   //請求資源時遇到錯誤
    
});
this.pause(function(){  //歌曲暫停播放
    
});
this.play(function(){  //歌曲播放
    
});
};

 

 

$(document).ready(function(){    
    if(/i(Phone|P(o|a)d)/.test(navigator.userAgent)){
        $(document).one('touchstart', function (e) {
        g_audio.touchstart = true;
        g_audio.play();
        g_audio.pause();
        return false;
        });
    }
});

 

audio使用:

$("#main").unbind("click").bind("click",function(){
        //gid 表示歌曲id,只是一個表示,沒有值不影響播放
    //song_fileUrl :播放歌曲地址,不能爲空,有效地址
    g_audio.elems["id"] = gid;
    g_audio.push({song_id:gid,song_fileUrl:json.URL});
});//綁定事件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章