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

概述

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

1. 开始
2. HTML结构
3. CSS样式
4. JS功能
5. 示例说明
6. 结束

开始

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

1. Notepad++
2. Visual Studio Code
3. Atom
4. 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实现播放器的主要功能。具体来说，我们至少需要实现如下几个功能：

1. 播放/暂停歌曲
2. 显示歌曲时间/总时间
3. 改变播放进度
4. 改变音量
5. 静音/取消静音

完整的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);

示例说明

以上代码实现了一个简单的音乐播放器，您可以在自己的网站或浏览器中使用它播放MP3格式的音乐文件。在使用过程中，您可以试着进行以下两种修改，来感受代码的实际效果：

1. 将"music.mp3"替换为您自己的音乐文件路径，在index.html中更新。
2. 修改CSS样式，将音乐播放器的UI界面进行自定义。

结束

至此，我们已经完成了“原生JS实现小小的音乐播放器”的攻略。希望这篇文章对您有所帮助并且对您的JS学习有所帮助。如果您有任何问题或者建议，请在下方评论区留言。

本文链接：http://task.lmcjl.com/news/8467.html