正文

音频播放进度查询：用jQuery轻松获取音乐播放中的每一秒

/0 浏览量
0924

在网页上实现音频播放进度查询是一个常见的需求，尤其是在音乐播放器的设计中。jQuery作为一个轻量级的JavaScript库，可以极大地简化这一过程。以下是如何使用jQuery来获取音乐播放中的每一秒的详细步骤。

准备工作

首先，确保你的网页中已经包含了jQuery库。如果没有，你可以从jQuery官网下载并引入。

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

HTML结构

接下来，我们需要一个音频元素和一个用于显示当前播放进度的元素。

<audio id="myAudio" controls>
  <source src="your-audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<div id="progressBar">0:00</div>

CSS样式

为了更好地展示进度条，我们可以添加一些简单的CSS样式。

#progressBar {
  width: 100%;
  background-color: #ddd;
}

#progressBar div {
  height: 30px;
  background-color: #4CAF50;
  width: 0%;
  text-align: center;
  line-height: 30px;
  color: white;
}

jQuery脚本

现在，我们来编写jQuery脚本，以获取并显示音频播放的进度。

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

  // 更新进度条的函数
  function updateProgress() {
    var currentTime = audio.currentTime;
    var duration = audio.duration;
    var progress = (currentTime / duration) * 100;

    // 更新进度条的宽度
    progressBar.width(progress + '%');
    progressBar.text(Math.floor(currentTime) + ':' + Math.floor(duration - currentTime));

    // 每秒更新一次
    setTimeout(updateProgress, 1000);
  }

  // 开始播放时启动进度更新
  audio.onplay = function() {
    updateProgress();
  };

  // 暂停或结束播放时停止更新
  audio.onpause = function() {
    clearTimeout(updateProgress);
  };

  audio.ontimeupdate = function() {
    progressBar.width((audio.currentTime / audio.duration) * 100 + '%');
    progressBar.text(Math.floor(audio.currentTime) + ':' + Math.floor(audio.duration - audio.currentTime));
  };
});

解释

  1. HTML结构：定义了一个音频元素和一个用于显示进度的div。

  2. CSS样式：为进度条添加了一些基本的样式。

  3. jQuery脚本：

    • 使用$(document).ready()确保DOM完全加载。
    • 获取音频元素和进度条元素。
    • 定义updateProgress函数来计算当前播放时间和总时长，并更新进度条的宽度。
    • 监听onplay事件，在音频开始播放时调用updateProgress函数。
    • 监听onpause事件，在音频暂停时清除定时器。
    • 监听ontimeupdate事件，实时更新进度条的宽度。

通过上述步骤，你就可以在网页上实现一个简单的音频播放进度查询功能。

-- 展开阅读全文 --