Audio ended 属性

在 web 开发中，音频播放是一个常见的需求，而控制音频播放的过程是非常重要的。在这篇文章中，我们将重点讨论 HTML5 中的音频元素的 ended 属性。

什么是 ended 属性？

在 HTML5 中，音频元素有一个名为 ended 的属性，用来表示音频是否已经播放完毕。当音频播放完毕时，ended 属性的值将变为 true，我们可以利用这个属性来执行一些相应的操作。

如何使用 ended 属性？

要使用 ended 属性，我们首先需要创建一个音频元素，并为其添加一个事件监听器来检测 ended 属性的变化。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio ended Property Example</title>
</head>
<body>
    <audio controls id="myAudio">
        <source src="sample.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>

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

        audio.addEventListener('ended', () => {
            console.log('Audio has ended');
        });
    </script>
</body>
</html>

在上面的示例中，我们创建了一个带有音频控件的音频元素，并为其添加了一个 id 为 myAudio 的标识符。然后，我们使用 JavaScript 获取这个音频元素，并为其添加了一个 ended 事件监听器。当音频播放结束时，控制台将输出 "Audio has ended"。

实际应用场景

ended 属性在实际开发中有很多应用场景，比如自动播放下一首歌曲、展示播放完成提示等。下面是一个展示播放完成提示的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio ended Property Example</title>
</head>
<body>
    <audio controls id="myAudio">
        <source src="sample.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>

    <p id="message"></p>

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

        audio.addEventListener('ended', () => {
            message.innerText = 'Audio has ended';
        });
    </script>
</body>
</html>

在这个示例中，当音频播放结束时，页面上会显示 "Audio has ended" 的提示信息。

总结

通过使用 ended 属性，我们可以轻松地检测音频是否已经播放完毕，并在相应的时机执行相应的操作。这个属性在音频播放控制中是非常有用的，希望本文对你有所帮助！