HTML5页面音频自动播放的实现方式

2021-06-21 0 1,009

最近有这么一个需求，需要在手机加载一个页面的时候，自动播放音乐资源。一般情况下，这个问题也就解决了，但是要保证各种手机上表现一致，那就相当困难了，至少要费点儿周折。下面有三种常规的方式，可以创建自动播放的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);    })();

1	(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();    })();

(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();    })();

1	(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-Librarybuzz.js: http://buzz.jaysalvat.com/audio.js: http://kolber.github.io/audiojs/jPlayer.js: http://jplayer.org/

1	howler.js: http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Librarybuzz.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音频自动播放的资料请关注其它相关文章！

本知识来源于互联网索引，如有侵权请联系我们！

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在！

1、寻代码所有源码、代码、教程和软件均为作者提供和网友推荐收集整理而来！
2、寻代码提供的所有模块、软件等资源，均不提供任何技术服务，请知悉！
3、如您需要商用，请支持正版，寻代码网站所提供的程序仅供学习和研究使用！
4、寻代码源码不得使用于非法商业用途，不得违反国家法律。您必须在下载后24小时内删除！
5、寻代码资源每天实时更新，如遇压缩包解压密码，一律为：www.xundm.com
6、寻代码资源售价和VIP会员只是赞助，收取费用仅维持本站的日常运营所需！
7、如有链接无法下载、失效或广告，请在会员中心下工单！
如有侵犯您版权的，请来信（邮箱:[email protected]）指出，本站将立即改正。

寻代码 html5 HTML5页面音频自动播放的实现方式 https://xundm.com/202119355.html