HTML5页面音频自动播放的实现方式
最近有这么一个需求,需要在手机加载一个页面的时候,自动播放音乐资源。一般情况下,这个问题也就解决了,但是要保证各种手机上表现一致,那就相当困难了,至少要费点儿周折。 下面有三种常规的方式,可以创建自动播放的audio对象:
第一种:页面上创建一个audio标签,写好相关的属性,如:autoplay='autoplay',正常情况下,这里写上资源地址之后,访问页面之后就可以自动播放了。但是如果音乐资源地址不确定,需要js改变的话,就需要使用JS来实现了。
(function() { var audio = document.getElementById('myAudio1'); audio1 = audio; audio.src = source; audio.loop = true; audio.autoplay = true; audio.play(); audio.addEventListener('canplay', canPlay, false); })();
第二种:和第一种比较相似,只不过所有的标签都是JS创建之后,插入到页面上的。
(function() { var audio = document.createElement("AUDIO"); audio2 = audio; audio.setAttribute("src", source); audio.setAttribute("loop", 'true'); audio.setAttribute("controls", 'controls'); audio.setAttribute("autoplay", 'true'); audio.setAttribute("id", 'myAudio2'); audio.addEventListener('canplay', canPlay, false); document.getElementById('example2').appendChild(audio); audio.play(); })();
第三种:没有任何dom标签,使用JS创建一个audio对象,然后通过JS控制audio对象的各种api实现资源更换和自动播放。
(function() { var audio = new Audio(); audio3 = audio; audio.src = source; audio.loop = true; audio.id = 'myAudio3'; audio.autoplay = true; audio.addEventListener('canplay', canPlay, false); audio.play(); })();
附:上述三个方法的demo
另外增加一种第三方库实现,音频资源的播放以及控制。 整理了一些第三方库,功能不只是播放音乐,还有一些其他功能,这个自己研究。
howler.js: http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library buzz.js: http://buzz.jaysalvat.com/ audio.js: http://kolber.github.io/audiojs/ jPlayer.js: http://jplayer.org/
使用了上述方法之后,发现在Iphone手机(详细说明)和部分android手机仍然不能,自动播放。
他的播放条件是:必须有用户行为操作,才能进行播放。
所以就需要考虑,通过什么样的方式可以模拟用户的操作呢?网络上提供了一些方式,可以实现自动播放,如:
- 创建一个Image对象,然后监听Image是否加载完毕,如果加载完毕,执行audio的播放,达到自动播放效果
- 一个类似的方法, 创建一个iframe,资源直接就是音频资源的地址,iframe加载完毕就能自动播放
- 给document或者body绑定一个touchstart事件,这样用户只要触碰到页面就可以触发播放
上述提到的前两条,我测试发现基本上没有效果。至于第三条,这个肯定是没有问题的,但是这种方式确实不完全算是自动播放,因为完全有可能用户就是不触碰页面,那么就是不会播放。但是在有些场景下,确实可以使用,这个要区分场景。
进而我想到了,能不能监听手机是否运动或者是移动,来进行播放音频呢?我监听了devicemotion(详细说明)事件,发现还是不行,此时我已经凌乱了,死的心都有了。
最后的最后,我使用了在页面上创建audio标签,使用JS调整audio相关属性和值,然后控制音频播放。
这种方式基本上,可以在不同的手机上表现出相同的效果,但是就是我测试的一个5S手机就是不行。。。同样别的5S却没有问题,具体原因到现在都没有查出来我就默默的把他忽略了。
为了能让哪些不能自动播放的提升一些体验,又绑定了一个touchstart事件,这样就算是不能自动播放,至少可以在触摸页面的可以进行播放,算是一种体验改进吧。
补充: 2015年05月31日iOS 微信 音频 视频自动播放
以上就是HTML5页面音频自动播放问题的详细内容,更多关于html5音频自动播放的资料请关注脚本之家其它相关文章!
- html5视频自动横过来自适应页面且点击播放功能的实现
- H5页面音频自动播放问题
- Java利用读写的方式实现音频播放代码实例
- HTML5_1 页面视频、音频播放
- HTML页面-------3秒之后自动跳转的3种常用的实现方式
- Html5之高级-5 HTML5音频处理(在H5中播放音频、编程实现音频播放器)
- HTML5实现音频播放
- 移动端html5页面长按实现高亮全选文本内容的兼容解决方式
- Html5通过数据流方式播放视频的实现
- H5-video1 iOS苹果和微信中音频和视频实现自动播放的方法
- 用ISAPI方式实现Web页面的自动更新
- wap页面自动跳转的实现方式
- 使用Apollo Client设置缓存交互方式,实现进入页面自动刷新
- 如何实现页面顶部flash播放完自动关闭
- Html5实现本地视频和音频播放
- HTML5 audio与video标签实现视频播放,音频播放
- H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度
- JS实现HTML5音频播放自定义UI
- 关于微信H5自动播放视频-canvas实现逐帧动画效果加音频
- android实现动画自动播放的渐变欢迎页面