如何让同一个JavaScript函数适配不同ID实现多音频独立播放控制

你只需要给原函数增加入参、修改调用逻辑即可：

1. 改造togglePlay函数 #

给函数添加音频ID作为入参，替换原硬编码的固定ID：

function togglePlay(audioId) {
  var myAudio = document.getElementById(audioId);
  return myAudio.paused ? myAudio.play() : myAudio.pause();
};

2. 修改按钮的调用逻辑 #

每个按钮触发togglePlay时，传入对应要控制的音频元素ID即可：

<audio id="myAudio1" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>
<!-- 控制myAudio1的按钮，传入对应ID -->
<input type="button" value="sound" onclick="togglePlay('myAudio1')" />

<audio id="myAudio" src="https://clubajax.pythonanywhere.com/media/contact/backgroundM.mp3" preload="auto"></audio>
<!-- 控制myAudio的按钮，传入对应ID -->
<input type="button" value="sound" onclick="togglePlay('myAudio')" />

改造完成后，每个按钮只会控制对应ID的音频，播放暂停逻辑完全独立，不会互相干扰。

内容的提问来源于stack exchange，提问作者Akash Kumar Singh