播放背景音乐是一种很常见的需求,但是现在的很多浏览器已经禁止了一进入就播放音乐这个功能,因此我们通常会使用一种变通的方法:当用户第一次触碰屏幕的时候播放音乐。

上面的是做好的demo,大家可以感受一下,这个在pc,手机上,第一次触碰后都可以正常播放音乐。

难点分析

一般我们都会用touchstart来监听第一次触碰屏幕,然后播放音乐,但是在chrome上,如果我们在ontouchstart后直接play,就会报错:

因为chrome上是要求必须有一个完整的手势才可以触发音乐,例如click等,而ontouchstart只是手势的一部分。但是ontouchstart在safaric上又是可以播放的,并且在safaric上click又是不能播放的。

因此我们代码必须同时兼顾到ontouchstart,click情况,就是先用ontouchstart触发,如果报错,我们再走click这种情况。同时要兼顾在pc上的情况,因为在pc上是不会先触发ontouchstart的,而是直接触发click。

关键代码如下:

控制的关键流程大致如下:

background Layer 1 第一次触碰(state=0) ontouchstar(state=1) click(state=2) ios/android pc 正常 报错 ontouchend(state=2) catch(state=1.5) click(state=2) click(无动作)

这里有几点需要注意:1.play的报错是用catch去捕捉,2.在ontouchend的时候需要去屏蔽播放音乐的icon元素,否则会二次触发它的事件。3当第一次播放完成后要即使移除事件的监听,否则后续会有问题。

页面不可见,关闭音乐

有些时候我们发现,当把页面关闭/切app的时候发现我们的音乐还在播放,这时我们要监听一些事件,然后关闭音乐:

上面的visibilitychange是在app切后台的时候触发,如果发现此时处于不可见,也就是document.hidden,那么就关闭音乐。

AudioContext播放音乐

当然AudioContext也是可以播放音乐,但是它有个坑,就是如果手机处于静音模式的时候,播放是没有声音的。但是如果用audio,哪怕是静音模式,只要你的音量不是0,就会有声音。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字