如何为多个audio标签添加loop属性？Javascript新手求助

原代码的问题 #

• 事件绑定逻辑完全错乱：你把页面加载事件DOMContentLoaded嵌套到了每个音频的click事件回调里，这意味着只有点击音频后，复选框的循环控制事件才会被绑定，而且会重复绑定多次，完全不符合需求。
• 错误操作集合对象：audioElement是通过getElementsByClassName拿到的音频元素集合，不能直接给整个集合设置loop属性，必须遍历集合里的每一个音频单独设置。
• 复选框选择可以更精准：给复选框加个id能避免通过name选择可能出现的冲突，同时加个标签也更友好。

修正后的代码 #

HTML（仅调整复选框，其余结构保留）

<div id="multitrack__control-panel" class="multitrack__control-panel">
    <button id="pause" onclick="pause()">Pause</button>
    <button id="play" onclick="play()">Play</button>
    <button id="stop" onclick="stop()">Stop</button>
    <!-- 给复选框加id和标签，提升易用性 -->
    <label for="loop-toggle">循环播放</label>
    <input type="checkbox" id="loop-toggle" name="loop" autocomplete="off" />
    
    <audio id="track1" class="stem" src="audio/track1.wav"></audio>
    <audio id="track2" class="stem" src="audio/track2.wav"></audio>
    <audio id="track3" class="stem" src="audio/track3.wav"></audio>
    <audio id="track4" class="stem" src="audio/track4.wav"></audio>
    <script src="js/multitrack.js"></script>
</div>

JS（重构事件逻辑）

// 页面加载完成后再执行所有逻辑
document.addEventListener("DOMContentLoaded", function() {
    // 获取所有音频轨道
    const audioTracks = document.getElementsByClassName("stem");
    // 获取循环复选框
    const loopCheckbox = document.getElementById("loop-toggle");

    // 给复选框绑定状态变化事件
    loopCheckbox.addEventListener("change", function() {
        // 遍历每一个音频，设置循环属性
        for (let i = 0; i < audioTracks.length; i++) {
            audioTracks[i].loop = this.checked;
        }
    });
});

// 补充播放/暂停/停止的基础实现（如果你的原有函数没问题，可以直接替换）
function play() {
    for (let track of document.getElementsByClassName("stem")) {
        track.play();
    }
}

function pause() {
    for (let track of document.getElementsByClassName("stem")) {
        track.pause();
    }
}

function stop() {
    for (let track of document.getElementsByClassName("stem")) {
        track.pause();
        track.currentTime = 0;
    }
}

核心说明 #

• 把所有初始化逻辑放在DOMContentLoaded里，确保页面元素加载完成后再操作，避免找不到元素的问题。
• 必须遍历音频集合，给每个单独的音频元素设置loop属性，这才是有效的设置方式。
• 复选框加id后选择更精准，加标签能让用户知道这个复选框的作用。

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