正文

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

/0 浏览量
0903

在网页上，使用jQuery来获取和显示音频播放进度是一个相对直接的过程。以下是实现这一功能的详细步骤和代码示例。

准备工作

首先，你需要确保你的HTML文档中有一个音频元素（<audio>），并且你的页面已经引入了jQuery库。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频播放进度显示</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<audio id="audioPlayer" controls>
  <source src="your-audio-file.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

<div id="progressBarContainer">
  <div id="progressBar" style="width: 0%; height: 20px; background-color: blue;"></div>
</div>

<script src="your-javascript-file.js"></script>

</body>
</html>

确保替换your-audio-file.mp3为你的音频文件路径。

获取和显示播放进度

接下来，你需要在JavaScript文件中编写代码来处理音频播放进度的更新。

$(document).ready(function() {
  var audio = $('#audioPlayer')[0];
  var progressBar = $('#progressBar');

  // 设置音频播放进度的更新频率
  var updateFrequency = 100; // 毫秒
  var intervalId = setInterval(function() {
    var currentTime = audio.currentTime;
    var duration = audio.duration;
    var percentage = (currentTime / duration) * 100;

    // 更新进度条的宽度
    progressBar.css('width', percentage + '%');

    // 如果音频已播放完毕，清除定时器
    if (currentTime >= duration) {
      clearInterval(intervalId);
    }
  }, updateFrequency);
});

这段代码的工作原理如下：

  1. 在文档加载完成后，通过jQuery选择器获取到音频元素和进度条元素。
  2. 设置一个定时器，每隔一定时间（这里设置为100毫秒）检查当前音频的播放时间（currentTime）和总时长（duration）。
  3. 计算音频播放进度百分比，并更新进度条的宽度以反映当前的播放位置。
  4. 如果音频播放完毕，则清除定时器。

通过这种方式，你可以准确地在页面上显示音频播放的进度，并实时更新。当然，你也可以根据需要调整更新频率和其他样式细节。

-- 展开阅读全文 --