正文

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

/0 浏览量
1010

在网页上，使用jQuery来获取和显示音频播放的进度及位置是一个常见的需求。这可以帮助用户更直观地了解音频的播放状态。以下是一个详细的步骤，包括HTML、CSS和jQuery代码，来展示如何实现这一功能。

准备工作

首先，你需要一个HTML元素来嵌入音频文件，以及一个用于显示播放进度的元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频播放进度显示</title>
<style>
    #progress-container {
        width: 100%;
        background-color: #ddd;
    }
    #progress-bar {
        width: 0%;
        height: 30px;
        background-color: #4CAF50;
    }
</style>
</head>
<body>

<audio id="audioPlayer" controls>
    <source src="your-audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<div id="progress-container">
    <div id="progress-bar"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // 初始化进度条
    var $progressBar = $('#progress-bar');
    var $progressContainer = $('#progress-container');

    // 设置音频播放事件监听
    $('#audioPlayer').on('timeupdate', function() {
        var currentTime = this.currentTime;
        var duration = this.duration;
        var percentage = (currentTime / duration) * 100;

        // 更新进度条
        $progressBar.width(percentage + '%');
    });

    // 设置音频播放结束事件监听
    $('#audioPlayer').on('ended', function() {
        $progressBar.width('100%');
    });

    // 设置进度条点击事件，以设置音频的播放位置
    $progressContainer.on('click', function(e) {
        var percentage = (e.pageX - $progressContainer.offset().left) / $progressContainer.width();
        var timeToSeek = percentage * this.duration;
        $(this).prev('audio').get(0).currentTime = timeToSeek;
    });
});
</script>

</body>
</html>

代码解析

  1. HTML：这里定义了一个<audio>元素，用于播放音频，并设置了一个<div>元素作为进度条的容器。

  2. CSS：简单的样式设置，定义了进度条的背景颜色和宽度。

  3. jQuery：

    • 监听timeupdate事件来更新进度条。currentTime和duration属性分别代表音频的当前播放时间和总时长，通过计算这两个值的比例，我们可以得到音频的播放进度。
    • 当音频播放结束时，进度条会显示为100%。
    • 监听进度条容器的点击事件，允许用户通过点击进度条来跳转到音频的任何位置。

通过以上步骤，你可以使用jQuery在网页上准确获取和显示音频播放的进度及位置。这种方法不仅直观，而且易于实现。

-- 展开阅读全文 --