正文

如何用jQuery准确获取并显示音频播放进度及位置？

/0 浏览量
0925

在网页上，使用jQuery来控制音频播放并显示其进度及位置是一个常见的需求。以下是一个详细的指南，展示了如何使用jQuery来实现这一功能。

准备工作

首先，确保你的HTML页面中包含了一个音频元素。以下是一个简单的音频元素示例：

<audio id="myAudio" src="your-audio-file.mp3"></audio>
<div id="progressBarContainer">
    <div id="progressBar"></div>
</div>
<div id="currentPosition">0:00</div>

获取音频元素

在jQuery中，你可以使用$('#id')或$('.class')来选取元素。在这个例子中，我们将使用$('#myAudio')来获取音频元素。

监听音频播放事件

为了跟踪音频的播放进度，我们需要监听音频的timeupdate事件。这个事件会在音频播放时周期性地触发。

var audio = $('#myAudio')[0];

audio.addEventListener('timeupdate', function() {
    updateProgressBar();
    updateCurrentPosition();
});

更新进度条

进度条可以通过计算音频当前播放时间与总时长的比例来更新。以下是一个更新进度条的函数：

function updateProgressBar() {
    var progress = (audio.currentTime / audio.duration) * 100;
    $('#progressBar').css('width', progress + '%');
}

更新当前播放位置

当前播放位置可以通过格式化音频的当前时间来更新。以下是一个更新当前播放位置的函数：

function updateCurrentPosition() {
    var minutes = Math.floor(audio.currentTime / 60);
    var seconds = Math.floor(audio.currentTime - minutes * 60);
    seconds = seconds < 10 ? '0' + seconds : seconds;
    $('#currentPosition').text(minutes + ':' + seconds);
}

初始化进度条和当前播放位置

在页面加载时，你可能还想初始化进度条和当前播放位置：

$(document).ready(function() {
    updateProgressBar();
    updateCurrentPosition();
});

完整代码示例

以下是整合上述所有部分的完整代码示例：

<audio id="myAudio" src="your-audio-file.mp3"></audio>
<div id="progressBarContainer">
    <div id="progressBar"></div>
</div>
<div id="currentPosition">0:00</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    var audio = $('#myAudio')[0];

    audio.addEventListener('timeupdate', function() {
        updateProgressBar();
        updateCurrentPosition();
    });

    function updateProgressBar() {
        var progress = (audio.currentTime / audio.duration) * 100;
        $('#progressBar').css('width', progress + '%');
    }

    function updateCurrentPosition() {
        var minutes = Math.floor(audio.currentTime / 60);
        var seconds = Math.floor(audio.currentTime - minutes * 60);
        seconds = seconds < 10 ? '0' + seconds : seconds;
        $('#currentPosition').text(minutes + ':' + seconds);
    }

    $(document).ready(function() {
        updateProgressBar();
        updateCurrentPosition();
    });
</script>

通过以上步骤，你就可以使用jQuery来准确获取并显示音频播放进度及位置了。希望这个指南对你有所帮助！

-- 展开阅读全文 --