HTML | DOM 音频播放属性

HTML5中新增了 <audio> 标签，实现了原生的音频播放功能。通过 JavaScript DOM，我们可以控制音频的播放、暂停、音量、速度等多种属性。

音频文件的加载

我们可以通过设置 src 属性来加载音频文件：

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

此外也可以通过 JavaScript 来动态加载音频文件：

let myAudio = new Audio();
myAudio.src = "music.mp3";

音频播放属性

下面是一些常用的音频播放属性：

play()

该属性会开始或继续播放当前的音频：

myAudio.play();

pause()

该属性会暂停当前的音频播放：

myAudio.pause();

currentTime

该属性获取或设置当前音频的播放时间，单位为秒：

myAudio.currentTime = 30; // 设置当前播放时间为30秒
console.log(myAudio.currentTime); // 输出当前播放时间

volume

该属性获取或设置当前音频的音量大小，取值范围为 0.0~1.0：

myAudio.volume = 0.5; // 设置音量为50%
console.log(myAudio.volume); // 输出当前音量

playbackRate

该属性获取或设置当前音频的播放速度，1.0表示正常速度：

myAudio.playbackRate = 2.0; // 设置播放速度为2倍速
console.log(myAudio.playbackRate); // 输出当前速度

duration

该属性获取当前音频的总时长，单位为秒：

console.log(myAudio.duration); // 输出音频的总时长

监听音频事件

我们可以通过添加事件监听函数来监听音频相关事件：

play

该事件在音频开始或继续播放时触发：

myAudio.addEventListener("play", function() {
    console.log("music is playing");
});

pause

该事件在音频暂停时触发：

myAudio.addEventListener("pause", function() {
    console.log("music is paused");
});

ended

该事件在音频播放结束时触发：

myAudio.addEventListener("ended", function() {
    console.log("music is ended");
});

总结

通过以上介绍，我们可以实现简单的音频播放功能，并通过监听事件来实现更多交互效果。更多的音频属性和事件请参考官方文档。