如何实现点击不同图片按钮播放对应音频？现有代码仅播放单一声音

嘿，我一眼就看到你代码里的两处小错误了，这就是为啥只能播放同一个声音的原因：

问题分析 #

• play2函数的调用错误：你已经获取了audio2元素，但最后错误调用了audio.play()，相当于还是在播放第一个音频
• 第二个图片的事件绑定错误：第二个图片的onclick依然绑定的是play()，没有对应到负责播放第二个音频的play2()

修正后的完整代码 #

<script>
function play(){
  var audio = document.getElementById("audio");
  audio.play();
}
function play2(){
  var audio2 = document.getElementById("audio2");
  audio2.play(); // 这里修正为audio2.play()
}
</script>

<!-- 第一个图片绑定play()，对应第一个音频 -->
<img src="images/ah.png" onclick="play()" alt="Play Background Music">
<audio id="audio" src="bgmusic.mp3"></audio>

<!-- 第二个图片绑定play2()，对应第二个音频 -->
<img src="images/a.png" onclick="play2()" alt="Play War Sound">
<audio id="audio2" src="war.ogg"></audio>

可选优化方案 #

如果后续要添加更多音频按钮，重复写play1、play2这类函数会很冗余，推荐改成通用函数，通过参数传递音频ID：

<script>
// 通用播放函数，接收音频ID作为参数
function playAudio(audioId){
  const audio = document.getElementById(audioId);
  audio.play();
}
</script>

<img src="images/ah.png" onclick="playAudio('audio')" alt="Play Background Music">
<audio id="audio" src="bgmusic.mp3"></audio>

<img src="images/a.png" onclick="playAudio('audio2')" alt="Play War Sound">
<audio id="audio2" src="war.ogg"></audio>

这样不管新增多少个音频按钮，只需要复用这一个函数，代码维护起来更省心。

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