audio或video标签的autoplay属性的说明
<audio> 标签用于将声音内容嵌入文档中，例如音乐或其他音频流。
HTML audio 标签
<audio> - HTML（超文本标记语言） | MDN
<video> 标签用于将视频内容嵌入文档中，。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
HTML video 标签
<video>: 视频嵌入元素 - HTML（超文本标记语言） | MDN
想让内容自动播放的最简单方法是将autoplay属性添加到<audio>或<video>元素。但自动播放音频（或有声视频）可能会破坏用户体验，尽管自动播放媒体文件在某些情况下，如实现背景音乐时是一个很实用的功能，据新规则，可能需要在满足一定的条件才允许自动播放【可参见https:///zh-CN/docs/Web/Media/Autoplay_guide】。
chrome、safari、firefox、edge等浏览器都在某版本后限制了audio自动播放功能，必须要用户与当前页面有交互后，例如下面的例子设置了按钮，当用户点击后播放。
使用<audio> 标签实现网页背景音乐播放源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐播放</title>
</head>
<body>
<audio id="aid" autoplay loop src="./horse.mp3" ></audio>
<button type="button" id="unmuteButton">Click Me!</button>
<script>
unmuteButton.addEventListener('click', function() {
var music = document.getElementById("aid");//获取ID
if (music.paused) { //判读是否播放
music.paused=false;
music.play(); //没有就播放
}
});
</script>
</body>
</html>
上面源码也可以写为（提示，仅JS部分的不同）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐播放 </title>
</head>
<body>
<audio id="aid" autoplay loop src="./horse.mp3" ></audio>
<p>单击鼠标</p>
<script>
function SoundPlay() {
var music = document.getElementById("aid");//获取ID
if (music.paused) { //判读是否播放
music.paused=false;
music.play(); //没有就播放
}
}
setInterval("SoundPlay()",1);
</script>
</body>
</html>
使用<video> 标签实现网页背景音乐播放源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐播放</title>
</head>
<body>
<video id="vid" muted autoplay loop src="./horse.mp3" ></video>
<button type="button" id="unmuteButton">Click Me!</button>
<script>
unmuteButton.addEventListener('click', function() {
vid.muted = false;
});
</script>
</body>
</html>
用户和页面之间有交互：其实就是指 用户与页面要发生了事件，才算有交互。比如 鼠标事件（单击 onclick，双击 ondblclick，按下 onmousedown，松开 onmouseup，右击 oncontextmenu 等），键盘事件（按下 onkeydown，松开 onkeyup 等）等。
既然是这样，那么在用户进入页面的时候，只要引导用户先去触发这些事件，背景音乐就能播放了，问题变相解决了，如上面的例子。
