使用JavaScript构建功能完善的音乐播放器-js教程-PHP中文网

使用JavaScript构建功能完善的音乐播放器

本教程详细介绍了如何使用javascript、html和css构建一个功能完善的网页音乐播放器。文章将从html结构、核心javascript逻辑、音乐列表管理、播放控制、进度与音量调节等方面进行深入讲解，并提供完整的示例代码。同时，我们也将探讨并解决在开发过程中可能遇到的常见错误，例如typeerror: cannot read properties of undefined (reading 'contains')，旨在帮助开发者构建稳定且用户体验良好的音乐播放功能。

在现代Web应用中，集成音频播放功能已成为一种常见需求。本教程将引导您从零开始，使用纯JavaScript构建一个功能丰富、交互性强的音乐播放器。我们将涵盖播放/暂停、上一曲/下一曲、音量控制、播放进度显示以及动态加载音乐列表等核心功能。

1. HTML 结构：构建播放器用户界面

音乐播放器的用户界面由一系列HTML元素组成，用于显示歌曲信息、控制按钮和进度条。以下是建议的HTML结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web 音乐播放器</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    <!-- 引入自定义样式文件 -->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="player">
        <!-- 歌曲详情区域 -->
        <div class="details">
            <div class="now-playing">正在播放 x / y</div>
            <div class="track-art"></div> <!-- 歌曲封面 -->
            <div class="track-name">歌曲名称</div>
            <div class="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 结构说明：

.player: 整个播放器的容器。
.details: 用于显示歌曲封面、名称和艺术家信息。
.buttons: 包含上一曲、播放/暂停、下一曲的控制按钮。onclick 属性直接绑定了 JavaScript 函数，简化了事件处理。
.slider_container: 分别用于播放进度和音量控制，内部包含一个 input 类型为 range 的滑块和时间/音量图标。

2. CSS 样式：美化播放器界面

为了让播放器具有良好的视觉效果，我们需要编写相应的CSS样式。虽然本教程的重点是JavaScript逻辑，但一个基础的style.css文件是必不可少的。您可以根据个人喜好进行设计，以下是一些关键元素的样式建议：

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

/* style.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #f06, #f90); /* 示例背景 */
    transition: background-color 0.5s ease; /* 背景颜色过渡 */
}

.player {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 300px;
}

.details .track-art {
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.details .track-name {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
}

.details .track-artist {
    font-size: 1em;
    color: #555;
    margin-bottom: 20px;
}

.buttons div {
    display: inline-block;
    cursor: pointer;
    margin: 0 15px;
    color: #333;
}

.buttons div:hover {
    color: #007bff;
}

.playpause-track i {
    font-size: 5em; /* 播放/暂停按钮更大 */
}

.slider_container {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.slider_container .seek_slider,
.slider_container .volume_slider {
    flex-grow: 1;
    margin: 0 10px;
    -webkit-appearance: none;
    height: 5px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
}

/* 滑块样式 (Chrome/Safari) */
.slider_container .seek_slider::-webkit-slider-thumb,
.slider_container .volume_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}

.slider_container .current-time,
.slider_container .total-duration {
    font-size: 0.9em;
    color: #666;
}

登录后复制

3. JavaScript 核心逻辑：实现播放器功能

所有播放器的核心功能都将通过JavaScript实现。我们将创建一个 script.js 文件来承载这些逻辑。

3.1 全局变量和DOM元素获取

首先，定义一些全局变量来存储播放状态、当前曲目索引以及获取必要的DOM元素。

// 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; // 是否正在播放
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",
  },
];

登录后复制

注意事项：

我们动态创建了一个 audio 元素 (curr_track)，而不是直接使用HTML中的 <audio> 标签。这使得管理和切换歌曲更加灵活。
track_list 数组存储了所有可播放的歌曲信息，包括名称、艺术家、封面图片URL和音乐文件路径。

3.2 辅助函数：背景颜色和重置UI

为了增强用户体验，我们添加了一个随机背景颜色函数，并在加载新歌曲时重置播放器UI状态。

海螺音乐

海螺AI推出的AI音乐生成工具，可以生成个性化的音乐作品。

查看详情

// 随机背景颜色
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;
}

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

登录后复制

3.3 加载音乐轨道 (loadTrack)

loadTrack 函数负责加载指定索引的歌曲，并更新播放器UI。

function loadTrack(track_index) {
  clearInterval(updateTimer); // 清除旧的进度更新计时器
  resetValues(); // 重置UI显示

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

  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 = "正在播放 " + (track_index + 1) + " / " + track_list.length; // 更新当前播放信息

  updateTimer = setInterval(seekUpdate, 1000); // 每秒更新播放进度
  curr_track.addEventListener("ended", nextTrack); // 歌曲播放结束后自动播放下一曲
  random_bg_color(); // 更改背景颜色
}

登录后复制

3.4 播放控制功能

这些函数处理播放、暂停、上一曲和下一曲的逻辑。

// 播放/暂停切换
function playpauseTrack() {
  if (!isPlaying) playTrack();
  else pauseTrack();
}

// 播放歌曲
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 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();
}

登录后复制

3.5 进度和音量控制

这些函数与滑块交互，控制播放进度和音量。

// 跳转到指定播放位置
function seekTo() {
  let seekto = curr_track.duration * (seek_slider.value / 100);
  curr_track.currentTime = seekto;
}

// 设置音量
function setVolume() {
  curr_track.volume = volume_slider.value / 100;
}

// 更新播放进度和时间显示
function seekUpdate() {
  let seekPosition = 0;

  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);

    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;
  }
}

登录后复制

3.6 初始化播放器

最后，在脚本加载时调用 loadTrack 来初始化播放器，加载第一首歌曲。

// 页面加载时加载第一首歌曲
loadTrack(track_index);

登录后复制

4. 常见问题与注意事项

4.1 TypeError: Cannot read properties of undefined (reading 'contains') 解析

在原始问题中，用户遇到了 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') at HTMLElement 错误，这通常是由于以下原因造成的：

document.querySelectorAll() 返回的是 NodeList：document.querySelectorAll('.player') 返回的是一个包含所有匹配元素的 NodeList（类似数组），而不是单个HTML元素。NodeList 没有 classList 属性。要访问单个元素的 classList，你需要指定具体的元素，例如 musicPlayer[0].classList。
classList.contains() 参数错误：classList.contains() 方法期望一个不带前缀点（.）的类名字符串。例如，检查是否存在 play 类，应该使用 classList.contains('play')，而不是 classList.contains('.play')。

本教程的解决方案通过以下方式避免了这个问题：

直接操作 isPlaying 布尔变量来管理播放状态，而不是依赖DOM元素的类名。
使用 document.querySelector() 获取单个元素，确保操作的是正确的DOM对象。

4.2 DOM 操作的最佳实践

querySelector vs querySelectorAll: 当您预期只有一个元素时，使用 document.querySelector()。当您需要处理多个元素时，使用 document.querySelectorAll()，并记住它返回一个 NodeList，可能需要迭代处理或访问特定索引的元素。
事件监听: 尽管本示例为了简洁使用了 onclick 属性直接绑定函数，但在更复杂的应用中，推荐使用 element.addEventListener('click', handlerFunction)。addEventListener 提供了更强大的功能，例如可以为同一事件添加多个处理程序，并且更好地分离了HTML和JavaScript。