目录
问题描述
在360或者qq浏览器，audio定制化开发的自动播放属性目前为定制化开发止是有效的，网页的body定制化开发里面插入下面代码后，定制化开发打开页面就会自动播放音乐。
<audio autoplay="autoplay" loop="loop" preload="auto" src="http://music.163.com/song/media/outer/url?id=1337065812.mp3"></audio>- 1
- 2
- 3
但是Edge、定制化开发谷歌等浏览器是不支持定制化开发音乐自动播放的，通常会报错。
Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.
我们看一下谷歌浏览器怎么说的。（已自动翻译为中文）https://goo.gl/xX8pDD
当然下面还提出了一些解决办法，下面我会给出几个我已经测试过的解决办法。
解决办法1
上面也说了可以始终允许静音自动播放，用户可以通过点击按钮使其播放，这个方法很多平台都在使用。（比如网页浏览一个b站视频，需要点击播放音频按钮才会播放音频）
在body中插入如下代码即可。（按钮样式需要自己找一个）
<video id="video" muted autoplay src="http://music.163.com/song/media/outer/url?id=1337065812.mp3"></video><button type="button" id="unmuteButton">Click Me!</button><script> unmuteButton.addEventListener('click', function() { video.muted = false; });</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
这个方法有一个问题就是音频一直在静音播放，你不知道进度，等你点击按钮可能音频已经播放几秒钟了。
解决办法2
使用网易云音乐的外链播放器，在网易云官网搜索一首歌曲之后进入播放页面，点击生成外链播放器。
使用iframe插件，复制代码。
但是要注意一点，代码中的src是不完整的，需要在前面加上http:
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=1464325108&auto=1&height=66" style="top:0px;position:absolute;z-index:2;left:0px"></iframe>- 1
- 2
- 3
可以自己调整位置，让这个插件显示在页面上方，用户自己决定音乐的播放。
解决办法3
这个办法需要用户点击了页面才会自动播放音乐。
<audio id="bgmusic" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio> <script type="text/javascript"> function toggleSound() { var music = document.getElementById("bgmusic");//获取ID console.log(music); console.log(music.paused); if (music.paused) { //判读是否播放 music.paused=false; music.play(); //没有就播放 } }setInterval("toggleSound()",1);</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
解决办法4
使用按钮控制HTML5背景音乐开关，源码来自https://www.helloweba.net/javascript/321.html
大家可以自行下载。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width; initial-scale=1.0"><title>演示：使用按钮控制HTML5背景音乐开关</title><style></style><link rel="stylesheet" type="text/css" href="../css/main.css" /></head><body><div id="main"> <div style="width:300px; height:120px; margin:100px auto"> <audio id="music2" src="http://music.163.com/song/media/outer/url?id=1337065812.mp3" loop="loop">你的浏览器不支持audio标签。</audio> <a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0" style="top: 10px;right: 10px;position: absolute;"></a> </div></div><script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.min.js"></script><script>$("#audio_btn").click(function(){ var music = document.getElementById("music"); if(music.paused){ music.play(); $("#music_btn").attr("src","play.gif"); }else{ music.pause(); $("#music_btn").attr("src","pause.gif"); }});function playPause() { var music = document.getElementById('music2'); var music_btn = document.getElementById('music_btn2'); if (music.paused){ music.play(); music_btn.src = 'play.gif'; } else{ music.pause(); music_btn.src = 'pause.gif'; }}</script></body></html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
如何找音乐链接可以看我的文章：
解决办法5
换个浏览器打开html文件，目前360、qq浏览器是支持自动播放音频的，不用任何操作。