控制音频 JavaScript

在 Web 开发中，音频播放功能是一个非常有用的工具。JavaScript 为我们提供了许多 API 来控制音频的播放，暂停，停止等功能。本文将介绍控制音频播放的相关 API 和使用方式。

HTML5 Audio 元素

HTML5 引入了 <audio> 元素，用于播放音频。使用 <audio> 元素可以很方便地控制音频的播放， 如下：

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

以上代码与视频元素非常类似，src 属性指向了音频文件，而 controls 属性在页面中展现了音频的控制器。

JavaScript API 部分

HTML5 <audio> 元素提供了一些默认的方法来控制音频的播放和暂停等操作，如：

• play()：播放音频
• pause()：暂停音频
• stop()：停止音频
• currentTime：音频当前播放的时间
• duration：音频的总时间

JavaScript 还提供了其他一些相关的 API，用于查找，修改和调整音频的其他属性。下面是一些常用的 API。

currentTime

currentTime 属性用于设置或读取当前音频播放的时间。默认值为 0。

// 暂停音频 5 秒
audio.currentTime = audio.currentTime + 5;

paused

paused 属性用于判断音频是否正在播放或暂停。可用于判断音频是否在播放状态。

if (audio.paused) {
  audio.play();
} else {
  audio.pause();
}

loop

loop 属性用于控制音频是否循环播放。

audio.loop = true;

volume

volume 属性用于控制音频的音量大小，其值介于 0 和 1 之间。

audio.volume = 0.5;

preload

preload 属性用于指定何时加载音频。其可选值为 none，metadata 和 auto。

audio.preload = 'auto';

事件

JavaScript 还提供了一些事件用于监听音频的播放情况，常用的事件有 play，pause，timeupdate 等。

audio.addEventListener('play', function() {
  console.log('音频开始播放');
});

audio.addEventListener('pause', function() {
  console.log('音频暂停');
});

audio.addEventListener('timeupdate', function() {
  console.log('音频播放时间', audio.currentTime);
});

结语

本文介绍了 HTML5 <audio> 元素和 JavaScript API 进行控制音频的方法。以上仅仅涵盖了控制音频的基础知识，开发者还可以结合上述 API 实现更为强大和个性化的音频控制。