JavaScript实现完整音乐播放器功能及常见错误解决-js教程-PHP中文网

JavaScript实现完整音乐播放器功能及常见错误解决

本教程详细介绍了如何使用javascript构建一个功能完善的音乐播放器，涵盖了html结构设计、音频元素管理、播放列表、播放/暂停、切歌、进度条和音量控制等核心功能。同时，针对初学者常遇到的nodelist操作错误进行了分析与纠正，提供了一套健壮且易于理解的实现方案。

引言与常见问题分析

在构建Web音乐播放器时，开发者常会遇到各种挑战，尤其是在处理DOM元素和音频API交互时。一个常见的错误是尝试在一个NodeList（由document.querySelectorAll返回的元素集合）上直接调用只适用于单个HTMLElement的方法，例如classList.contains()。原始问题中出现的Uncaught TypeError: Cannot read properties of undefined (reading 'contains') at HTMLElement正是由于musicPlayer是一个NodeList，而NodeList本身并没有classList属性。正确的方法是遍历NodeList，或者确保你选择的是单个元素（例如使用document.querySelector）。

本教程将提供一个完整的、功能丰富的JavaScript音乐播放器实现方案，不仅解决了上述常见的TypeError问题，还包含了播放/暂停、歌曲切换、进度条控制、音量调节以及动态更新UI等核心功能。

音乐播放器HTML结构设计

