正文

音频播放进度追踪：用jQuery轻松获取并显示你的音乐播放详情

/0 浏览量
0909

在网页上嵌入音乐播放器并追踪其播放进度是一个常见的需求。使用jQuery，你可以轻松地获取音乐播放器的当前进度，并将其显示在网页上。下面，我将详细讲解如何使用jQuery来实现这一功能。

1. 准备工作

首先，确保你的网页中已经包含了jQuery库。你可以通过CDN链接来引入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="progressBarContainer">
  <div id="progressBar"></div>
</div>
<div id="currentPosition">0:00</div>
<div id="duration">0:00</div>

在这个例子中，<audio>元素包含了音乐文件，<div>元素用于显示播放进度条和当前播放时间。

2. 获取播放进度

为了追踪音频的播放进度，我们需要监听几个事件：play、pause、timeupdate和ended。

下面是一个监听这些事件的jQuery代码：

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

  // 设置音频的总时长
  duration.text(formatTime(audio.duration));

  // 当音频播放时更新进度条
  audio.addEventListener('play', function() {
    setInterval(function() {
      var currentTime = audio.currentTime;
      var durationTime = audio.duration;

      // 更新进度条
      progressBar.width((currentTime / durationTime) * 100 + '%');

      // 更新当前播放时间
      currentPosition.text(formatTime(currentTime));
    }, 100);
  });

  // 当音频暂停时停止更新进度条
  audio.addEventListener('pause', function() {
    clearInterval(updateInterval);
  });

  // 当音频结束时重置进度条和时间
  audio.addEventListener('ended', function() {
    progressBar.width('0%');
    currentPosition.text('0:00');
  });

  // 格式化时间显示
  function formatTime(time) {
    var minutes = Math.floor(time / 60);
    var seconds = Math.floor(time - minutes * 60);
    return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
  }
});

这段代码首先获取音频元素和进度条元素，然后为音频元素添加事件监听器。当音频开始播放时，我们设置一个定时器，每隔100毫秒更新进度条和当前播放时间。当音频暂停或结束时，我们清除定时器并重置进度条和时间。

3. 完整示例

以下是完整的HTML和JavaScript代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音频播放进度追踪</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
  #progressBarContainer {
    width: 100%;
    background-color: #ddd;
  }
  #progressBar {
    width: 0%;
    height: 20px;
    background-color: #4CAF50;
  }
</style>
</head>
<body>
<audio id="myAudio" controls>
  <source src="your-audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<div id="progressBarContainer">
  <div id="progressBar"></div>
</div>
<div id="currentPosition">0:00</div>
<div id="duration">0:00</div>

<script>
$(document).ready(function() {
  var audio = $('#myAudio')[0];
  var progressBar = $('#progressBar');
  var currentPosition = $('#currentPosition');
  var duration = $('#duration');

  // 设置音频的总时长
  duration.text(formatTime(audio.duration));

  // 当音频播放时更新进度条
  audio.addEventListener('play', function() {
    setInterval(function() {
      var currentTime = audio.currentTime;
      var durationTime = audio.duration;

      // 更新进度条
      progressBar.width((currentTime / durationTime) * 100 + '%');

      // 更新当前播放时间
      currentPosition.text(formatTime(currentTime));
    }, 100);
  });

  // 当音频暂停时停止更新进度条
  audio.addEventListener('pause', function() {
    clearInterval(updateInterval);
  });

  // 当音频结束时重置进度条和时间
  audio.addEventListener('ended', function() {
    progressBar.width('0%');
    currentPosition.text('0:00');
  });

  // 格式化时间显示
  function formatTime(time) {
    var minutes = Math.floor(time / 60);
    var seconds = Math.floor(time - minutes * 60);
    return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
  }
});
</script>
</body>
</html>

在这个示例中，我们创建了一个简单的音乐播放器，包括一个进度条和显示当前播放时间的文本。使用jQuery，我们能够实时更新进度条和播放时间，从而为用户提供一个直观的音乐播放体验。

-- 展开阅读全文 --