如何一键切换多个audio元素的音频源路径？

针对你的4轨播放器需求，我们可以通过简化代码逻辑，实现点击按钮同时切换所有音频轨道的源文件，以下是修改后的完整实现：

优化后的HTML代码 #

<div class="list-of-songs">
  <button onclick="loadSong('song1')">Song 1</button>
  <button onclick="loadSong('song2')">Song 2</button>
  <button onclick="loadSong('song3')">Song 3</button>
</div> 

<div class="multitrack__control-panel">
    <button id="pause" onclick="pauseAllTracks()"></button>
    <button id="play" onclick="playAllTracks()"></button>
    <button id="stop" onclick="stopAllTracks()"></button>
        
    <audio id="track1" class="stem" src="audio/song1track1.wav"></audio>
    <audio id="track2" class="stem" src="audio/song1track2.wav"></audio>
    <audio id="track3" class="stem" src="audio/song1track3.wav"></audio>
    <audio id="track4" class="stem" src="audio/song1track4.wav"></audio>
</div>

优化后的JavaScript代码 #

// 获取所有音频轨道元素，用类名统一获取更高效
const tracks = document.querySelectorAll('.stem');

// 播放所有轨道
function playAllTracks() {
    tracks.forEach(track => track.play());
}

// 暂停所有轨道
function pauseAllTracks() {
    tracks.forEach(track => track.pause());
}

// 停止所有轨道（暂停并重置播放位置）
function stopAllTracks() {
    tracks.forEach(track => {
        track.pause();
        track.currentTime = 0;
    });
}

// 加载指定歌曲的所有轨道
function loadSong(songName) {
    // 先停止当前播放的音频，避免切换时混音
    stopAllTracks();
    
    // 遍历所有轨道，逐个修改音频源
    tracks.forEach((track, index) => {
        // 索引从0开始，轨道编号需+1匹配文件名规则
        track.src = `audio/${songName}track${index + 1}.wav`;
        // 可选：取消注释下方代码，加载新音频后自动播放
        // track.play();
    });
}

关键逻辑说明 #

1. 统一获取轨道元素：用document.querySelectorAll('.stem')一次性获取所有音频轨道，替代逐个getElementById，代码更简洁易维护。
2. 通用切换函数：loadSong函数接受歌曲名称参数，通过遍历轨道列表批量修改src属性，实现一次点击切换所有轨道源。
3. 切换前停止播放：切换歌曲时先调用stopAllTracks，避免新旧音频同时播放，提升用户体验。
4. 函数命名规范化：把原有的play、pause、stop改成更清晰的playAllTracks、pauseAllTracks、stopAllTracks，避免和浏览器内置函数重名。

如果想改用HTML列表选择歌曲，只需要把按钮换成列表项并绑定相同函数即可，示例：

<ul class="list-of-songs">
  <li onclick="loadSong('song1')">Song 1</li>
  <li onclick="loadSong('song2')">Song 2</li>
  <li onclick="loadSong('song3')">Song 3</li>
</ul>

记得给列表项添加CSS样式，让它看起来具备可点击的交互性。

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