正文

如何用jQuery轻松判断音频播放状态：播放、暂停还是停止？

/0 浏览量
0902

在网页中嵌入音频元素并实时判断其播放状态是一个常见的需求。jQuery 提供了一种简单而高效的方法来实现这一功能。下面，我将详细讲解如何使用 jQuery 来判断音频的播放状态，包括播放、暂停和停止。

准备工作

首先，确保你的网页中已经包含了 jQuery 库。如果没有，可以从 jQuery 官网下载最新版本的 jQuery 库并添加到你的 HTML 中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

接下来，添加一个音频元素到你的 HTML 中：

<audio id="myAudio" src="your-audio-file.mp3"></audio>

判断播放状态

为了判断音频的播放状态，我们可以使用 jQuery 选择器来选中音频元素，并使用 JavaScript 中的 paused 属性。paused 属性返回一个布尔值，如果音频元素当前是暂停状态，则为 true，否则为 false。

播放状态

当音频正在播放时，paused 属性的值为 false。我们可以通过以下方式来判断：

if ($('#myAudio').prop('paused') === false) {
    console.log('音频正在播放');
} else {
    console.log('音频未播放');
}

暂停状态

当音频被暂停时，paused 属性的值为 true。我们可以通过以下方式来判断：

if ($('#myAudio').prop('paused') === true) {
    console.log('音频已暂停');
} else {
    console.log('音频未暂停');
}

停止状态

当音频被停止时，我们可以通过监听 ended 事件来判断。ended 事件在音频播放结束时触发。以下是判断音频是否停止的代码：

$('#myAudio').on('ended', function() {
    if ($('#myAudio').prop('paused') === true) {
        console.log('音频已停止');
    } else {
        console.log('音频未停止');
    }
});

完整示例

以下是完整的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>音频播放状态判断</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <audio id="myAudio" src="your-audio-file.mp3"></audio>
    <script>
        // 判断播放状态
        if ($('#myAudio').prop('paused') === false) {
            console.log('音频正在播放');
        } else {
            console.log('音频未播放');
        }

        // 判断暂停状态
        if ($('#myAudio').prop('paused') === true) {
            console.log('音频已暂停');
        } else {
            console.log('音频未暂停');
        }

        // 判断停止状态
        $('#myAudio').on('ended', function() {
            if ($('#myAudio').prop('paused') === true) {
                console.log('音频已停止');
            } else {
                console.log('音频未停止');
            }
        });
    </script>
</body>
</html>

通过上述代码，你可以轻松地判断音频的播放状态，包括播放、暂停和停止。希望这个教程能帮助你解决实际问题。

-- 展开阅读全文 --