如何修复JavaScript中Audio播放时出现的未捕获Promise异常

这个报错由两个问题共同导致：

• HTMLAudioElement的play()方法本质返回Promise对象，你没有对异常情况做捕获处理，中断类的报错会直接抛到控制台
• 每次播放前都强制调用load()重新加载音频资源，会直接打断还未完成的play()请求，触发DOM异常，而且音频实例初始化时已经绑定了资源地址，完全不需要每次播放都重复加载

基础修复：修改playColor()函数 #

移除不必要的load()调用，添加Promise异常捕获，即可解决控制台报错，同时保留每次点击从头播放音频的效果：

function playColor(color) {
    // 暂停当前音频并重置播放进度到开头，替代load()实现重头播放的效果
    audio[color].pause();
    audio[color].currentTime = 0;
    // 对play返回的Promise添加catch，捕获播放中断类的异常，不会抛到控制台
    audio[color].play().catch(() => {
        // 无需额外处理的话可以留空，需要调试时再加日志即可
    });
}

进阶优化：避免多个音频重叠播放 #

如果需要每次点击新的颜色时停止上一个正在播放的音频，可以添加全局变量记录当前播放的实例：

// 全局变量记录当前正在播放的音频实例
let currentPlaying = null;

function playColor(color) {
    // 先停止上一个正在播放的音频
    if (currentPlaying) {
        currentPlaying.pause();
        currentPlaying.currentTime = 0;
    }
    const targetAudio = audio[color];
    currentPlaying = targetAudio;
    targetAudio.play().catch(() => {});
}

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