本文关键词：怎么做网站音乐

干建站这行七年了，见过太多老板跟我抱怨。说请人做了个高大上的官网，结果一打开，那个背景音乐“咚”的一下炸出来，吓客户一跳，立马关页面。这体验，简直是灾难。

其实很多新手朋友问我，怎么做网站音乐才显得高级又不烦人？今天我不讲那些虚头巴脑的理论，就聊聊我踩过的坑和总结出来的土办法。

首先，你得有个觉悟：网站音乐不是必选项，而是加分项。如果你的网站是严肃的企业官网，比如做机械加工的，我建议你别放音乐。客户是来买设备的，不是来听歌的。但如果你是做艺术、设计、或者高端休闲类的，那音乐就是灵魂。

很多小白直接去网上找那种“一键生成网站音乐”的工具，或者随便下个MP3扔上去。大错特错。

第一步，选对音乐风格。

别整那些动次打次的电音，也别用那种哀怨的二胡。音乐得配合你的品牌调性。我记得有个做茶庄的客户，非要放摇滚，结果客户进去三分钟就退出了。后来我给他换了首轻缓的古琴曲，停留时间直接翻了一倍。音乐要淡，要像空气一样存在，而不是像喇叭一样喊叫。

第二步，处理音频文件。

别直接上传原声MP3，文件太大加载慢。用免费的在线工具压缩一下，转成OGG或者MP3格式，控制在2MB以内。如果可能，做成循环播放的无缝音频，这样听起来才自然，没有突兀的重新开始感。

第三步，写代码嵌入。

这是最关键的一步。别用那些花里胡哨的插件，容易冲突。直接上HTML5代码。

在body标签里加上这段：

注意，现在的浏览器为了用户体验，大多禁止自动播放。所以，你得加个属性，或者用JS控制。

更稳妥的做法是，让音乐在用户点击页面任意位置后播放。

代码大概长这样：

document.body.addEventListener('click', function() {

var audio = document.getElementById('bgm');

if(audio.paused) audio.play();

}, {once: true});

这样既满足了自动播放的视觉效果，又尊重了用户的点击行为，浏览器不会拦截。

第四步，加个控制开关。

这是很多人忽略的细节。必须在页面角落放个小图标，比如个喇叭，点击可以静音或播放。有些用户可能正在开会，突然听到声音会非常反感。给他们选择权，这才是专业服务。

第五步，测试兼容性。

做完后，别只在Chrome上看。去手机微信里打开试试，去Safari里试试。有时候安卓和iOS的表现不一样。我有一次给客户做完，iOS上能播，安卓上死活不响，折腾了半天才发现是格式问题。

这里有个小插曲，之前有个同行跟我吹嘘他的网站音乐多炫酷，结果我打开一看，加载了整整5秒，音乐还是断断续续的。这种案例太多了。记住，速度第一，体验第二。

还有，别把音量调太大。网页音频默认音量有时候会很高，记得在代码里加个volume属性，比如volume="0.3"，调低到30%左右，刚刚好。

最后，我想说，怎么做网站音乐，核心不在于技术多复杂，而在于你是否真的站在用户角度思考。音乐是为了烘托氛围，不是为了炫技。

如果你按照我说的这五步走，基本能解决90%的问题。剩下的10%，靠的是你对自己品牌的理解。别盲目跟风，适合你的才是最好的。

建站是个良心活，细节决定成败。哪怕是一个小小的音乐开关，也能看出你的用心程度。希望这篇干货能帮到你，少走弯路。如果有其他问题，欢迎在评论区留言，我看到都会回。毕竟，大家都不容易，能帮一把是一把。