在网站页面添加自动播放背景音乐的代码教程

日常建站中，很多站点都把背景音乐添加到网页中，好的音乐可以增加网站的访客量和浏览时间，这样也使得站点变得更有趣，也显得高端大气。如果想给自己的网站增加背景音乐该怎么操作呢？下面我们来了解下如何在网站页面中添加自动播放背景音乐。

一、首先准备应该mp3格式的音乐文件，上传到服务器或虚拟主机中去。

二、修改HTML代码，一般在HTML文件中的标签中添加，代码如下：

<audio autoplay loop>  
  <source src="你的mp3文件路径" type="audio/mpeg">  
  浏览器不支持音频标签。  
</audio>

这段代码中，autoplay属性可以让音频在页面加载后自动播放，loop属性可以让音频在播放完毕后自动重复播放。标签的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>

👋 感谢您的观看！