移动端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一次