如何为多个audio元素设置标识以实现JavaScript单独调用？

1. 给每个audio元素添加唯一ID与样式类 #

首先在HTML中为每个audio元素设置唯一的id属性，同时通过class属性标记不同的样式变体，src属性指定对应的MP3文件：

<!-- 第一个音频：样式变体A -->
<audio id="audio-story" class="audio-style-a" src="story.mp3" controls></audio>

<!-- 第二个音频：样式变体B -->
<audio id="audio-music" class="audio-style-b" src="background-music.mp3" controls></audio>

<!-- 第三个音频：样式变体C -->
<audio id="audio-podcast" class="audio-style-c" src="podcast-clip.mp3" controls></audio>

• id必须唯一，用于后续精准定位单个元素；
• class用来分组不同样式的音频，方便批量设置CSS样式。

2. 通过ID单独获取并操作音频元素 #

替换原来的document.querySelector('audio')，改用getElementById或带ID选择器的querySelector单独获取每个音频元素，就能对其进行独立的JS操作：

// 获取单个音频元素
const storyAudio = document.getElementById('audio-story');
const musicAudio = document.querySelector('#audio-music');

// 对单个元素执行自定义逻辑
// 示例：为故事音频绑定播放事件
storyAudio.addEventListener('play', () => {
  storyAudio.classList.add('is-playing');
});

// 示例：调整背景音乐音量
musicAudio.volume = 0.6;

3. 批量处理多个音频元素（可选） #

如果需要统一处理所有音频同时保留差异化逻辑，可用querySelectorAll获取全部audio元素，再遍历区分操作：

const allAudios = document.querySelectorAll('audio');

allAudios.forEach(audio => {
  // 根据ID区分逻辑
  if (audio.id === 'audio-podcast') {
    audio.muted = false; // 播客音频默认不静音
  }
  // 根据样式类区分逻辑
  if (audio.classList.contains('audio-style-a')) {
    audio.playbackRate = 1.2; // 样式A的音频加快播放速度
  }
});

4. 用类选择器实现样式变体 #

结合HTML中的class属性，在CSS中为不同变体设置独立样式：

/* 样式变体A */
.audio-style-a {
  border: 2px solid #e74c3c;
  border-radius: 12px;
  padding: 8px;
}

/* 样式变体B */
.audio-style-b {
  background-color: #f8f9fa;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 播放状态样式 */
.is-playing {
  outline: 3px solid #2ecc71;
}

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