分类： 前端

预加载和自动播放问题

本以为预加载是一件理所应当的事情，有的音频文件这么大，不可能要等到用户点击播放按钮的时候才去加载，这肯定会存在延时问题。

Note: The preload attribute is supported in Safari 5.0 and later. Safari on iOS never preloads.

苹果官方技术文档解释：只有等到用户真正的点击页面才会去加载资源文件。用户触摸之前永远不会加载音乐文件或元数据。这是为了确保网页不会要求在移动设备上下载大量音乐或数据，这可能会占用大量移动数据。因此，无论您的代码有什么，预加载标签在移动 Safari 中基本上总是设置为“无”。

所以这里唯一的解法就是在交互上做一点处理，毕竟用户的网速不可控，在音频可播放之前显示loading状态，一直等到可播放为止。 那有什么事件说明可以播放了呢？一顿搜索，canplaythrough事件可以满足！

当终端可以播放媒体文件时触发该canplaythrough事件，估计加载足够的数据来播放媒体直到其结束，而不必停止以进一步缓冲内容。 caniuse 一查，主流大部分系统版本都支持。

当用户点击按钮后，发现还不能播放，那就loading等，一直等。如果播放播到一会儿网络卡了那么就在waiting事件监听。

神奇的currentTime

iphone手机下，如果在不恰当的时机设置currentTime（播放会跳跃到指定的位置），会导致后续设置currentTime无效。一定要在onCanPlay回调事件后设置currentTime才不会导致问题。

audio总时长

插播一个Android手机的问题，乐视手机出的一个bug

获取不到音频的总时长，以下方法没有一个能获取到

@canplay="onCanPlay"
@timeupdate="onTimeUpdate"
@loadedmetadata="onLoadedMetaData"
@ended="onEnded"
@loadstart="loadstart"
@durationchange="durationchange"
@canplaythrough="canplaythrough"
@loadeddata="loadeddata"

在用户没有主动点击播放按钮前，无论怎么样都拿不到，即使是setInterval 也不行。所以只能是在play后再显示总时长。audio的duration属性就是总时长，但产品功能上略有瑕疵，默认状态下显示不了总时长。