运用JS教你轻松制作HTML音乐播放器

1. HTML结构

为了实现一个音乐播放器，我们需要先理解音乐播放器的基本结构。

<div class="player">
  <div class="cover"></div>
  <audio src="music.mp3"></audio>
  <div class="controls">
    <button class="play-pause"></button>
    <button class="stop"></button>
    <input type="range" min="0" max="100" step="1" value="0" class="seek-bar">
  </div>
</div>

• 最外层div标签类名为player，用于确定整个播放器的容器。
• 播放器中心部分为音乐封面和播放器控件构成的div，类名为controls。
• 播放/暂停按钮使用button标签并设置类名为play-pause。
• 停止按钮使用button标签并设置类名为stop。
• 时间进度条使用input标签，设置type为range，并设置类名为seek-bar。

2. CSS样式

通过为每个部分添加CSS样式，我们可以利用CSS使播放器尽可能好看，同时也增加了使用体验。

.player {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  position: relative;
}

.cover {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(cover.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 10;
}

.controls {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.play-pause, .stop {
  width: 50px;
  height: 50px;
  border: none;
  background-color: #eee;
  border-radius: 50%;
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

.play-pause:before {
  content: "\23f5";
}

.stop:before {
  content: "\25A0";
  position: relative;
  top: -2px;
}

.playing .play-pause:before {
  content: "\23f8";
}

.seek-bar {
  width: 80%;
}

• 设置播放器的基本尺寸，边框和位置样式。
• 调整封面的位置和大小，添加背景图片，设置层级关系，使其靠前显示。
• 控件部分的背景颜色设置为半透明黑色，调整位置和大小，使用flex布局排列按钮和进度条。

3. 使用JS添加播放器功能

在HTML和CSS部分构建完成后，我们需要使用JS来完成我们的音乐播放器。

3.1 获取DOM元素

首先，我们需要获取HTML元素，这样我们才能使用它们添加播放器功能。

const playButton = document.querySelector('.play-pause');
const stopButton = document.querySelector('.stop');
const audioTrack = document.querySelector('audio');
const progressBar = document.querySelector('.seek-bar');

• 获取播放/暂停按钮，停止按钮，音轨和进度条DOM元素。

3.2 播放/暂停功能

我们需要一个函数来控制播放/暂停按钮。

function togglePlayPause() {
  if (audioTrack.paused) {
    audioTrack.play();
    playButton.classList.add('playing');
  } else {
    audioTrack.pause();
    playButton.classList.remove('playing');
  }
}

• 检查音乐是否被暂停了
• 如果暂停则播放，按钮添加 playing 类
• 否则暂停，播放按钮删除 playing 类

3.3 停止播放功能

我们需要一个函数来控制停止按钮。

function stopPlayback() {
  audio.stop();
  audio.currentTime = 0;
  playButton.classList.remove('playing');
}

• 将音乐设置为停止状态并设置显式时间为0。

3.4 更新进度条

我们需要一个函数来更新进度条。

function updateProgressBar() {
  const progressPercent = (audioTrack.currentTime / audioTrack.duration) * 100;
  progressBar.value = progressPercent;
}

• 计算音乐当前时间与总时间之间的百分比。

3.5 添加事件监听

接下来，需要添加事件监听来处理播放/暂停和停止按钮的点击事件，以及音轨当前时间的更新事件。

playButton.addEventListener('click', togglePlayPause);
stopButton.addEventListener('click', stopPlayback);
audioTrack.addEventListener('timeupdate', updateProgressBar);

• 监听播放/暂停按钮是否被单击
• 监听停止按钮是否被单击
• 监听音乐状态是否更新

4. 示例说明

下面是使用JS制作的音乐播放器的两个示例说明：

示例1：播放器样式

.player {
  width: 300px;
  height: 300px;
}

.cover {
  width: 100%;
  height: 200px;
  top: 0%;
  left: 0%;
  transform: none;
  background-size: contain;
  background-position: center;
  z-index: 10;
}

.controls {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.play-pause, .stop {
  width: 50px;
  height: 50px;
  border: none;
  background-color: #000;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

.seek-bar {
  width: 80%;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 10px;
  background-color: #dbdbdb;
  outline: none;
  margin: 0px 20px;
}

.seek-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
  cursor: pointer;
}

示例2：播放器功能

const playButton = document.querySelector('.play-pause');
const stopButton = document.querySelector('.stop');
const audioTrack = document.querySelector('audio');
const progressBar = document.querySelector('.seek-bar');

function togglePlayPause() {
  if (audioTrack.paused) {
    audioTrack.play();
    playButton.classList.add('playing');
  } else {
    audioTrack.pause();
    playButton.classList.remove('playing');
  }
}

function stopPlayback() {
  audio.stop();
  audio.currentTime = 0;
  playButton.classList.remove('playing');
}

function updateProgressBar() {
  const progressPercent = (audioTrack.currentTime / audioTrack.duration) * 100;
  progressBar.value = progressPercent;
}

playButton.addEventListener('click', togglePlayPause);
stopButton.addEventListener('click', stopPlayback);
audioTrack.addEventListener('timeupdate', updateProgressBar);

在实现播放器的时候，我们可以根据自己的需求修改CSS样式和JS功能，以获得更好的用户体验。