求助：实现音乐播放器音频文件切换（上一曲/下一曲按钮功能）

核心思路 #

• 用数组统一管理所有歌曲的元数据（音频地址、标题、封面），避免单独声明变量的冗余
• 维护一个当前播放索引，通过修改索引来切换歌曲
• 更新音频元素的src、标题文本和封面图片，完成切换

修改后的完整代码 #

HTML部分 #

将原有的多个<source>标签改为单个<audio>元素，动态切换音频源更方便：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Now playing</h1>
        <img class="song" src="Phil_Collins_-_Face_Value_2016.jpg">
        <h3 class="title">In the air tonight - Phil Collins</h3>
        
        <div>
            <audio controls id="audioPlayer">
                <source src="Phil_Collins_-_In_The_Air_Tonight_CeeNaija.com_.mp3">
            </audio>
        </div>

        <div>
            <button class="back" onclick="back()"></button>
            <button class="foward" onclick="forward()"></button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分 #

仅新增光标样式提升交互体验，其余保留原有设计：

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: rgba(245, 245, 36, 0.931);
}

.container{
    position: absolute;
    left: 300px;
    top: 70px;
    width: 600px;
    height: 650px;
    background-image:linear-gradient(360deg, rgba(245, 88, 167, 0.129), rgba(246, 37, 180, 0.524));
    box-shadow: rgba(0, 0, 0, 0.634) 2px 10px 90px;
    border-radius: 10%;
} 
h1 {
    text-align: center;
    margin-top: 50px;
    color: yellow;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif ;
}
.song {
    border-radius: 50%;
    width: 230px;
    height: 230px;
    position: absolute;
    top: 25%;
    left: 30%;
    box-shadow: rgba(0, 0, 0, 0.396) 1px 8px 5px;
    animation: rotate 15s infinite linear;
}

@keyframes rotate {
    from{ transform:rotate(-360deg);}
    to { transform: rotate(360deg);}
}

.title {
    color: yellow;
    text-align: center;
    position: relative;
    top: 20px;
}
audio {
    position: relative;
    top: 390px;
    left: 135px;
}
button {
    border-radius: 50%;
    border: none;
    width: 50px;
    height: 50px;
    margin: 120px;
    margin-top: 40%;
    background-color: rgba(255, 255, 255, 0.251);
    box-shadow: rgba(1, 1, 1, 0.456) 1px 1px 10px 2px;
    cursor: pointer; /* 新增点击光标样式 */
}
.foward, .pause, .back{
    background-size: 50px;
    background-repeat: no-repeat;
    background-color: rgba(254, 138, 95, 0.322);
}
.foward{
    background-image: url(); /* 填入前进图标地址 */
}
.back {
    background-image: url(); /* 填入后退图标地址 */
    background-size: 35px;
}
.pause {
    /* 可添加暂停图标 */
}

JavaScript部分 #

这是实现切换功能的核心代码，用数组管理歌曲、维护播放索引：

// 用数组存储所有歌曲信息，后续加歌直接在数组里添加对象即可
const songs = [
    {
        src: "Phil_Collins_-_In_The_Air_Tonight_CeeNaija.com_.mp3",
        title: "In the air tonight - Phil Collins",
        cover: "Phil_Collins_-_Face_Value_2016.jpg"
    },
    {
        src: "blue-oyster-cult-burnin-for-you-1-17.mp3",
        title: "Burnin' for You - Blue Öyster Cult",
        cover: "blue-oyster-cult-cover.jpg" // 替换为实际封面地址
    },
    {
        src: "prince-the-revolution-kiss.mp3",
        title: "Kiss - Prince and The Revolution",
        cover: "prince-kiss-cover.jpg"
    },
    {
        src: "lenny-kravitz-fly-away.mp3",
        title: "Fly Away - Lenny Kravitz",
        cover: "lenny-kravitz-fly-away-cover.jpg"
    },
    {
        src: "blondie-call-me.mp3",
        title: "Call Me - Blondie",
        cover: "blondie-call-me-cover.jpg"
    },
    {
        src: "the-clash-rock-the-casbah.mp3",
        title: "Rock the Casbah - The Clash",
        cover: "the-clash-rock-the-casbah-cover.jpg"
    }
];

// 获取页面元素
const audioPlayer = document.getElementById('audioPlayer');
const songTitle = document.querySelector('.title');
const songCover = document.querySelector('.song');

// 当前播放歌曲的索引，初始为第一首
let currentSongIndex = 0;

// 前进切换函数
function forward() {
    // 索引循环：到最后一首后回到第一首
    currentSongIndex = (currentSongIndex + 1) % songs.length;
    loadSong(currentSongIndex);
}

// 后退切换函数
function back() {
    // 索引循环：到第一首后回到最后一首
    currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
    loadSong(currentSongIndex);
}

// 加载指定索引的歌曲
function loadSong(index) {
    const song = songs[index];
    audioPlayer.src = song.src;
    songTitle.textContent = song.title;
    songCover.src = song.cover;
    // 自动播放切换后的歌曲
    audioPlayer.play();
}

// 可选：歌曲播放完毕后自动切下一首
audioPlayer.addEventListener('ended', forward);

关键说明 #

• 数组管理歌曲：把歌曲信息集中存放在数组中，比单独声明变量更灵活，后续添加歌曲只需在数组里新增对象
• 循环索引处理：用取模运算实现循环播放逻辑，前进到最后一首自动回到第一首，后退到第一首自动跳转到最后一首
• 统一加载函数：loadSong函数负责更新音频、标题、封面所有内容，避免重复代码
• 自动切歌：监听音频的ended事件，歌曲播放完成后自动切换下一首，提升使用体验

内容的提问来源于stack exchange，提问作者Alana Rêyes