Audio使用總結

貓科動物發表於2019-04-08
下面是自己的一些工作中遇到的問題總結，第一次寫，倘若有問題請指出，我會修改，會持續更新

1、ios相容問題

1.1、ios不能自動播放問題

專案需求：在已進入頁面的時候要播放音訊

問題：測試的時候發現在ios裡面音訊不能自動播放

原因：IOS裝置系統是不允許視訊音訊自動播放的，需要使用者明確指定播放（通過一定的互動動作），相關的音訊或視訊才能被載入。

解決辦法：

我是微信公眾號專案，可以通過微信的jssdk去觸發音訊播放

程式碼：

  • 微信的jssdk

//引入微信的js檔案<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>//定義audiovar audio = (function(){
   var _audio = new Audio();
   _audio.src = 'xxx';
   _audio.load();   return _audio;
})()// 微信配置資訊（即使不正確也沒問題wx.config({debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []});// 在ready時觸發相關事件wx.ready(function() {
  // 觸發一下play事件  audio.play();});複製程式碼
  • 野生方法

var audio = (function(){
   var _audio = new Audio();
   _audio.src = 'xxx';
   _audio.load();   return _audio;
})()document.addEventListener("WeixinJSBridgeReady", function () {
  WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
   // 觸發一下play事件   audio.play();  });}, false);
複製程式碼


1.2、ios下audio預載入事件導致延遲

問題描述：如果是在動畫音效比較多的頁面，此時此刻如果要根據場景的變換播放不同的音效。假如在我們動畫播放過程中，音訊還沒有緩衝完畢，或者只緩衝了一部分，音訊是會不播放或者停止播放的，會出現動畫和音效不同步的情況，使用者體驗不好，那麼現在就要用到音訊預載入；但是在ios中 audio自帶的preload屬性是失效的 播放的時候會有三秒延遲

  • 原生preload

<audio src='xxx.mp3' loop=true preload='auto' />
//相容性不好，ios不支援preload複製程式碼
  •  preload.js

//推薦使用createjs裡的preloadjs，但還需要配合soundjs使用。[使用方法連結地址](https://segmentfault.com/a/1190000011080683)複製程式碼
  • onload

//在上述1.1問題中 
微信jsdk，ready中重新載入音訊：audio.load();
但是這樣ios剛進入頁面就播放音訊會出現延遲問題、其他時候點選不會 暫時不知道怎麼樣才能更好的優化
複製程式碼

其他：如果是在其他環境中，比如：VUE 可以在請求完資料以後手動load，但要注意要非同步load，剛剛請求完資料，dom是沒有載入完畢的

//在資料請求成功的位置使用nextTick獲取dom
Vue.nextTick(function(){

    console.log(vm.$el) //可以得到'changed'
})
//也可以
setTimeout(function(){
    console.log(vm.$el) //可以得到'changed'
}, 0)複製程式碼


相關文章