一个功能完善的音乐播放器需要清晰的HTML结构来承载其用户界面（UI）元素，包括歌曲信息显示、播放控制按钮、进度条和音量控制。以下是一个推荐的HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易音乐播放器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<style>
  /* 基础样式，可根据需求自行扩展 */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* 默认背景色 */
    transition: background-color 0.5s ease;
  }
  .player {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    width: 350px;
  }
  .details {
    margin-bottom: 20px;
  }
  .now-playing {
    font-size: 0.8em;
    color: #888;
    margin-bottom: 10px;
  }
  .track-art {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 0 auto 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  .track-name {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .track-artist {
    font-size: 1em;
    color: #666;
  }
  .buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
  .buttons div {
    cursor: pointer;
    margin: 0 15px;
    color: #555;
  }
  .buttons div:hover {
    color: #007bff;
  }
  .slider_container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  .slider_container input[type="range"] {
    flex-grow: 1;
    margin: 0 10px;
    -webkit-appearance: none;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
  }
  .slider_container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
  }
  .current-time, .total-duration {
    font-size: 0.9em;
    color: #666;
    width: 40px; /* 确保时间显示宽度一致 */
  }
  .slider_container i {
    color: #666;
  }
</style>
</head>
<body>
<div class="player">
  <div class="details">
    <div class="now-playing">PLAYING x OF y</div>
    <div class="track-art"></div>
    <div class="track-name">Track Name</div>
    <div class="track-artist">Track Artist</div>
  </div>
  <div class="buttons">
    <div class="prev-track" onclick="prevTrack()"><i class="fa fa-step-backward fa-2x"></i></div>
    <div class="playpause-track" onclick="playpauseTrack()"><i class="fa fa-play-circle fa-5x"></i></div>
    <div class="next-track" onclick="nextTrack()"><i class="fa fa-step-forward fa-2x"></i></div>
  </div>
  <div class="slider_container">
    <div class="current-time">00:00</div>
    <input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()">
    <div class="total-duration">00:00</div>
  </div>
  <div class="slider_container">
    <i class="fa fa-volume-down"></i>
    <input type="range" min="1" max="100" value="99" class="volume_slider" onchange="setVolume()">
    <i class="fa fa-volume-up"></i>
  </div>
</div>
<!-- JavaScript 文件应在此处引用 -->
<script src="script.js"></script>
</body>
</html>

登录后复制

在上述HTML中，我们使用了Font Awesome图标库来显示播放器按钮，并通过内联onclick事件将按钮与JavaScript函数绑定。虽然更推荐使用addEventListener进行事件绑定，但在简单的教程示例中，onclick可以直观地展示功能。

立即学习“Java免费学习笔记（深入）”；

JavaScript核心逻辑实现

接下来，我们将逐步构建音乐播放器的JavaScript逻辑。

1. DOM元素获取与全局状态定义

首先，获取所有需要交互的DOM元素，并定义一些全局变量来管理播放器的状态，如当前歌曲索引、播放状态等。

// 获取DOM元素
let now_playing = document.querySelector(".now-playing");
let track_art = document.querySelector(".track-art");
let track_name = document.querySelector(".track-name");
let track_artist = document.querySelector(".track-artist");

let playpause_btn = document.querySelector(".playpause-track");
let next_btn = document.querySelector(".next-track");
let prev_btn = document.querySelector(".prev-track");

let seek_slider = document.querySelector(".seek_slider");
let volume_slider = document.querySelector(".volume_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");

// 全局变量
let track_index = 0; // 当前播放歌曲在列表中的索引
let isPlaying = false; // 播放状态：true为播放中，false为暂停
let updateTimer; // 用于更新进度条和时间的定时器

// 动态创建audio元素，统一管理音频播放
let curr_track = document.createElement('audio');

// 歌曲列表
let track_list = [
  {
    name: "Night Owl",
    artist: "Broke For Free",
    image: "https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
    path: "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/WFMU/Broke_For_Free/Directionless_EP/Broke_For_Free_-_01_-_Night_Owl.mp3"
  },
  {
    name: "Enthusiast",
    artist: "Tours",
    image: "https://images.pexels.com/photos/3100835/pexels-photo-3100835.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
    path: "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Tours/Enthusiast/Tours_-_01_-_Enthusiast.mp3"
  },
  {
    name: "Shipping Lanes",
    artist: "Chad Crouch",
    image: "https://images.pexels.com/photos/1717969/pexels-photo-1717969.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250",
    path: "https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Chad_Crouch/Arps/Chad_Crouch_-_Shipping_Lanes.mp3",
  },
];

登录后复制

关键点：

百度虚拟主播

百度智能云平台的一站式、灵活化的虚拟主播直播解决方案

查看详情

我们使用document.querySelector来获取单个DOM元素，避免了NodeList的问题。
curr_track = document.createElement('audio')动态创建了一个audio元素，这使得我们可以更灵活地控制音频播放，而不是依赖HTML中预定义的<audio>标签。
track_list是一个包含歌曲详细信息的数组，方便管理多个歌曲。

2. 辅助函数：重置UI与随机背景色

在加载新歌曲或初始化时，需要重置UI显示。同时，为了增加趣味性，我们添加一个随机背景色功能。

// 重置播放器UI显示
function resetValues() {
  curr_time.textContent = "00:00";
  total_duration.textContent = "00:00";
  seek_slider.value = 0;
}

// 随机改变页面背景色
function random_bg_color() {
  let red = Math.floor(Math.random() * 256) + 64;
  let green = Math.floor(Math.random() * 256) + 64;
  let blue = Math.floor(Math.random() * 256) + 64;
  let bgColor = "rgb(" + red + "," + green + "," + blue + ")";
  document.body.style.background = bgColor;
}

登录后复制

3. 加载歌曲功能 (loadTrack)

loadTrack函数是播放器核心之一，它负责根据给定的track_index加载歌曲，更新UI，并设置定时器。

function loadTrack(track_index) {
  clearInterval(updateTimer); // 清除旧的定时器
  resetValues(); // 重置UI显示

  curr_track.src = track_list[track_index].path; // 设置音频源
  curr_track.load(); // 加载音频

  // 更新UI信息
  track_art.style.backgroundImage = "url(" + track_list[track_index].image + ")";
  track_name.textContent = track_list[track_index].name;
  track_artist.textContent = track_list[track_index].artist;
  now_playing.textContent = "PLAYING " + (track_index + 1) + " OF " + track_list.length;

  updateTimer = setInterval(seekUpdate, 1000); // 每秒更新进度条和时间
  curr_track.addEventListener("ended", nextTrack); // 歌曲播放结束后自动切换到下一首
  random_bg_color(); // 随机背景色
}

// 页面加载后，立即加载第一首歌曲
loadTrack(track_index);

登录后复制

4. 播放/暂停控制

实现playTrack和pauseTrack函数来控制音频的播放和暂停，并更新播放/暂停按钮的图标。playpauseTrack函数则根据当前播放状态进行切换。

function playTrack() {
  curr_track.play();
  isPlaying = true;
  playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>'; // 显示暂停图标
}

function pauseTrack() {
  curr_track.pause();
  isPlaying = false;
  playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>'; // 显示播放图标
}

function playpauseTrack() {
  if (!isPlaying) playTrack();
  else pauseTrack();
}

登录后复制

5. 歌曲切换功能 (nextTrack, prevTrack)

实现前进和后退功能，处理歌曲列表的循环播放。

function nextTrack() {
  if (track_index < track_list.length - 1)
    track_index += 1;
  else track_index = 0; // 播放到最后一首后，回到第一首
  loadTrack(track_index);
  playTrack();
}

function prevTrack() {
  if (track_index > 0)
    track_index -= 1;
  else track_index = track_list.length - 1; // 播放到第一首后，回到最后一首
  loadTrack(track_index);
  playTrack();
}

登录后复制

6. 进度条与时间显示

seekTo函数用于根据进度条的值跳转到歌曲的特定位置。seekUpdate函数则每秒执行一次，更新进度条和当前播放时间，并计算总时长。

function seekTo() {
  let seekto = curr_track.duration * (seek_slider.value / 100);
  curr_track.currentTime = seekto;
}

function seekUpdate() {
  let seekPosition = 0;

  // 确保音频元数据已加载，duration有效
  if (!isNaN(curr_track.duration)) {
    seekPosition = curr_track.currentTime * (100 / curr_track.duration);
    seek_slider.value = seekPosition;

    let currentMinutes = Math.floor(curr_track.currentTime / 60);
    let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
    let durationMinutes = Math.floor(curr_track.duration / 60);
    let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);

    // 格式化时间显示为 "MM:SS"
    if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
    if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
    if (currentMinutes < 10) { currentMinutes = "0" + currentMinutes; }
    if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }

    curr_time.textContent = currentMinutes + ":" + currentSeconds;
    total_duration.textContent = durationMinutes + ":" + durationSeconds;
  }
}

登录后复制

7. 音量控制

setVolume函数根据音量滑块的值来调整音频的播放音量。

function setVolume() {
  curr_track.volume = volume_slider.value / 100;
}

登录后复制

完整JavaScript代码示例

将以上所有JavaScript代码整合到一个script.js文件中。

// script.js

// 获取DOM元素
let now_playing = document.querySelector(".now-playing");
let track_art = document.querySelector(".track-art");
let track_name = document.querySelector(".track-name");
let track_artist = document.querySelector(".track-artist");

let playpause_btn = document.querySelector(".playpause-track");
let next_btn = document.querySelector(".next-track");
let prev_btn = document.querySelector(".prev-track");

let seek_slider = document.querySelector(".seek_slider");
let volume_slider = document.querySelector(".volume_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");

// 全局变量
let track_index = 0; // 当前播放歌曲在列表中的索引
let isPlaying = false; // 播放状态：true为播放中，false为暂停
let updateTimer; // 用于更新进度条和时间的定时器

// 动态创建audio元素，统一管理音频播放
let curr_track = document.createElement('audio');

// 歌曲列表
let track_list = [

登录后复制

以上就是JavaScript实现完整音乐播放器功能及常见错误解决的详细内容，更多请关注php中文网其它相关文章！