jquery实现歌曲进度条-CFANZ编程社区

jQuery实现歌曲进度条

1. 引言

在传统的音乐播放器中，我们经常会看到一个进度条，用于展示当前播放的歌曲进度。本文将介绍如何使用jQuery实现一个简单的歌曲进度条，并提供相应的代码示例。

2. 实现思路

要实现一个歌曲进度条，我们首先需要获取歌曲的总时长以及当前播放的时间，然后根据这些信息计算出进度条的宽度，并将其展示在页面上。

具体的实现思路如下：

使用<audio>标签来播放歌曲，并在其属性中指定要播放的歌曲文件；
使用jQuery选择器，选中进度条的DOM元素；
监听timeupdate事件，该事件会在歌曲播放时间改变时触发；
在timeupdate事件的回调函数中，获取歌曲的总时长和当前播放的时间，并根据这些信息计算出进度条的宽度；
将计算得到的进度条宽度应用到进度条的DOM元素上。

3. 代码示例

下面是使用jQuery实现歌曲进度条的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>歌曲进度条示例</title>
  <style>
    #progress-bar {
      width: 500px;
      height: 10px;
      background-color: #e0e0e0;
    }
    
    #progress-bar .progress {
      height: 100%;
      background-color: #428bca;
      width: 0;
    }
  </style>
  <script src="
  <script>
    $(document).ready(function() {
      var audio = $("audio")[0];
      var progressBar = $("#progress-bar .progress");
      
      audio.addEventListener("timeupdate", function() {
        var currentTime = audio.currentTime;
        var duration = audio.duration;
        var progress = currentTime / duration * 100;
        
        progressBar.css("width", progress + "%");
      });
    });
  </script>
</head>
<body>
  <audio src="song.mp3" controls></audio>
  
  <div id="progress-bar">
    <div class="progress"></div>
  </div>
</body>
</html>

4. 代码解析

上述代码首先通过<audio>标签来播放歌曲，并添加了一个具有id为progress-bar的进度条元素。进度条元素内部包含一个具有class为progress的子元素，用于表示进度条的进度。

在jQuery的$(document).ready()函数中，首先通过$("audio")[0]选中了第一个<audio>元素，并将其赋值给audio变量。然后通过$("#progress-bar .progress")选中了进度条元素的进度条部分，并将其赋值给progressBar变量。

接着，我们给audio元素绑定了timeupdate事件的回调函数。在这个回调函数中，我们通过audio.currentTime获取当前播放的时间，通过audio.duration获取歌曲的总时长，并计算出进度条的宽度。最后，我们将计算得到的进度条宽度应用到progressBar元素上，通过progressBar.css("width", progress + "%")来实现。