如何为所有按钮关联通用JavaScript音频控制函数

你已经搞定了音效板的基础功能——点击其他按钮时能停掉当前音频、播放新音频，但现在给每个音频单独写Stop()、Stop2()这种函数太麻烦，下面给你两种通用方案，只用一套代码就能控制所有按钮：

方案1：用数据属性关联按钮与音频 #

核心就是给每个按钮加个data-audio-id属性，把它和对应音频的ID绑定，再写一个通用函数处理所有点击逻辑。

1. 修改HTML结构 #

给每个按钮添加data-audio-id，值对应其关联音频的ID：

<button type="button" class="btn btn-lg btn-block" data-audio-id="sound1">Dream for Dreaming</button>
<audio hidden preload="auto" id="sound1" controls onplay="pauseOthers(this);">
    <source src="AUDIO FILES/Dream for Dreaming.mp3" type="audio/mpeg">
</audio>

<!-- 其他按钮直接套用这个格式 -->
<button type="button" class="btn btn-lg btn-block" data-audio-id="sound2">Another Sound</button>
<audio hidden preload="auto" id="sound2" controls onplay="pauseOthers(this);">
    <source src="AUDIO FILES/Another Sound.mp3" type="audio/mpeg">
</audio>

2. 编写通用控制函数 #

替换原来的Stop()函数，写一个通用的toggleAudio()：

function toggleAudio(button) {
    // 从按钮的data属性中获取对应音频的ID
    const audioId = button.dataset.audioId;
    const audio = document.getElementById(audioId);
    
    // 找不到对应音频就直接返回
    if (!audio) return;
    
    if (audio.paused) {
        audio.play();
    } else {
        audio.pause();
        audio.currentTime = 0;
    }
}

3. 绑定按钮点击事件 #

直接在按钮的onclick中传入this（代表当前点击的按钮）：

<button type="button" class="btn btn-lg btn-block" data-audio-id="sound1" onclick="toggleAudio(this)">Dream for Dreaming</button>

方案2：事件委托（更清爽，无内联事件） #

要是不想在按钮里写内联onclick，可以用事件委托——给所有按钮的父元素绑定一个点击事件，自动识别并处理音效按钮的点击。

1. 给按钮统一加类名 #

给所有音效按钮添加一个共同的类，比如sound-btn：

<div class="sound-board">
    <button type="button" class="btn btn-lg btn-block sound-btn" data-audio-id="sound1">Dream for Dreaming</button>
    <button type="button" class="btn btn-lg btn-block sound-btn" data-audio-id="sound2">Another Sound</button>
    <!-- 新增按钮直接添加这个类和data属性即可 -->
</div>

2. 绑定事件委托 #

在JS中给父元素绑定点击事件，判断点击目标是音效按钮时执行逻辑：

// 页面加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
    const soundBoard = document.querySelector('.sound-board');
    
    soundBoard.addEventListener('click', function(e) {
        // 先判断是否点击了音效按钮
        if (e.target.classList.contains('sound-btn')) {
            const audioId = e.target.dataset.audioId;
            const audio = document.getElementById(audioId);
            
            if (!audio) return;
            
            if (audio.paused) {
                audio.play();
            } else {
                audio.pause();
                audio.currentTime = 0;
            }
        }
    });
});

3. 保留原有暂停函数 #

之前写的pauseOthers可以继续使用，保证播放新音频时自动停止其他音频：

function pauseOthers(ele) {
    $("audio").not(ele).each(function (index, audio) {
        audio.pause();
        audio.currentTime = 0;
    });
}

这样不管你后续新增多少个音频按钮，都不用再写新的控制函数，一套代码就能搞定所有逻辑。

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