给个人主页加段背景音乐，搜出来一堆播放器代码，复制进去少个引号，整页白屏。其实浏览器自带播放能力，不需要第三方库。

核心就一个标签，给它一个音频地址，加上控制条属性，页面上立刻出现播放按钮。

最小可用的一段

<audio src=music.mp3 controls></audio>

三行以内就能跑。属性值不带引号也行，只要里面没有空格；有空格就必须加引号，否则会被截断。

自动播放基本没戏

现在的浏览器都限制有声自动播放。用户没点过页面就响，会被直接拦下，控制台留一条警告，页面上什么也不发生。

想绕过去只能先静音，静音播放再等用户点一下恢复声音。体验比不播更怪，不建议。正确做法是放一个明显的播放按钮，让用户自己按。

格式和路径的坑

  • MP3 兼容性最好，换别的格式部分浏览器不认；
  • 路径区分大小写，服务器是 Linux 时尤其注意；
  • 文件太大别放首页，几兆的音频拖慢首屏，用户等不到；
  • 直接引用别人站点的音频，可能被拦或者被替换。

第三条容易被低估。一首四分钟的歌在普通压缩下也有三四兆，手机流量环境下打开就是几秒白屏。

加载时机可以控制。加一个预加载属性，默认只读取时长这类元信息，等用户点了播放才开始下载正片；设成全量预加载，页面一打开就往死里拉。移动网络环境下别用后者，上传到服务器的文件也别只留一个原始版本，转成合适码率能省不少流量。

想要好看一点

默认控制条各浏览器长得不一样。想统一，就把控制条属性去掉，自己做按钮，用脚本调播放和暂停，再监听进度更新滑块。工作量大一些，样式能完全控住。

动手前先问自己值不值。一套自绘播放器，代码量不小，还要处理加载失败、拖动进度、切歌和键盘操作。博客这种页面，默认控制条其实够用。

移动端还有一层

锁屏后的播放控制、耳机按键响应，需要额外的媒体会话接口，纯标签做不到。想做好得写一段脚本，把标题、封面、播放状态报到系统层。

我的建议

作品集、博客这类页面，一个简洁控制条足够，别做唱片旋转动画。背景音乐本身还容易劝退访客，办公室里突然外放很尴尬。真要用，默认不播，把开关放在显眼位置。