移动手机站添加背景音乐自动播放的问题解决方案，HTML5中的autoplay属性是设置为自动播放。如果设置了该属性，视频或音频将自动播放。 但是需要注意的是部分浏览器比如Safari屏蔽了autoplay属性。因为autoplay在移动网络环境下可能会造成用户流量费剧增。因此在手机网站上如果添加背景音乐的话使用audio是无法自动播放的，怎么才能解决这个问题呢？下面模板社小编就来告诉大家一种解决方案，亲测安卓（微信 qq）浏览器可用。百度浏览器不可用。

1. <audio style="display:none; height: 0" id="bg-music" preload="auto" src="/style/Time.mp3" loop="loop">
2. <script>
3. //音乐自动播放
4. $(document).ready(function(){
5. autoPlayMusic();
6. audioAutoPlay();
7. });
8. function audioAutoPlay() {
9. var audio = document.getElementById('bg-music');
10. audio.play();
11. document.addEventListener("WeixinJSBridgeReady", function () {
12. audio.play();
13. }, false);
14. }
15. // 音乐播放
16. function autoPlayMusic() {
17. // 自动播放音乐效果，解决浏览器或者APP自动播放问题
18. function musicInBrowserHandler() {
19. musicPlay(true);
20. document.body.removeEventListener('touchstart', musicInBrowserHandler);
21. }
22. document.body.addEventListener('touchstart', musicInBrowserHandler);
23. // 自动播放音乐效果，解决微信自动播放问题
24. function musicInWeixinHandler() {
25. musicPlay(true);
26. document.addEventListener("WeixinJSBridgeReady", function () {
27. musicPlay(true);
28. }, false);
29. document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
30. }
31. document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
32. }
33. function musicPlay(isPlay) {
34. var media = document.querySelector('#bg-music');
35. if (isPlay && media.paused) {
36. media.play();
37. }
38. if (!isPlay && !media.paused) {
39. media.pause();
40. }
41. }
42. </script>