JavaScript 中怎么用页面交互实现一个音乐播放列表切歌交互-js教程-PHP中文网

JavaScript原生实现音乐播放列表切歌交互，通过控制audio元素src和播放状态并同步UI高亮、标题等；核心包括点击切换、上下首逻辑、ended自动连播及错误处理。

javascript 中怎么用页面交互实现一个音乐播放列表切歌交互

用 JavaScript 实现音乐播放列表的切歌交互，核心是控制 <audio></audio> 元素的 src 和播放状态，并同步更新 UI（如高亮当前歌曲、更新标题/进度等）。不需要框架，原生 JS 就能完成，关键在于数据驱动 + 事件绑定。

准备播放列表数据和 HTML 结构

先定义一个清晰的播放列表数组，每首歌包含基本信息：

const playlist = [
  { id: 1, title: "晴天", artist: "周杰伦", src: "qingtian.mp3" },
  { id: 2, title: "稻香", artist: "周杰伦", src: "daoxiang.mp3" },
  { id: 3, title: "夜曲", artist: "周杰伦", src: "yiqu.mp3" }
];

HTML 中放一个 <audio></audio> 标签和一个歌曲列表容器：

<audio id="player" preload="metadata"></audio><p></p>

晴天 - 周杰伦
稻香 - 周杰伦
夜曲 - 周杰伦

绑定点击切歌 + 自动高亮当前项

给每首歌 <li> 绑定点击事件，切换音频源并播放：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

移除之前高亮的 active 类，给当前项添加
用 dataset.index 获取点击项索引，查表拿到对应歌曲对象
设置 audio.src 并调用 play()；若失败（比如被浏览器自动拦截），可捕获 error 或用用户手势触发后播放

const player = document.getElementById("player");
const items = document.querySelectorAll("#playlist-container li");
<p>items.forEach((item, index) => {
item.addEventListener("click", () => {
// 清除所有高亮
items.forEach(i => i.classList.remove("active"));
item.classList.add("active");</p><pre class="brush:php;toolbar:false;">// 加载并播放
const song = playlist[index];
player.src = song.src;
player.title = song.title;
player.play().catch(e => console.warn("播放被阻止，请用户首次点击触发", e));

}); });

支持快捷操作：上一首 / 下一首按钮

维护一个 currentIndex 变量，配合循环逻辑（比如播到最后一首时点“下一首”回到第一首）：

初始化 let currentIndex = 0
“下一首”：索引 +1，超过长度则归零；“上一首”：索引 -1，小于 0 则设为最后一项索引
每次切换都更新 audio.src、调用 play()、同步 UI 高亮

let currentIndex = 0;
<p>function playSong(index) {
if (index = playlist.length) index = 0;</p><p>currentIndex = index;
const song = playlist[index];
player.src = song.src;
player.title = song.title;
player.play();</p><p>// 同步高亮
items.forEach((item, i) => {
item.classList.toggle("active", i === index);
});
}</p><p>document.getElementById("next-btn").addEventListener("click", () => {
playSong(currentIndex + 1);
});</p><p>document.getElementById("prev-btn").addEventListener("click", () => {
playSong(currentIndex - 1);
});</p>

增强体验：自动播放下一首 + 播放结束监听

利用 ended 事件实现“自动连播”：

监听 player.addEventListener("ended", () => playSong(currentIndex + 1))
如果想支持“单曲循环”，加个开关：检测到 loop 开启时，不跳下一首，而是 player.currentTime = 0; player.play();
可选：播放中更新页面标题（document.title = song.title + " - 播放中"）或 favicon 图标，提升沉浸感

不复杂但容易忽略细节：确保音频文件路径正确、处理 play() 的 Promise 拒绝、首次交互后才能自动播放、移动端需静音默认播放等。把这些补全，一个轻量可靠的切歌交互就完成了。