这篇文章将为大家详细讲解有关“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事件，这样就算是不能自动播放，至少可以在触摸页面的可以进行播放，算是一种体验改进吧。

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"HTML5如何实现移动端页面加载后音频自动播放"的内容，大家可以关注群英网络的其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用HTML+CSS制作炫酷的环绕倒影加载的代码是什么

  本文主要介绍了html+css实现环绕倒影加载特效，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• Canvas中用什么方法实现视频截图的功能，具体过程是怎样的

  我本次的需求是多人视频中对某一视频某一刻的截图，展示视频直接用的原生video标签，今天通过使用canvas对video视频某一刻截图功能，感兴趣的朋友跟随小编一起看看吧

• 在CSS中怎么样实现自动换行，代码是什么

  自动换行的css教程代码与方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行html<id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css#wrap{white-space:normal;width:200px;}1.（ie浏览器）连续的英文 ...

• 用Canvas怎样画有填充和无填充的矩形

  canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以，如何用canvas绘制一个矩形呢？接下来这篇文章将给大家来介绍关于canvas画一个矩形的实现方法的内容，若是有需要的话可以看看。

• 如何用CSS实现折叠纸飞机并飞出去的动画？

  大家童年都有折过纸飞机的吧，今天我们就来看看如何用代码来实现。文中分享的示例用CSS+JS实现了折叠纸飞机并飞出去的动画效果，实现效果及代码如下，感兴趣的朋友接下来就跟随小编往下看吧。