近来有这么一个需求，必要在手机加载一个页面的时间，主动播放音乐资源。一般环境下，这个标题也就办理了，但是要包管各种手机上表现一致，那就相当困难了，至少要费点儿周折。 下面有三种常规的方式，可以创建主动播放的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音频主动播放的资料请关注脚本之家别的相干文章！ | 
