伴音网站建设｜背景音乐怎么自动播放？

你是不是也想过给自己的网站加点背景音乐？🎵 让访客一打开就听到舒缓的曲子，感觉立马高大上！但很多朋友折腾半天，音乐不是不响，就是需要手动点播放，体验直接打折…… 其实伴音网站建设里头，​​自动播放背景音乐​​算是个小痛点，不过解决好它，网站氛围感能翻倍！小编今天就跟大家唠唠这事儿，希望能帮到你～

为啥自动播放老失效？

你可能也遇到过：明明代码里写了“autoplay”，但浏览器就是不给面子！这主要是因为现在很多浏览器（比如Chrome）为了用户体验，禁止了音视频自动播放——怕突然出声吓到人嘛。但话说回来，​​移动端限制更严格​​，有时候甚至需要用户先跟页面交互一下才能播。

不过别灰心，小编经常用的一个办法是：​​把音乐设置成循环播放，并且默认静音​​，等用户点了某个按钮再打开声音——这样既能自动播，又不会惹人烦😅。具体代码嘛，后面会细说！

三步搞定自动播放（附代码）

1. 1.

   ​​选对音乐格式​​

   首先你得挑个兼容性好的音乐文件！常见格式像MP3、OGG都不错，但最好准备两种格式备用，因为不同浏览器支持的不一样。比如：

   • •

     MP3：几乎全网支持

   • •

     OGG：部分浏览器更适配

     小编建议​​两个都上传​​，这样保险点儿～

2. 2.

   ​​代码里加个“静音”属性​​

   直接上干货！下面这段代码可以试试，重点是把muted属性加上：

   html下载复制预览
   <audio controls autoplay loop muted>  
     <source src="music.mp3" type="audio/mpeg">  
     <source src="music.ogg" type="audio/ogg">  
     你的浏览器不支持音频哦！  
   audio>

解释一下：autoplay是自动播，loop是循环，muted是默认静音——这样浏览器限制会少很多，然后再让用户自己点开声音。

javascript下载复制运行
document.getElementById('music-btn').addEventListener('click', function() {  
  document.querySelector('audio').muted = false;  
});

注意！这些坑别踩

• •

  ​​版权问题​​：音乐别随便用网上的！最好找免版权的素材站，或者自己买授权，不然被投诉可就麻烦啦。

• •

  ​​移动端测试​​：手机上一定要多试几次，安卓和iOS表现可能不一样——小编就遇到过iOS上能自动播，安卓上不行的情况😅。

• •

  ​​音量控制​​：默认音量别太大，否则用户一解锁直接被吓跑…… 建议设到50%以下。

小编心得

自动播放背景音乐虽然只是伴音网站建设的一小块，但想做好还真得抠细节！​​核心思路就是：绕开浏览器限制，同时尊重用户体验​​。小编个人觉得啊，与其追求全自动，不如加点交互设计——让用户自己决定要不要听音乐，这样反而更贴心～

最后唠叨一句：测试的时候多用不同设备试试，尤其是手机！毕竟现在移动流量占比太高了，移动端不搞好，前面都白搭…… 希望能帮到你！🚀