uniapp音频进度条如何做

第一段：需求分析

在一个音频播放器应用中，进度条是一个必不可缺的组件。进度条可以显示用户当前正在播放的音频的播放进度，并且它可以被用户拖动来提示应用应该跳转到特定的播放进度。在这个需求中，我们需要快速实现一个音频进度条。

第二段：实现思路

实现音频进度条的第一个步骤就是通过Web Audio API来获取音频的当前时间和总时长。只需要在音频的“timeupdate”事件上绑定一个回调函数就可以得到音频的当前播放时间。

audio.addEventListener("timeupdate", function() {
  var currentTime = audio.currentTime;
  var duration = audio.duration;  
  var progress = Math.floor(currentTime) / Math.floor(duration);
  // 进度条控制代码...
});

接下来，我们需要在用户拖动进度条时更新音频的播放时间。为了实现这个功能，我们需要将进度条变成一个可交互的组件。我们需要在进度条上监听“mousedown”事件来捕获用户鼠标的点击，然后在“mousemove”事件中更新进度条的位置。最后，在“mouseup”事件上，我们需要把当前进度条的位置转化为具体的音频播放时间。

var progressContainer = document.getElementById("progress-container");

progressContainer.addEventListener("mousedown", function(e) {
  var clickPosition = e.pageX;
  var position = progressContainer.getBoundingClientRect();
  var positionLeft = position.left;
  var offset = clickPosition - positionLeft;

  progressContainer.addEventListener("mousemove", moveProgress);

  function moveProgress(e) {
    var updatedClickPosition = e.pageX;
    var updatedPositionLeft = position.left;
    var progressWidth = updatedClickPosition - updatedPositionLeft;
    if (progressWidth >= 0 && progressWidth <= position.width) {
      progressBar.style.width = progressWidth + "px";
    }
  }

  progressContainer.addEventListener("mouseup", function(e) {
    var updatedClickPosition = e.pageX;
    var updatedPositionLeft = position.left;
    var progressWidth = updatedClickPosition - updatedPositionLeft;
    var progressPercentage = progressWidth / position.width;
    var audioTime = audio.duration * progressPercentage;
    audio.currentTime = audioTime;
    progressContainer.removeEventListener("mousemove", moveProgress);
  });
});

第三段：代码实现

现在，我们可以将上述节选的代码整合起来，形成一个带有进度条功能的音频播放器。

  
  

    

  


/* CSS 样式 */
#progress-container {
  height: 10px;
  width: 100%;
  background: #ccc;
  margin-top: 10px;
  position: relative;
  cursor: pointer;
}
#progress-bar {
  height: 100%;
  width: 0;
  background: #0066CC;
  position: absolute;
  top: 0;
  left: 0;
}

// JavaScript 代码
var audio = document.getElementById("audio");
var progressContainer = document.getElementById("progress-container");
var progressBar = document.getElementById("progress-bar");

audio.addEventListener("timeupdate", function() {
  var currentTime = audio.currentTime;
  var duration = audio.duration;  
  var progress = Math.floor(currentTime) / Math.floor(duration);
  progressBar.style.width = progressContainer.offsetWidth * progress + "px";
});

progressContainer.addEventListener("mousedown", function(e) {
  var clickPosition = e.pageX;
  var position = progressContainer.getBoundingClientRect();
  var positionLeft = position.left;
  var offset = clickPosition - positionLeft;
  progressBar.style.width = offset + "px";

  progressContainer.addEventListener("mousemove", moveProgress);

  function moveProgress(e) {
    var updatedClickPosition = e.pageX;
    var updatedPositionLeft = position.left;
    var progressWidth = updatedClickPosition - updatedPositionLeft;
    if (progressWidth >= 0 && progressWidth <= position.width) {
      progressBar.style.width = progressWidth + "px";
    }
  }

  progressContainer.addEventListener("mouseup", function(e) {
    var updatedClickPosition = e.pageX;
    var updatedPositionLeft = position.left;
    var progressWidth = updatedClickPosition - updatedPositionLeft;
    var progressPercentage = progressWidth / position.width;
    var audioTime = audio.duration * progressPercentage;
    audio.currentTime = audioTime;
    progressContainer.removeEventListener("mousemove", moveProgress);
  });
});

第四段：总结

至此，我们已经成功地实现了一个音频进度条。我们首先通过Web Audio API获取了音频的总时长和播放时间；然后，我们将组件变为可交互的，通过鼠标事件来控制进度条的位置，并在相应的事件处理器中更新音频的播放时间。