原生JS实现小小的音乐播放器

概述

小小的音乐播放器是一个使用原生JS实现的简单的Web音乐播放器，由于功能简单，易于理解和操作，因此适合JS初学者学习。本攻略将分为以下几个部分：

开始
HTML结构
CSS样式
JS功能
示例说明
结束

开始

首先，我们需要一个开发环境，可以使用如下几种：

Notepad++
Visual Studio Code
Atom
Sublime Text

在这里，我们以Visual Studio Code为例，进行说明。

HTML结构

接着，我们将使用HTML来定义播放器的界面结构。实现的音乐播放器有如下几个组成部分:

播放/暂停按钮
进度条
声音控制条
歌曲时间/总时间显示框
音量/音量静音按钮
音乐标题

HTML代码如下：

<div class="audio-player">
  <div class="controls">
    <button id="play-pause-button" class="play"></button>
    <div class="progress-bar">
      <div id="progress"></div>
    </div>
    <div class="time-indicator">
      <span id="time">0:00</span> / <span id="duration">0:00</span>
    </div>
    <div class="volume">
      <button id="volume-button" class="unmute"></button>
      <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="1">
    </div>
  </div>
  <div class="song-info">
    <span id="song-title">Song title</span>
  </div>
  <audio id="audio-player">
    <source src="music.mp3" type="audio/mpeg">
  </audio>
</div>

CSS样式

在HTML部分完成后，我们需要为其内部元素定义CSS样式。CSS代码如下：

.audio-player {
  width: 360px;
  background-color: #333;
  color: #fff;
  font-family: Arial, sans-serif;
  padding: 20px;
  border-radius: 10px;
}

.controls {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.progress-bar {
  flex-grow: 1;
  margin: 0 10px;
  height: 5px;
  background-color: #666;
}

.progress-bar #progress {
  height: 100%;
  background-color: #fff;
  width: 0%;
  transition: width 0.1s linear;
}

.time-indicator {
  font-size: 12px;
}

.volume {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.volume input[type="range"] {
  -webkit-appearance: none;
  width: 50px;
  height: 5px;
  background-color: #666;
  margin-left: 10px;
}

.volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #fff;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  cursor: pointer;
}

.song-info {
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
}

#song-title {
  font-weight: bold;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  padding: 0;
}

.play::before {
  content: "►";
  font-size: 18px;
}

.pause::before {
  content: "❚❚";
  font-size: 18px;
}

.unmute::before {
  content: "?";
  font-size: 12px;
}

.mute::before {
  content: "?";
  font-size: 12px;
}

JS功能

HTML和CSS部分完成后，我们需要使用JS实现播放器的主要功能。具体来说，我们至少需要实现如下几个功能：

播放/暂停歌曲
显示歌曲时间/总时间
改变播放进度
改变音量
静音/取消静音

完整的JS代码如下：

const audio = document.getElementById("audio-player");
const playPauseButton = document.getElementById("play-pause-button");
const progress = document.getElementById("progress");
const timeDisplay = document.getElementById("time");
const durationDisplay = document.getElementById("duration");
const volumeButton = document.getElementById("volume-button");
const volumeSlider = document.getElementById("volume-slider");
const songTitle = document.getElementById("song-title");

function playPause() {
  if (audio.paused) {
    audio.play();
    playPauseButton.classList.remove("play");
    playPauseButton.classList.add("pause");
  } else {
    audio.pause();
    playPauseButton.classList.remove("pause");
    playPauseButton.classList.add("play");
  }
}

function updateTime() {
  timeDisplay.innerHTML = formatTime(audio.currentTime);
  progress.style.width = (audio.currentTime / audio.duration) * 100 + "%";
}

function updateDuration() {
  durationDisplay.innerHTML = formatTime(audio.duration);
}

function changeTime(e) {
  const newTime = e.offsetX / progress.clientWidth * audio.duration;
  audio.currentTime = newTime;
}

function changeVolume() {
  audio.volume = volumeSlider.value;
  if (audio.volume === 0) {
    volumeButton.classList.remove("unmute");
    volumeButton.classList.add("mute");
  } else {
    volumeButton.classList.remove("mute");
    volumeButton.classList.add("unmute");
  }
}

function mute() {
  if (audio.volume !== 0) {
    audio.volume = 0;
    volumeButton.classList.remove("unmute");
    volumeButton.classList.add("mute");
  } else {
    audio.volume = volumeSlider.value;
    volumeButton.classList.remove("mute");
    volumeButton.classList.add("unmute");
  }
}

function formatTime(time) {
  const minutes = Math.floor(time / 60);
  const seconds = Math.round(time % 60);
  return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
}

audio.addEventListener("timeupdate", updateTime);
audio.addEventListener("loadedmetadata", updateDuration);
progress.parentElement.addEventListener("click", changeTime);
volumeSlider.addEventListener("input", changeVolume);
volumeButton.addEventListener("click", mute);
playPauseButton.addEventListener("click", playPause);