点击图片无法播放对应正确音频文件的技术问题排查

核心问题 #

你代码里的两个<audio>标签使用了相同的id值audio_play，而HTML规范中id是页面内的唯一标识，document.getElementById()只会返回第一个匹配该id的元素，所以点击第二个播放图片时，实际触发的还是第一个音频的播放操作。

修复步骤 #

1. 给每个<audio>标签设置唯一的id，比如audio_play1和audio_play2
2. 对应修改播放图片、停止按钮的onClick事件，让它们调用对应id的音频元素的方法

修改后的完整代码示例 #

<!-- 第一组音频 -->
<audio id="audio_play1">
   <source src="http://www.websitename.com/audio/songtitle1.mp3" type="audio/ogg" />
   <source src="http://www.websitename.com/audio/songtitle1.mp3" type="audio/mpeg" />
</audio>
<img src="http://www.websitename.com/images/record.gif" onClick="document.getElementById('audio_play1').play(); return false;" />Calpis Song Version 01
<img src="http://www.websitename.com/index_files/stopicon.jpg" onClick="document.getElementById('audio_play1').pause(); return false;" />

<!-- 第二组音频 -->
<audio id="audio_play2">
   <source src="http://www.websitename.com/audio/songtitle2.mp3" type="audio/ogg" />
    <source src="http://www.websitename.com/audio/songtitle2.mp3" type="audio/mpeg" />
</audio>
<img src="http://www.osmondheaven.com/images/record.gif" onClick="document.getElementById('audio_play2').play(); return false;" />Calpis Song Version 05
<img src="http://www.osmondheaven.com/index_files/stopicon.jpg" onClick="document.getElementById('audio_play2').pause(); return false;" />

额外优化建议 #

如果后续要添加更多音频，建议用类名配合事件委托的方式管理，避免重复写相同的onClick代码，让代码更简洁易维护。

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