在博客中嵌入音频

在文章里插入一段音频,用 HTML5 的 audio 标签,零依赖。

在博客中嵌入音频

想要在文章里放一段播客或者音乐,最简单的方式就是 HTML5 的 audio 标签。它不需要任何第三方库,现代浏览器原生支持。

编辑器工具栏里的“音频”按钮会插入如下代码:

<audio controls preload="none" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
  你的浏览器不支持 audio 标签。
</audio>

实际效果(示例音乐来自 SoundHelix 免费测试音源):

几个小建议:preload="none" 可以避免页面加载时自动下载音频;给自己的音频加一个封面和说明,阅读体验会更好。