by addy 原创文章,欢迎转载,但希望全文转载,注明本文地址。

本文地址:https://www.iamaddy.net/2022/04/bugs-of-iphoneaudio/

预加载和自动播放问题

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

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属性就是总时长,但产品功能上略有瑕疵,默认状态下显示不了总时长。

本文为原创文章,可能会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,谢谢合作

本文地址:https://www.iamaddy.net/2022/04/bugs-of-iphoneaudio/

个人知乎,欢迎关注:https://www.zhihu.com/people/iamaddy

欢迎关注公众号【入门游戏开发】 入门游戏开发