一个页面中有多个audio标签，播放其中一个时暂停其他，只允许一个audio播放

最新推荐文章于 2025-06-06 10:13:56 发布

原创最新推荐文章于 2025-06-06 10:13:56 发布 · 1.1w 阅读

12 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种使用JavaScript来实现网页中多个音频文件播放控制的方法。通过监听播放事件并调用自定义函数，确保同一时间只有一个音频文件正在播放，从而避免了多个音频同时播放导致的声音混乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var audios = document.getElementsByTagName("audio");
// 暂停函数
function pauseAll() {
    var self = this;
    [].forEach.call(audios, function (i) {
        // 将audios中其他的audio全部暂停
        i !== self && i.pause();
    })
}
// 给play事件绑定暂停函数
[].forEach.call(audios, function (i) {
    i.addEventListener("play", pauseAll.bind(i));
})