audio元素与audio对象相关方法和配置项

<audio> 元素属性：

src: 指定音频文件的来源。

controls: 显示音频播放器的默认控件，如播放、暂停、音量调节等。

autoplay: 自动播放音频文件，一旦页面加载完毕，音频就会开始播放。

loop: 音频播放完毕后自动重新播放。

muted: 默认静音播放音频。

preload: 设置音频在页面加载时的行为。取值包括：

• "auto"：浏览器会尽可能地加载整个音频。
• "metadata"：仅加载音频的元数据（比如时长）。
• "none"：不预加载音频。

 

JavaScript 方法：

 const audio = new Audio('./test.wva');

play(): 开始播放音频。如果音频已经在播放，这个方法不会影响当前播放状态。

pause(): 暂停播放音频。如果音频已经暂停，则不做任何操作。

load(): 重新加载音频文件。可以用于更改音频的 src 后重新加载。

currentTime: 获取或设置音频播放的当前时间，以秒为单位。

audio.currentTime = 30;  // 将音频跳到30秒的位置

 duration: 获取音频的总时长（以秒为单位）。如果音频还没有加载完成，duration 返回 NaN。

const totalDuration = audio.duration;

volume: 获取或设置音量。值为 0 到 1 之间的浮点数，0 表示静音，1 表示最大音量。

audio.volume = 0.5;  // 将音量设置为50%

muted: 获取或设置音频是否静音。

ended: 返回一个布尔值，表示音频是否已经播放完毕。 

 

事件监听

onplay: 当音频开始播放时触发。

audio.onplay = () => {
    console.log("音频开始播放");
};

onpause: 当音频暂停时触发。

onended: 当音频播放完毕时触发。

ontimeupdate: 在音频播放过程中，当前播放位置改变时触发。

 

使用案例

假设你想在网页中播放一个音频，并在音频播放结束后弹出一个消息：

<audio id="myAudio" src="audio.mp3" controls></audio>
<script>
    const audio = document.getElementById('myAudio');
    
    audio.onended = () => {
        alert("音频播放完毕");
    };

    audio.play(); // 开始播放
</script>