求助：解决Greasemonkey脚本中JS音频文件同时播放的问题

嘿，我懂你现在的困扰——本来想让两个音频按顺序播放，结果它们同时响起来了，确实挺闹心的。好在HTML5 Audio元素提供了ended事件，刚好能帮我们实现“播放完一个再播下一个”的需求，在Greasemonkey脚本里用这个方法完全没问题。

这里有个直接可用的解决方案，核心思路是给第一个音频绑定播放结束的监听事件，只有当它播放完毕后，再触发第二个音频的播放：

// 封装一个通用的音频播放函数，支持播放完成后的回调
function playAudio(audioUrl, onFinish) {
    const audio = new Audio(audioUrl);
    
    // 监听音频播放结束事件
    audio.addEventListener('ended', () => {
        if (typeof onFinish === 'function') {
            onFinish();
        }
    });
    
    // 播放音频，并处理可能的错误（比如浏览器自动播放限制）
    audio.play().catch(error => {
        console.error(`播放 ${audioUrl} 时出错:`, error);
    });
}

// 先播放five.mp3，播放完成后自动播放six.mp3
playAudio('five.mp3', () => {
    playAudio('six.mp3');
});

为什么这个方法有效？ #

• 我们创建的playAudio函数会为每个音频实例绑定ended事件，这个事件只会在音频完全播放完毕后触发。
• 第一个音频播放结束后，才会调用传入的回调函数，去启动第二个音频的播放，从根本上避免了同时播放的问题。
• 额外加上了play()的错误捕获，能帮你排查比如浏览器自动播放策略限制这类常见问题。

如果你的脚本里有更多音频需要按顺序播放，还可以把这个逻辑扩展成一个播放队列，不过针对你当前的两个音频需求，上面的代码就足够好用啦。

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