做短视频剪辑和直播的时候，我经常为了背景音乐来回拖进度条。明明想要的只是“循环歌单”里那几首固定标签的音乐，但每次都要手动点下一首，或者把音频复制粘贴成一大堆重复片段。时间一长，我就干脆自己写了一个网页版循环歌单播放器。
本文会把这个项目完整拆开：从需求设计、数据结构，到纯前端播放器的实现细节、循环逻辑、标签筛选，再到常见问题和工程建议。适合刚学完 HTML/CSS/JavaScript 的新手，也适合想在本地快速搭建一个可配置“背景音乐循环机”的开发者。
老规矩，先看最终做得像什么：
- 本地网页播放器，打开即用，无需联网。
- 支持多首歌曲按标签分类，比如“Turbo Slap”“建模脸の小曲”“浩辰走路の小曲”这些自定义标签。
- 支持列表循环、随机循环、单曲循环、Turbo 加速四种模式。
- 播放列表生命周期完整：加载、切换、过滤、持久化保存。
1. 背景：循环歌单为什么需要专门工具
“循环歌单”听起来不是一个新技术名词，但它背后代表的需求很明确：把一组音乐固定成特定的循环顺序，并长时间反复播放。常见场景包括：
- 直播间背景音乐，需要一直循环且不能断。
- 短视频素材剪辑，需要把某几首 BGM 按顺序反复播放。
- 学习、写作、录屏时的背景音乐，不想被不同专辑打乱节奏。
- 角色扮演、走路模仿、漫画解说等创意内容，经常需要“固定场景配固定音乐”。
你可能觉得，用现成的音乐 App 点一下“列表循环”不就行了？问题是，实际工作中的歌单往往带有很强的场景属性。比如：
- “Turbo Slap”：偏电子、加速感的歌，适合节奏快的内容。
- “建模脸の小曲”：适合 AI 建模展示、图片生成视频。
- “浩辰走路の小曲”：适合走路、转场、跟拍镜头。
- “谁说没有完美犯罪”：往往是带有剧情反转或悬疑氛围的段落。
这些东西如果用 App 默认歌单管理，每次都要重新搜歌、排序、建歌单，非常低效。如果手动用剪辑软件把音频拖成 N 段循环，又会让工程文件变得巨大，而且后面想换歌特别麻烦。
所以更适合的做法，是把“歌单”本身做成一个页面应用：音乐文件放在本地，播放顺序和循环模式由代码控制，标签可以自由添加。这既解决了循环播放效率问题，也把“换音乐”的成本降低到改一行数据。
2. 功能拆解与使用场景
在动手写代码之前，需要先把功能拆清楚。作为一个循环歌单播放器，核心功能并不是“播放音频”这么简单，而是四层能力：
2.1 音乐数据管理
每首歌应该包含：
- 唯一 ID。
- 标题。
- 作者或来源。
- 音频文件路径。
- 标签数组。
标签是最重要的设计。同一个文件可以同时属于多个场景，比如“建模脸の小曲”可以同时打上bgm、model、热门三个标签。这样用户既能通过场景名过滤，也能通过曲风过滤。
2.2 播放控制
播放器需要支持：
- 播放/暂停。
- 上一首/下一首。
- 进度条拖动跳转。
- 当前时间与总时长展示。
这部分用 HTML5 的<audio>标签就能实现，不需要引入额外框架。但要注意：浏览器不允许页面在没有任何用户点击的情况下直接播放音频，所以首次载入页面时只是“加载第一首歌”，并不会自动出声。
2.3 循环模式
这是“循环歌单”的核心，我设计了四种模式：
| 模式名称 | 行为特点 | 典型场景 |
|---|---|---|
| 列表循环 | 播放到最后一首后回到第一首继续 | 直播间、长时间背景音 |
| 随机循环 | 单曲结束后随机跳到另一首 | 学习、写作时增加新鲜感 |
| 单曲循环 | 当前歌曲播完后重置进度继续播 | 某一首歌特别适合当前场景 |
| Turbo 加速 | 将播放速率提高到 1.25 倍，并保持循环切换 | 游戏剪辑、加速视频预览 |
Turbo 模式本质上不是一种循环算法，而是一种“播放速率叠加”。为了实现统一状态管理，我会把它和其他循环模式放在同一个操作入口里，这样用户看到一个按钮就能控制。
2.4 标签过滤
页面顶部需要渲染所有标签，用户点击某个标签时，播放列表会立刻变成“只包含该标签的歌曲”。点击“全部”则恢复完整歌单。
过滤后，当前播放索引必须重新计算，否则会出现“列表显示 A 歌曲，但实际播放的是 B 歌曲”的错位问题。后面会在代码里专门处理。
3. 技术方案与数据结构设计
这个项目我选纯前端三件套实现：HTML + CSS + JavaScript。原因很实际：
- 不需要安装数据库，不需要启动后端服务。
- 可以直接通过静态服务器部署，甚至打包成桌面工具。
- 便于把工程文件、音频资源、配置代码一起放在同一个目录里。
- 读者可以在本地立刻复制运行，门槛低。
3.1 数据模型
每一首歌的数据结构如下：
{ id: "p001", title: "Turbo Slap", artist: "Turbo Project", path: "audio/turbo.mp3", tags: ["turbo", "电子", "热门"] }所有歌曲放到一个数组中：
const PLAYLIST = [];这样后续如果要把歌单从后端拉取，只需要把PLAYLIST改成fetch()的结果即可，其他渲染逻辑不用动。
3.2 播放状态管理
播放器的全局状态我设计成一个对象：
const state = { mode: "loop", // 播放模式 filter: "", // 当前过滤标签 currentList: [], // 当前参与播放的歌曲列表 currentIndex: 0, // 当前歌曲在 currentList 中的下标 playing: false, // 是否在播放 audio: new Audio() // 全局唯一的音频实例 };关键点只有一个：所有播放操作都使用state.currentList，而不是直接使用原始PLAYLIST。这样只要在过滤时重新生成一次currentList，后续的上一首、下一首、随机播放都不会出现索引越界或列表错位的问题。
3.3 为什么只用单个 Audio 实例
在 Web 播放器开发中，很多新手会犯同一个错误：每次切换歌曲都new Audio()，结果导致多个音频对象同时播放，出现声音重叠。
本文的实现方式始终只有一个state.audio实例。切歌时通过.src = song.path改变音频地址，调用.load()重新加载，调用.play()开始播放。这样播放器状态永远只有一个“发声源”，不会乱。
4. 完整实战：纯前端循环歌单播放器
下面开始实现。先给出项目结构，然后逐个文件说明。
4.1 项目结构
loop-playlist/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── playlist-data.js │ └── app.js └── audio/ ├── turbo.mp3 ├── model.mp3 ├── walk.mp3 └── crime.mp3如果你没有准备好的 mp3 文件，可以先放几个测试音频。比如用 ffmpeg 生成简短的提示音文件：
mkdir -p audio # 用 ffmpeg 生成 10 秒 440Hz 测试音 ffmpeg -f lavfi -i "sine=frequency=440:duration=10" audio/turbo.mp3 ffmpeg -f lavfi -i "sine=frequency=520:duration=10" audio/model.mp3 ffmpeg -f lavfi -i "sine=frequency=660:duration=10" audio/walk.mp3 ffmpeg -f lavfi -i "sine=frequency=780:duration=10" audio/crime.mp3没有 ffmpeg 也没关系，直接把任意 mp3 文件复制到audio目录并保证文件名一致即可。
4.2 页面骨架 index.html
文件路径：loop-playlist/index.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="css/style.css"> </head> <body> <div class="player-page"> <header class="player-header"> <h1>循环歌单播放器</h1> <p class="subtitle">Tag-based Auto Loop Playlist Player</p> </header> <section class="mode-bar"> <button class="mode-btn active">* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #121212; color: #e8e8e8; font-family: "Helvetica Neue", Arial, "PingFang SC", sans-serif; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .player-page { width: 480px; max-width: 95vw; background: #1e1e1e; border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); margin: 24px 0; } .player-header h1 { font-size: 22px; margin-bottom: 4px; } .subtitle { color: #888; font-size: 13px; margin-bottom: 16px; } .mode-bar, .tag-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .mode-btn, .tag-btn { background: #2a2a2a; border: none; color: #ccc; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; transition: background 0.2s, color 0.2s; } .mode-btn.active, .tag-btn.active { background: #5a8dee; color: #fff; } .now-playing { display: flex; align-items: center; gap: 14px; background: #2a2a2a; border-radius: 12px; padding: 14px; margin-bottom: 14px; } .cover { width: 56px; height: 56px; border-radius: 8px; background: #3a3a3a; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; flex-shrink: 0; } .track-info { flex: 1; min-width: 0; } .track-title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-artist { font-size: 13px; color: #888; margin-top: 4px; } .player-controls button { background: none; border: none; color: #ddd; font-size: 20px; cursor: pointer; padding: 6px 10px; } .player-controls button:hover { color: #fff; } .progress-area { margin-bottom: 16px; } .progress-area input[type="range"] { width: 100%; accent-color: #5a8dee; } .time-row { display: flex; justify-content: space-between; font-size: 12px; color: #888; margin-top: 6px; } .playlist-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background 0.2s; } .playlist-item:hover { background: #2a2a2a; } .playlist-item.active { background: #3a4a6e; } .item-index { width: 24px; color: #888; text-align: center; font-size: 14px; } .item-info { flex: 1; min-width: 0; } .item-title { display: block; font-size: 14px; } .item-tags { display: block; font-size: 12px; color: #888; margin-top: 2px; }样式没有用任何 CSS 框架，适合新手阅读。颜色上采用暗色背景，长时间播放不会刺眼。
4.4 音乐数据文件 playlist-data.js
文件路径：loop-playlist/js/playlist-data.js
const PLAYLIST = [ { id: "p001", title: "Turbo Slap", artist: "Turbo Project", path: "audio/turbo.mp3", tags: ["turbo", "电子", "热门"] }, { id: "p002", title: "建模脸の小曲", artist: "AI Model Project", path: "audio/model.mp3", tags: ["model", "bgm", "热门"] }, { id: "p003", title: "浩辰走路の小曲", artist: "Walk Studio", path: "audio/walk.mp3", tags: ["walk", "bgm"] }, { id: "p004", title: "谁说没有完美犯罪", artist: "Mystery Band", path: "audio/crime.mp3", tags: ["quote", "二次元"] } ];这里的路径是相对路径。如果页面通过file://打开，大多数浏览器都能加载相对路径下的音频资源。但如果遇到本地媒体文件加载限制，推荐使用本地静态服务器方式打开，后面 4.6 节会说明。
4.5 核心逻辑 app.js
文件路径：loop-playlist/js/app.js
这是整个播放器最关键的部分。考虑到逻辑较多，我按功能拆分讲解，但最终代码是一个完整文件。
全局状态与 DOM 引用
(function () { const state = { mode: localStorage.getItem("loopMode") || "loop", filter: "", currentList: [], currentIndex: 0, playing: false, audio: new Audio() }; const elements = { tagBar: document.getElementById("tagBar"), playlist: document.getElementById("playlist"), trackTitle: document.getElementById("trackTitle"), trackArtist: document.getElementById("trackArtist"), coverText: document.getElementById("coverText"), playBtn: document.getElementById("playBtn"), prevBtn: document.getElementById("prevBtn"), nextBtn: document.getElementById("nextBtn"), progressBar: document.getElementById("progressBar"), currentTime: document.getElementById("currentTime"), durationTime: document.getElementById("durationTime") }; state.audio.preload = "metadata";使用localStorage保存播放模式，可以让用户刷新页面后依然记住上次选择。
工具函数
function formatTime(sec) { if (Number.isNaN(sec)) return "00:00"; sec = Math.floor(sec); const m = String(Math.floor(sec / 60)).padStart(2, "0"); const s = String(sec % 60).padStart(2, "0"); return `${m}:${s}`; } function getFilteredList() { if (!state.filter) return PLAYLIST; return PLAYLIST.filter(song => song.tags.includes(state.filter)); }getFilteredList是过滤的核心。如果state.filter为空字符串，就返回全部歌曲。
渲染标签
function renderTags() { const tagSet = new Set(); PLAYLIST.forEach(song => { song.tags.forEach(tag => tagSet.add(tag)); }); tagSet.forEach(tag => { const btn = document.createElement("button"); btn.className = "tag-btn"; btn.dataset.tag = tag; btn.textContent = tag; elements.tagBar.appendChild(btn); }); }使用Set可以自动去重。标签渲染一次即可，之后点击切换不需要重新渲染标签栏。
渲染播放列表
function renderPlaylist(list) { elements.playlist.innerHTML = ""; list.forEach((song, idx) => { const item = document.createElement("div"); item.className = "playlist-item"; const currentSong = state.currentList[state.currentIndex]; if (currentSong && song.id === currentSong.id) { item.classList.add("active"); } item.innerHTML = ` <span class="item-index">${idx + 1}</span> <div class="item-info"> <span class="item-title">${song.title}</span> <span class="item-tags">${song.tags.join(" / ")}</span> </div> `; item.addEventListener("click", () => playSong(idx)); elements.playlist.appendChild(item); }); }这里点击的idx指的是当前list中的下标，也就是state.currentList中的下标，两者保持一致，所以可以直接传给playSong。
加载歌曲
function loadSong(song, autoplay = true) { state.audio.src = song.path; state.audio.load(); elements.trackTitle.textContent = song.title; elements.trackArtist.textContent = song.artist; elements.coverText.textContent = song.title.slice(0, 1); if (autoplay) { state.audio.play() .then(() => { state.playing = true; }) .catch(err => { console.warn("浏览器自动播放受限，请手动点击播放", err); state.playing = false; }); } else { state.playing = false; } syncUI(); }autoplay参数很重要。首次进入页面时，我们不希望页面自动发出声音，所以只调用loadSong(song, false)加载元数据；用户点击播放后再正式播放。如果是切歌，则autoplay默认为true。
播放与暂停
function togglePlay() { if (!state.currentList.length) return; if (state.audio.paused) { state.audio.play() .then(() => { state.playing = true; syncUI(); }) .catch(err => console.warn("播放失败", err)); } else { state.audio.pause(); state.playing = false; syncUI(); } }上一首与下一首
function nextSong() { if (!state.currentList.length) return; if (state.mode === "shuffle") { let nextIdx = state.currentIndex; while (nextIdx === state.currentIndex && state.currentList.length > 1) { nextIdx = Math.floor(Math.random() * state.currentList.length); } state.currentIndex = nextIdx; } else { state.currentIndex = (state.currentIndex + 1) % state.currentList.length; } loadSong(state.currentList[state.currentIndex]); } function prevSong() { if (!state.currentList.length) return; if (state.audio.currentTime > 3) { state.audio.currentTime = 0; return; } state.currentIndex = (state.currentIndex - 1 + state.currentList.length) % state.currentList.length; loadSong(state.currentList[state.currentIndex]); }注意prevSong的小细节：如果当前歌曲已经播了超过 3 秒，点“上一首”会先回到本曲开头，而不是立刻切到上一首。这个交互很多播放器都在用，体验更好。
播放模式切换
function setMode(mode) { state.mode = mode; localStorage.setItem("loopMode", mode); if (mode === "turbo") { state.audio.playbackRate = 1.25; } else { state.audio.playbackRate = 1.0; } document.querySelectorAll(".mode-btn").forEach(btn => { btn.classList.toggle("active", btn.dataset.mode === mode); }); } function handleModeClick(event) { const mode = event.target.dataset.mode; if (mode) setMode(mode); }Turbo 模式只改变playbackRate，不改变循环逻辑。如果以后想提高倍速，直接修改1.25即可。
标签过滤
function setFilter(tag) { state.filter = tag; state.currentList = getFilteredList(); state.currentIndex = 0; state.audio.pause(); state.playing = false; document.querySelectorAll(".tag-btn").forEach(btn => { btn.classList.toggle("active", btn.dataset.tag === tag); }); renderPlaylist(state.currentList); if (state.currentList.length) { loadSong(state.currentList[0], false); } syncUI(); }过滤后把索引归零，并暂停当前播放。因为过滤后的列表已经变化，原来的播放位置不再可靠，必须回到第一首重新加载。这里没有自动播放，需要用户主动点击，以避免浏览器自动播放策略的干扰。
UI 同步
function syncUI() { const currentSong = state.currentList[state.currentIndex]; if (currentSong) { elements.trackTitle.textContent = currentSong.title; elements.trackArtist.textContent = currentSong.artist; elements.coverText.textContent = currentSong.title.slice(0, 1); } else { elements.trackTitle.textContent = "暂无歌曲"; elements.trackArtist.textContent = "--"; elements.coverText.textContent = "♪"; } elements.playBtn.textContent = state.playing ? "⏸" : "▶"; document.querySelectorAll(".playlist-item").forEach((item, idx) => { const currentSongId = state.currentList[state.currentIndex]?.id; const song = state.currentList[idx]; item.classList.toggle("active", song && song.id === currentSongId); }); }syncUI负责把状态同步到界面。之所以在多个函数末尾调用它，是为了保证播放状态与界面完全一致。
进度条与时间
state.audio.addEventListener("timeupdate", () => { if (state.audio.duration) { elements.progressBar.value = (state.audio.currentTime / state.audio.duration) * 100; elements.currentTime.textContent = formatTime(state.audio.currentTime); elements.durationTime.textContent = formatTime(state.audio.duration); } }); elements.progressBar.addEventListener("input", () => { if (state.audio.duration) { state.audio.currentTime = (elements.progressBar.value / 100) * state.audio.duration; } });拖动进度条时，通过input事件实时跳转。这里没有做节流，因为本地音频播放器并发量很低，性能完全足够。
播放结束事件
state.audio.addEventListener("ended", () => { if (state.mode === "single") { state.audio.currentTime = 0; state.audio.play().catch(err => console.warn("播放失败", err)); } else { nextSong(); } });单曲循环模式下，歌曲播完后把进度归零并继续播放。其他循环模式下，调用nextSong()实现自动切歌。
音频加载失败处理
state.audio.addEventListener("error", () => { elements.trackTitle.textContent = "音频加载失败"; elements.trackArtist.textContent = "请检查文件路径"; elements.coverText.textContent = "!"; });如果路径错误或文件格式不支持，播放器会显示明确提示，而不是静默失败。
事件绑定与初始化
function bindEvents() { elements.playBtn.addEventListener("click", togglePlay); elements.prevBtn.addEventListener("click", prevSong); elements.nextBtn.addEventListener("click", nextSong); document.querySelectorAll(".mode-btn").forEach(btn => { btn.addEventListener("click", handleModeClick); }); document.querySelectorAll(".tag-btn").forEach(btn => { btn.addEventListener("click", () => setFilter(btn.dataset.tag)); }); document.addEventListener("keydown", (event) => { if (event.target.tagName === "INPUT") return; if (event.code === "Space") { event.preventDefault(); togglePlay(); } else if (event.code === "KeyN") { nextSong(); } else if (event.code === "KeyP") { prevSong(); } else if (event.code === "KeyT") { setMode(state.mode === "turbo" ? "loop" : "turbo"); } }); } function initApp() { renderTags(); state.currentList = getFilteredList(); state.currentIndex = 0; renderPlaylist(state.currentList); if (state.currentList.length) { loadSong(state.currentList[0], false); } setMode(state.mode); bindEvents(); syncUI(); } window.addEventListener("DOMContentLoaded", initApp); })();键盘快捷键给本地工具增加了不少效率。空格键播放/暂停，N下一首，P上一首，T切换 Turbo 模式。
4.6 运行与验证
在项目根目录启动静态服务器：
cd loop-playlist python3 -m http.server 8080然后访问：
http://localhost:8080预期效果：
- 页面显示“全部”标签，下面有 4 首歌曲。
- 点击“turbo”标签，播放列表只剩 1 首。
- 点击“bgm”标签，列表只剩 2 首。
- 点击歌曲行，能正常播放。
- 点击“Turbo 加速”，播放速度变为 1.25 倍。
- 切到“随机循环”，点击“下一首”会在列表中随机切换。
如果你是通过file://直接双击index.html打开的，大部分浏览器也能运行，只是个别浏览器会限制本地媒体加载。遇到这种情况，优先用静态服务器方式。
5. 扩展建议：把工具升级成更完整的产品
现在这个播放器已经能完成“循环歌单”的日常需求。如果想继续扩展，我建议从下面几个方向入手。
5.1 与后端 JSON 接口对接
目前PLAYLIST是写死的 JS 对象。真实项目中，歌单数据更适合维护成 JSON 文件：
[ { "id": "p001", "title": "Turbo Slap", "artist": "Turbo Project", "path": "/audio/turbo.mp3", "tags": ["turbo", "电子", "热门"] } ]然后在app.js中改成异步加载：
fetch("api/playlist.json") .then(res => res.json()) .then(data => { window.PLAYLIST = data; initApp(); });这样歌单数据就可以通过接口动态下发，不需要每次改代码。
5.2 接入 Media Session API
在桌面端和移动端浏览器中，媒体会话 API 可以把播放信息同步到系统锁屏界面，让用户在系统层控制播放。
if ("mediaSession" in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: song.title, artist: song.artist }); }这是一个低成本高体验的增强，推荐加入。
5.3 打包成桌面应用
如果不想每次开浏览器，可以用 Electron 或 Tauri 把这个页面包装成桌面软件。因为页面和音频都在本地，打包后就是一个离线循环播放器，适合直播间的背景音乐专用机。
5.4 增加封面图片
数据模型里加一个cover字段，在渲染时把coverText替换成<img>标签，即可展示封面图。
6. 常见问题与排查思路
开发本地播放器时，下面几个问题是出现频率最高的。
| 问题现象 | 常见原因 | 解决思路 |
|---|---|---|
| 页面打开后不出声 | 浏览器自动播放策略拦截 | 手动点击一次播放按钮 |
| 点击播放后声音重叠 | 每次切歌都新建 Audio 对象 | 使用全局唯一 Audio 实例 |
| 过滤标签后点击歌曲跳错 | currentList 与 DOM 列表不一致 | 统一用 state.currentList 渲染和播放 |
| 音频一直显示加载失败 | 路径错误或格式不支持 | 检查音频目录和浏览器支持的编码格式 |
| 单曲循环模式下进度条卡住 | 音频文件不完整或时长元数据读取失败 | 替换标准 mp3/wav 文件 |
| 本地 file:// 打开音频不生效 | 浏览器限制本地资源访问 | 使用 python3 -m http.server 访问 |
6.1 为什么浏览器自动播放会被拦截
主流浏览器规定：页面在没有用户手势的情况下，不允许自动播放有声视频和音频。这是为了防止网页一打开就播放噪音。
解决方案有两种：
- 首次进入页面时不自动播放，加载第一首歌后等待用户点击。
- 让用户点击页面任意区域后，再触发音频播放。
本文采用第一种方案，这也是大多数音乐类网页的做法。
6.2 为什么会出现声音重叠
声音重叠通常不是循环代码的问题，而是音频实例的问题。如果每首歌都新建一个Audio()，前一个实例没有暂停，后一个实例又开始播放，两个声音就会叠在一起。
解决方式就是文章中的做法：始终使用state.audio这一个实例，切歌前先pause()再修改src。
6.3 为什么标签过滤后播放列表会错位
如果代码里存在两套列表：一套是用于 DOM 渲染的filteredList，一套是用于播放器逻辑的currentList，两者一旦不同步，就会出现显示与播放不一致。
我建议把“当前正在播放的列表”作为唯一数据源。过滤时重新生成currentList，渲染列表时直接从currentList取数据，点击列表时直接使用当前下标。这样能避免很多隐藏 Bug。
7. 最佳实践与工程建议
画完代码，我再从工程角度总结几条经验。
7.1 数据与逻辑分离
playlist-data.js只负责数据，app.js只负责逻辑。以后要换歌单，不需要动播放器代码。这个思想适用于所有前端项目。
7.2 文件编码统一使用 UTF-8
HTML 文件已经声明了charset="UTF-8"，但 JS 文件如果被本地编辑工具保存成 GBK，就会出现中文乱码。建议使用 VS Code 等工具统一保存为 UTF-8 编码。
7.3 合理使用 localStorage
播放模式和用户选择这类“轻配置”可以放localStorage，但不要把歌单整个塞进去。歌单属于完整数据，应该维护在独立文件中。
7.4 注意音频版权
这种播放器适合播放自己制作、购买版权或明确允许使用的音频文件。如果要把播放器部署到公网并分享，更要注意歌曲版权问题，不要未经授权上传热门商业歌曲。个人学习项目可以本地使用，公网发布要谨慎。
7.5 保持单一音频实例
再一次强调：全局只创建一个Audio()实例，可以避免 80% 的播放器并发问题。如果是更复杂的场景，比如需要同时播放两个音轨，那要用 Web Audio API 的AudioContext做统一调度，而不是简单创建多个<audio>标签。
7.6 使用静态服务器而不是 file://
本地开发时，尽量用python3 -m http.server或 VS Code 的 Live Server。file://协议会让部分浏览器限制资源加载、拖拽上传等功能，排查起来比较麻烦。
8. 总结与下一步
这个项目虽然不大，但把前端播放器最常见的几个问题都涉及了一遍：数据模型设计、状态管理、事件绑定、浏览器自动播放策略、标签过滤、循环切换。做完之后，你应该对 HTML5 Audio API 有了一个比较完整的认识。
下一步可以从几个方向继续深入：
- 把歌单数据改成
fetch加载的 JSON 文件。 - 加入封面图和歌词滚动。
- 封装成一个 npm 包或 Electron 桌面应用。
- 加入按播放次数排序的“智能循环”逻辑。
如果这篇文章对你有用，建议先复制到本地跑一遍，再按自己的歌单改造。不用急着加复杂功能，先把“本地打开、自动循环、标签过滤”这三个基础能力用熟，后面加什么都顺手。
