花式炫技教程：打造专属音频进度条，让你的音乐播放器耳目一新

前端

2023-12-23 21:19:38

走进音频进度条的缤纷世界：打造你的专属播放器

在数字音乐时代，音频进度条已成为音乐播放器的必备元素。它不仅提供了歌曲进度信息，更能为用户界面增添趣味和风格。

音乐播放器的底层架构

要构建音频进度条，首先需要了解音乐播放器的底层架构。通常，一个音乐播放器包含以下组件：

播放控制按钮（播放/暂停、下一首/上一首、音量调节）
音频播放器进度条（显示当前播放位置和总播放时长）
歌曲信息展示（歌曲名称、歌手、专辑）
歌词显示（可选）
播放列表（可选）

从零开始构建音频播放器进度条

2.1 搭建进度条框架

使用 HTML 和 CSS 创建一个基本进度条结构：

<div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>

.progress-bar-container {
  width: 100%;
  height: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #007bff;
  border-radius: 5px;
  transition: width 0.3s ease-in-out;
}

2.2 实现进度条动态变化

使用 JavaScript 监听音乐播放时间的变化，动态更新进度条宽度：

const progressBar = document.querySelector('.progress-bar');

audioElement.addEventListener('timeupdate', function() {
  const currentTime = this.currentTime;
  const duration = this.duration;
  const progress = currentTime / duration * 100;

  progressBar.style.width = `${progress}%`;
});

2.3 添加进度条交互性

允许用户点击和拖拽修改进度：

progressBar.addEventListener('click', function(event) {
  const progress = event.offsetX / this.offsetWidth;

  audioElement.currentTime = progress * audioElement.duration;
});

let isDragging = false;
progressBar.addEventListener('mousedown', function() {
  isDragging = true;
});

document.addEventListener('mousemove', function(event) {
  if (isDragging) {
    const progress = event.clientX / progressBar.offsetLeft;

    audioElement.currentTime = progress * audioElement.duration;
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});