山东十一选五出号最多的好:移動端audio標簽音頻自動播放(兼容微信蘋果iphone)

2019山东十一选五杀号 www.xvcvn.com 所屬分類:媒體-音頻和視頻

分享到微信朋友圈
X
移動端audio標簽音頻自動播放(兼容微信蘋果iphone) ie兼容11

audio標簽聲音自動播放要兼容ios系統的話,需引入微信官網提供的js,即:jweixin-1.0.0.js。

<!-- 必須加在微信api資源 --> 
<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

具體使用方法如下:

<script src="//www.xvcvn.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jweixin-1.0.0.js"></script><!--微信官網提供的js,微信中部分蘋果iphone(ios)音頻可實現自動播放-->

html部分:

<div id="audioDiv">
       <audio id="audio" controls="controls" autoplay="autoplay">
           <source src="" type="audio/mpeg"/>
           設置不支持音頻文件
       </audio>
   </div>
   <div >
       <div >播放</div>
       <div >暫停</div>
       <div >停止</div>
       <div >跳到第3秒</div>
   </div>

JS代碼部分:

/*------------設置音頻播放變量 edit 20190602-1 把這些變量放到前面-------------*/
var media = document.getElementById('audio'); //音頻對象 //edit 20190602-1 把變量audio改成media
var mp3Root = 'mp3/'; //音頻根路徑
var audioArr = [];
var mp3Arr = ['你有新短消息.mp3', '新的詢價請回復.mp3', '新的詢價委托.mp3', '新的在線消息.mp3'];
for (var i = 0; i < mp3Arr.length; i++) {
    audioArr.push(mp3Root + mp3Arr[i]);
}
mp3Arr = audioArr;

/**:::::::::::::::::::::::::
 * [函數:自動播放音頻]
 * @param string mp3 音頻文件路徑
 * edit 20190602-1
 :::::::::::::::::::::::::*/
function autoPlayAudio(mp3) {
    if (typeof(mp3) == 'undefined') mp3 = "";
    //alert("聲音文件111:\n"+mp3);

    //1.電腦端、安卓這樣就可以自動播放了
    $('#audio source')[0].src = mp3; //音頻賦值 

    //2.準備開始播放時(這段代碼并非必須,加上比較保險)
    media.oncanplay = function() {
        media.play();
        //alert("hi,聲音準備開始播放了");
    }

    //3.自動播放兼容:蘋果iphone(ios)中內置瀏覽器safri直接播放音頻
    //實測:對大部分ios版本用內置瀏覽器或在微信中打開網頁都有效
    //說明1:iphone瀏覽器safri需等待用戶交互動作后才能播放media,即如果你沒有得到用戶的action就播放的話就會被safri攔截
    //說明2:本方案其實是個障眼法,因為一般人打開手機網站手指總會不經意就碰到屏幕
    if (/iphone|ipod|mac|ipad/i.test(navigator.userAgent.toLocaleLowerCase())) {
        //$('html,body').on('touchstart', function() { //總是
        $('html,body').one('touchstart', function() { //只一次        
            media.play();
        })
    }

    //4.自動播放兼容:蘋果iphone(ios)部分ios版本可能要先load下才能播放       
    media.load();

    //5.自動播放兼容:微信中打開時在蘋果iphone(ios)中自動播放音頻
    //一般須在head標簽中引入微信的js://res.wx.qq.com/open/js/jweixin-1.0.0.js,且在微信Weixin JSAPI的WeixinJSBridgeReady才能生效。
    //注意1:WeixinJSBridgeReady只會觸發一次,若微信已經ready了,但還沒執行到你監聽這個ready事件的代碼,那么你的監聽是沒用的,
    //注意2:WeixinJSBridgeReady只適合一開始就自動播放聲音,若你是做那種微信場景(打開頁面模擬收到很多條微信,每條微信都要播放那段音效)或初始化故意延時幾秒才播放聲音,實際上這種兼容方案也是無效的
    //注意3:若監聽里面添加alert調試,一般在微信中打開鏈接是不會alert的,而是刷新頁面時才會alert出來
    //注意4:若刪了下面代碼,在微信中部分iphone(ios)版本是不會自動播放聲音的     
    document.addEventListener("WeixinJSBridgeReady", function() {
        media.play();
        //alert("Hi,微信中的部分蘋果iphone(ios)版本");
    }, false);

}

/**:::::::::::::::::::::::::
 * [函數:解決音頻自動播放Bug]
 * 此Bug一般出現在蘋果iphone(ios)中
 * bug1:無法同時播放多個音頻
 * bug2:單個音頻想要延遲N秒后才自動播放,卻發現不會自動播放了
 * @param string mp3 音頻文件路徑
 * add 20190602-1
 :::::::::::::::::::::::::*/
function iosPlayBugs(mp3) {
    if (window.WeixinJSBridge) {
        WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
            media.play();
        }, false);
    } else {
        document.addEventListener("WeixinJSBridgeReady", function() {
            WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                media.play();
            });
        }, false);
    }
    autoPlayAudio(mp3);
    media.play(); //必須,否則在非微信中(即手機內置瀏覽器中)打開時不會播放
}

<!--微信官網提供的js,微信中部分蘋果iphone(ios)音頻可實現自動播放-->

相關插件-音頻和視頻

video封裝ui

videoui無任何依賴,代碼注釋很清楚。
  音頻和視頻
 38685  194

jQuery視頻播放插件jsModern(修改版)

一款簡單的網頁視頻播放器插件jsModern,視頻插件加了一個播放的按鈕,視頻播放時候就 隱藏。暫停就顯示,
  音頻和視頻
 20355  207

音樂歌詞同步播放器

jplayer實現歌詞同步的JS音樂播放器效果
  音頻和視頻
 23955  201

一個交互式的動畫SVG(鼓)工具包

有關如何使用GSAP和jQuery創建動畫和交互式SVG鼓套件的教程。
  音頻和視頻
 17878  244

討論這個項目(0)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

取消回復