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

构建一个功能完善的JavaScript音乐播放器教程

本教程将指导您如何从零开始，使用html、css和javascript构建一个功能丰富的网页音乐播放器。文章详细介绍了播放器的html结构搭建、核心javascript逻辑实现，包括歌曲加载、播放/暂停控制、切换歌曲、进度条显示、音量调节以及动态ui更新。通过本教程，您将掌握构建交互式音频应用的关键技术，并解决开发过程中可能遇到的常见问题，如dom操作错误。

1. 概述与核心原理

构建一个功能完善的音乐播放器需要前端技术栈的协同工作：HTML负责结构，CSS负责样式，JavaScript负责核心的播放逻辑和用户交互。本教程将重点讲解JavaScript如何与HTML元素交互，实现音频的加载、播放、暂停、进度控制、音量调节以及歌曲切换等功能。

核心原理在于：

HTML5 <audio> 元素: 这是实现音频播放的基础。
JavaScript DOM 操作: 通过选择器获取HTML元素，并对其属性（如src、volume、currentTime）进行修改，以及监听用户事件（如点击、拖动）。
事件监听与状态管理: 监听播放器的各种事件（如播放结束、时间更新），并维护播放状态（是否正在播放、当前歌曲索引等）。
定时器: 使用 setInterval 定时更新播放进度和时间显示。

2. 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>简易音乐播放器</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" style="background-image: url('https://images.pexels.com/photos/2264753/pexels-photo-2264753.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=250&w=250');"></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结构说明：

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

.player: 播放器的整体容器。
.details: 用于显示当前播放歌曲的封面、名称和艺术家。
.buttons: 包含“上一曲”、“播放/暂停”和“下一曲”按钮。onclick 属性直接绑定了对应的JavaScript函数。
.slider_container: 包含进度条和音量控制条。input type="range" 是滑块元素，onchange 属性用于在滑块值改变时调用JavaScript函数。
Font Awesome: 通过 <link> 标签引入，用于显示美观的图标。

3. JavaScript 核心逻辑实现

JavaScript是播放器的大脑，负责处理所有交互和音频播放逻辑。我们将逐步实现各个功能模块。

3.1 DOM元素获取与状态变量定义

首先，获取所有需要操作的HTML元素，并定义一些关键的状态变量。

// 获取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",
  },
];

登录后复制

要点：

海螺音乐

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

查看详情

使用 document.querySelector() 精确获取单个DOM元素。
curr_track = document.createElement('audio');：动态创建一个 <audio> 元素，而不是依赖HTML中预设的 <audio> 标签。这使得我们能更灵活地控制音频源和播放。
track_list：一个包含歌曲信息的数组，每首歌曲是一个对象，包含 name、artist、image（封面图URL）和 path（音频文件URL）。

3.2 歌曲加载与UI更新

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

// 重置时间显示和进度条
function resetValues() {
  curr_time.textContent = "00:00";
  total_duration.textContent = "00:00";
  seek_slider.value = 0;
}

// 加载指定索引的歌曲
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 = "正在播放 " + (track_index + 1) + " / " + track_list.length;

  // 每秒更新一次进度条
  updateTimer = setInterval(seekUpdate, 1000);
  // 监听歌曲播放结束事件，自动播放下一曲
  curr_track.addEventListener("ended", nextTrack);
  // 随机改变背景颜色（可选的视觉效果）
  random_bg_color();
}

// 随机背景色函数（可选）
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;
}

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

登录后复制

3.3 播放/暂停控制

实现播放和暂停功能，并更新播放/暂停按钮的图标。

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>'; // 更新按钮图标为播放
}

登录后复制

3.4 歌曲切换

实现“上一曲”和“下一曲”功能，并处理循环播放逻辑。

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 进度条与时间显示

seekUpdate 函数每秒被调用一次，用于更新进度条和当前播放时间。seekTo 函数则根据用户拖动进度条的位置来跳转播放。

function seekTo() {
  // 根据滑块值计算跳转时间点
  let seekto = curr_track.duration * (seek_slider.value / 100);
  curr_track.currentTime = seekto;
}

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 音量控制

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

function setVolume() {
  curr_track.volume = volume_slider.value / 100; // 音量值范围0-1
}

登录后复制

4. 解决常见问题与最佳实践

4.1 针对原始问题的分析

原始问题中遇到的错误是 Uncaught TypeError: Cannot read properties of undefined (reading 'contains') at HTMLElement。这个错误通常发生在尝试访问一个 undefined 或 null 对象的属性时。

在原始代码片段中：

const musicPlayer = document.querySelectorAll('.player'); // musicPlayer 是一个 NodeList
// ...
playBtn.forEach((playBtn) => {
    playBtn.addEventListener('click', () => {
        const is

登录后复制

以上就是构建一个功能完善的JavaScript音乐播放器教程的详细内容，更多请关注php中文网其它相关文章！