HTML5页⾯⾳频⾃动播放的实现⽅式
最近有这么⼀个需求，需要在⼿机加载⼀个页⾯的时候，⾃动播放⾳乐资源。⼀般情况下，这个问题也就解决了，但是要保证各种⼿机上表现⼀致，那就相当困难了，⾄少要费点⼉周折。下⾯有三种常规的⽅式，可以创建⾃动播放的audio对象：
第⼀种：页⾯上创建⼀个audio标签，写好相关的属性，如：autoplay='autoplay'，正常情况下，这⾥写上资源地址之后，访问页⾯之后就可以⾃动播放了。但是如果⾳乐资源地址不确定，需要js改变的话，就需要使⽤JS来实现了。
(function() {
var audio = ElementById('myAudio1');
audio1 = audio;
audio.src = source;
audio.loop = true;
audio.autoplay = true;
audio.play();
audio.addEventListener('canplay', canPlay, false);
})();
　第⼆种：和第⼀种⽐较相似，只不过所有的标签都是JS创建之后，插⼊到页⾯上的。
(function() {
var audio = ateElement("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);
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();
})();
  附：上述三个⽅法的
另外增加⼀种第三⽅库实现，⾳频资源的播放以及控制。　整理了⼀些第三⽅库，功能不只是播放⾳乐，还有⼀些其他功能，这个⾃⼰研究。
howler.js: goldfirestudios/blog/104/howler.js-Modern-Web-Audio-Javascript-Library
buzz.js: buzz.jaysalvat/
audio.js: kolber.github.io/audiojs/
jPlayer.js: /
使⽤了上述⽅法之后，发现在Iphone⼿机（）和部分android⼿机仍然不能，⾃动播放。
他的播放条件是：必须有⽤户⾏为操作，才能进⾏播放。
所以就需要考虑，通过什么样的⽅式可以模拟⽤户的操作呢？⽹络上提供了⼀些⽅式，可以实现⾃动播放，如：
创建⼀个Image对象，然后监听Image是否加载完毕，如果加载完毕，执⾏audio的播放，达到⾃动播放效果
⼀个类似的⽅法，创建⼀个iframe，资源直接就是⾳频资源的地址，iframe加载完毕就能⾃动播放
给document或者body绑定⼀个touchstart事件，这样⽤户只要触碰到页⾯就可以触发播放
上述提到的前两条，我测试发现基本上没有效果。⾄于第三条，这个肯定是没有问题的，但是这种⽅式确实不完全算是⾃动播放，因为完全有可能⽤户就是不触碰页⾯，那么就是不会播放。但是在有些场景下，确实可以使⽤，这个要区分场景。
进⽽我想到了，能不能监听⼿机是否运动或者是移动，来进⾏播放⾳频呢？我监听了devicemotion()事件，发现还是不⾏，此时我已经凌乱了，死的⼼都有了。
html5开发示例
最后的最后，我使⽤了在页⾯上创建audio标签，使⽤JS调整audio相关属性和值，然后控制⾳频播放。
这种⽅式基本上，可以在不同的⼿机上表现出相同的效果，但是就是我测试的⼀个5S⼿机就是不⾏。。。同样别的5S却没有问题，具体原因到现在都没有查出来我就默默的把他忽略了。
为了能让哪些不能⾃动播放的提升⼀些体验，⼜绑定了⼀个touchstart事件，这样就算是不能⾃动播放，⾄少可以在触摸页⾯的可以进⾏播放，算是⼀种体验改进吧。
补充：  2015年05⽉31⽇
以上就是HTML5页⾯⾳频⾃动播放问题的详细内容，更多关于html5⾳频⾃动播放的资料请关注其它相关⽂章！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。