日常建站中，很多站点都把背景音乐添加到网页中，好的音乐可以增加网站的访客量和浏览时间，这样也使得站点变得更有趣，也显得高端大气。如果你想给自己的网站增加背景音乐该怎么操作呢？下面我们来了解下如何在网站页面中添加自动播放背景音乐。
一、首先准备应该mp3格式的音乐文件，上传到你的服务器或虚拟主机。
二、修改HTML代码，一般在你的HTML文件中的<head>标签中添加，代码如下：
<audio autoplay loop>
<source src="你的mp3文件路径" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio>这段代码中，autoplay属性可以让音频在页面加载后自动播放，loop属性可以让音频在播放完毕后自动重复播放。<source>标签的src属性指定了音频文件的位置，你需要将mp3文件替换为你自己的音频文件路径。
如果你想给上面的代码增加一个按钮（暂停/播放），可以使用下面代码。
<audio id="myAudio" autoplay loop>
<source src="你的mp3文件路径" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio>
<button id="controlButton" onclick="togglePlay()">暂停/播放</button>
<script>
var myAudio = document.getElementById("myAudio");
var controlButton = document.getElementById("controlButton");
var isPlaying = true;
function togglePlay() {
if (isPlaying) {
myAudio.pause();
} else {
myAudio.play();
}
isPlaying = !isPlaying;
}
</script>上面的两段代码在大部分浏览器中都可以实现音乐自动播放，但是对于一些现代浏览器，例如（Chrome和Safari）可能会阻止自动网页自动播放，建议给代码增加一个播放按钮，代码如下。
<audio id="myAudio" autoplay loop>
<source src="你的mp3文件路径" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio>
<button id="playButton">播放</button>
<button id="stopButton">暂停</button>
<script>
var myAudio = document.getElementById("myAudio");
var playButton = document.getElementById("playButton");
var stopButton = document.getElementById("stopButton");
playButton.addEventListener("click", function() {
myAudio.play();
});
stopButton.addEventListener("click", function() {
myAudio.pause();
});
</script>另附一段简易代码，同样适配于Chrome和Safari浏览器，只不过PC端会显示播放器样式，大家可以看一下，代码如下。
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
src="你的mp3文件路径">
你的浏览器版本太低，不支持audio标签
</audio>以上就是在网站页面中添加自动播放背景音乐的一些方法，代码仅供参考，请自行研究！
版权声明：本文内容来源于网络或网友投稿，如侵犯你的权益，请右侧小窗口联系我们删除。
THE END
