您现在的位置是：网站首页> 编程资料编程资料

HTML5页面音频自动播放的实现方式html5 video全屏播放/自动播放的实现示例html5中嵌入视频自动播放的问题解决html5自动播放mov格式视频的实例代码解决HTML5中的audio在手机端和微信端的不能自动播放问题HTML5 解决苹果手机不能自动播放音乐问题有关HTML5中背景音乐的自动播放功能HTML5页面音视频在微信和app下自动播放的实现方法

2021-08-30 1121人已围观

简介本文给大家分享三种常规的方法创建自动播放的audio对象，就每种方式通过实例代码给大家介绍的非常详细，对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手机仍然不能，自动播放。

他的播放条件是：必须有用户行为操作，才能进行播放。

所以就需要考虑，通过什么样的方式可以模拟用户的操作呢？网络上提供了一些方式，可以实现自动播放，如：