LOLILI

这阵子做了一个音乐播放器，才意识到ios上的safari浏览器是后台无法自动播放音乐的。

关于html5 audio标签，有几个基本事件

audio加载事件

• loadstart 提示音频的元数据已加载
• durationchange 提示视频的时长已改变
• loadedmetadata 提示音频的元数据已加载
• loadeddata 提示当前帧的数据是可用的
• progress 提示视频正在下载中
• canplay 提示该视频已准备好开始播放
• canplaythrough 提示视频能够不停顿地一直播放

依次是如上几个事件

在chrome中，canplay事件后，音乐即可以播放，有声音。

然而在safari中，只有canplaythrough事件后，音乐才开始播放。

在ios11中，我在audio标签中加入autoplay是可以自动播放的，并不存在无法自动播放的情况，然而缓冲时间较chrome久，原因如上，safari在canplaythrough事件后才开始播放

在safari是当前正打开的程序，并且播放器页面是safari当前页，并且手机无锁屏时，是可以通过JS改变audio的src自动切换到下一首的。

在safari处于后台时，是无法通过改变audio的src切换音乐了，我研究了下。

在loadstart 或 loadeddata 或canplay事件时播放音乐是可以实现后台切换音乐的。

 //就绪
    onCanplay = e => {
        const audio = this.refs.audio;
        audio.play();
    };

但这样还有2个问题

• safari处于其他页面，无法自动播放
• 手机锁屏超过一定时间后无法自动播放

第一点可能是safari的机制，我还没找到解决办法 第二点我猜测是ios锁屏一段时间后禁止了safari的刷新与联网，这个无解，safari属于ios自带应用，无法设置后台自动刷新

此外safari后台运行时间久后也无法自动播放，大概能正常播放3首左右，不想折腾了~~~//