网页按钮点击无法切换音频求助：点击按钮无法跳过当前歌曲

核心错误点 #

• 错误的事件绑定方式：给onclick赋值字符串代码是过时且错误的做法，必须直接赋值函数引用。
• 随机数生成逻辑错误：Math.random()不接受参数，原写法无法正确生成数组范围内的随机索引，会导致取到无效的数组元素。
• 缺少音频停止逻辑：跳过歌曲时没有停止当前播放的音频，直接创建新音频会导致多首歌同时播放。
• 无效的DOM操作：audio.innerHTML = ''毫无意义，Audio对象不是DOM元素，没有该属性。

修正后的代码 #

var musicpaths = [
    'assets/music/Dunderpatrullen%20-%20To%20The%20Moon.mp3',
    'assets/music/Big Giant Circles - Go For Distance.mp3',
    'assets/music/Bag Raiders - Shooting Stars.mp3',
    'assets/music/NOMA - Brain Power.mp3',
    'assets/music/Hans Zimmer - Time (Aviators Remix).mp3',
    'assets/music/Danny Baranowsky - Moonsong.mp3'
];
var audio = null;
var isPlaying = false;

function toggleMusic() {
    // 如果正在播放，先停止当前音频
    if (isPlaying) {
        audio.pause();
        audio = null; // 销毁旧音频对象
    }

    // 生成正确的随机索引（Math.random()返回0-1的小数，乘以数组长度后取整）
    const randomIndex = Math.floor(Math.random() * musicpaths.length);
    audio = new Audio("https://takeb1nzyto.space/" + musicpaths[randomIndex]);
    
    audio.play()
        .then(() => {
            isPlaying = true;
            document.getElementById("startmusicbutton").innerText = "跳过音乐";
            console.log("[Player]: 成功播放歌曲!");
        })
        .catch(err => {
            console.error("[Player]: 播放失败", err);
            isPlaying = false;
            document.getElementById("startmusicbutton").innerText = "播放音乐";
        });

    // 歌曲结束后自动播放下一首
    audio.onended = () => {
        isPlaying = false;
        toggleMusic();
    };
}

// 初始绑定按钮事件
document.getElementById('startmusicbutton').onclick = toggleMusic;

关键改进说明 #

• 统一事件处理：用一个toggleMusic函数处理所有点击逻辑，无需切换按钮的onclick事件，通过isPlaying状态判断是播放还是跳过。
• 正确的随机数生成：使用Math.floor(Math.random() * musicpaths.length)生成0到数组长度-1的整数索引，避免越界。
• 音频停止逻辑：点击跳过按钮时，先暂停当前音频并销毁对象，再创建新音频播放，避免多音频同时播放。
• 完善的状态管理：通过isPlaying变量跟踪播放状态，同步更新按钮文本。
• 添加播放错误处理：用play()返回的Promise捕获播放失败的情况，避免控制台报错且状态混乱。

内容的提问来源于stack exchange，提问作者3pm