移動端Ios 不能使用audio 自帶的canplay事件來獲取音頻的總時長

 

關於Vue使用Audio的文章可以參考

https://blog.csdn.net/weixin_33695450/article/details/91462679

 

我使用的時候出現一個問題 發現 IOS在進入頁面時並不能獲取到duration屬性

也就是並不能獲取總時長，但是點開播放之后就可以獲取到，百度后發現蘋果開發者平台上有說明

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html

 

 

 意思大概就是在Safari 5.0及更高版本中支持preload屬性。iOS上的Safari從不預加載，所以找到了問題所在

解決方法如下

      mounted() {
        var musicDom = $('#audio')[0];
        let that = this
        musicDom.load();
        musicDom.onloadedmetadata = function () {
          that.duration = musicDom.duration;
          console.log('加載的匿名函數',that.duration);
        };
      }

在vue的mounted方法中 把該dom元素load一次