纯HTML/CSS/JS音乐播放器需双击播放歌曲的问题求助

核心问题：状态变量逻辑完全颠倒 #

你的代码里，isMusicPlaying的初始状态与播放/暂停函数内的状态赋值完全搞反：

• 初始时音乐未播放，isMusicPlaying设为false是正确的，但第一次点击触发时，else分支执行pause()（此时音乐本来就没播放，毫无作用），还把isMusicPlaying改成true；
• 第二次点击时，isMusicPlaying为true，执行play()才开始播放，同时又把状态改回false，导致后续逻辑持续混乱。

修正后的JavaScript代码 #

import data from './data.js';

const music = document.querySelector('audio');
const forward = document.getElementById('forward');
const backward = document.getElementById('backward');
const play_push = document.getElementById('play_pause');

console.log(data[0]);
// 初始状态：音乐未播放
let isMusicPlaying = false;

const play = () => {
    music.play();
    isMusicPlaying = true; // 播放时标记为true
    // 同步更新图标为暂停样式
    play_push.classList.replace('fa-play', 'fa-pause');
}

const pause = () => {
    music.pause();
    isMusicPlaying = false; // 暂停时标记为false
    // 同步更新图标为播放样式
    play_push.classList.replace('fa-pause', 'fa-play');
}

// 播放暂停逻辑
play_push.addEventListener("click", () => {
    if (isMusicPlaying) {
        pause();
    } else {
        play();
    }
})

// 前进后退逻辑（补充边界处理，防止数组越界）
let counter = 0;
// 初始化音乐源为data数组的第一首歌曲
music.src = data[counter].song;

forward.addEventListener("click", () => {
    // 到达最后一首时循环回到第一首
    counter = (counter + 1) % data.length;
    music.src = data[counter].song;
    // 如果当前处于播放状态，切歌后自动继续播放
    if (isMusicPlaying) {
        music.play();
    }
    console.log(data[counter]);
})

backward.addEventListener("click", () => {
    // 到达第一首时循环跳到最后一首
    counter = (counter - 1 + data.length) % data.length;
    music.src = data[counter].song;
    // 如果当前处于播放状态，切歌后自动继续播放
    if (isMusicPlaying) {
        music.play();
    }
    console.log(data[counter]);
})

额外优化说明 #

1. 统一音乐源初始化：移除HTML中audio标签的硬编码路径，改用data数组的第一首歌曲初始化，保持逻辑一致性；
2. 数组边界防护：前进后退时加入循环逻辑，避免counter超出data数组的索引范围；
3. UI状态同步：播放/暂停时切换Font Awesome图标，让视觉状态与实际播放状态匹配；
4. 切歌体验优化：如果当前处于播放状态，切换歌曲后自动继续播放，无需手动再次点击。

内容的提问来源于stack exchange，提问作者ANUP KUMAR