HTML5基础教程（十）Audio(音频)：别只会＜audio＞标签！HTML5音频的魔法手册

最新推荐文章于 2025-10-16 10:47:31 发布

原创

最新推荐文章于 2025-10-16 10:47:31 发布 · 589 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #音视频 #前端

你以为HTML5音频就是插个标签？Too young！这本魔法手册将带你解锁音频处理的隐藏技能，从基础播放到高级可视化，让你的网页不仅能听，还能摇摆！

一、HTML5 Audio基础：不只是个标签

还记得Flash那个古老的时代吗？那时候要在网页上播放音频，得依赖各种插件，体验那叫一个酸爽。HTML5的到来彻底改变了这一切，<audio>标签的出现让原生音频播放成为可能。

1.1 基本用法：入门如此简单

最基本的音频播放只需要一行代码：

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

加上controls属性，浏览器就会提供默认的播放控件。但等等，这UI也太丑了吧？每个浏览器的样式还不一样！别急，这正是我们大展身手的地方。

1.2 多格式兼容：覆盖所有浏览器

不同的浏览器支持不同的音频格式，为了确保所有用户都能听到声音，我们需要提供多种格式：

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.wav" type="audio/wav">
  您的浏览器不支持HTML5音频功能
</audio>

浏览器会按照顺序选择第一个支持的格式进行播放。现在主流的做法是提供MP3和OGG两种格式，基本上可以覆盖所有现代浏览器。

1.3 常用属性：掌控音频行为

<audio>标签提供了多个属性来控制音频行为：

<audio controls autoplay loop muted preload="auto">
  <source src="music.mp3" type="audio/mpeg">
</audio>

controls: 显示控制界面
autoplay: 自动播放（注意：许多浏览器已限制此功能）
loop: 循环播放
muted: 静音
preload: 预加载行为（auto|metadata|none）

但实际项目中，我们往往需要更精细的控制和更美观的界面，这就需要用JavaScript来操作Audio API了。

二、JavaScript控制：打造专属音频体验

HTML5 Audio真正的强大之处在于其完整的JavaScript API，让我们可以完全自定义音频体验。

2.1 基本播放控制

首先，我们不需要浏览器提供的默认控件，而是创建自己的控制界面：

<audio id="myAudio">
  <source src="music.mp3" type="audio/mpeg">
</audio>

<div class="custom-controls">
  <button onclick="playAudio()">播放</button>
  <button onclick="pauseAudio()">暂停</button>
  <button onclick="stopAudio()">停止</button>
  <input type="range" id="volume" min="0" max="1" step="0.1" value="1" onchange="setVolume(this.value)">
</div>

<script>
const audio = document.getElementById('myAudio');

function playAudio() {
  audio.play();
}

function pauseAudio() {
  audio.pause();
}

function stopAudio() {
  audio.pause();
  audio.currentTime = 0;
}

function setVolume(volume) {
  audio.vo