单击照片时不会播放正确的音频文件

Question

我正在向网页添加多个音频文件。当您单击照片#1 时，将播放歌曲标题#1。但是，当我单击照片#2 时，播放的仍然是歌曲标题#1。我知道我的音频文件是正确的。我是否在下面的两个代码之间遗漏了一些将两者分开的东西？ （参见附图）所有图像都是相同的（这是一个记录图像），但是当单击它时，应该播放正确的歌曲。仅当单击图像时才应播放歌曲。我还有一个“停止”按钮，这样他们就可以根据需要停止播放歌曲。我不想为了播放歌曲而打开另一个页面。我希望只需单击照片即可在同一页面上播放该歌曲。

<audio id="audio_play">
   <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_play').play(); return false;" />Calpis Song Version 01</a>
<img src="http://www.websitename.com/index_files/stopicon.jpg" onClick="document.getElementById('audio_play').pause(); return false;" />



<audio id="audio_play">
   <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_play').play(); return false;" />Calpis Song Version 05</a>
<img src="http://www.osmondheaven.com/index_files/stopicon.jpg" onClick="document.getElementById('audio_play').pause(); return false;" />

谢谢你

Answer 1

正如我在评论中所写，对于不同的元素，您有两个相同的 ID“audio_play”，其中 1.) 是无效的 HTML，2.) 是问题的原因。

解决方案：对音频元素以及图像的 onClick 属性使用不同的 ID：

<audio id="audio_play_1">
   <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_play_1').play(); return false;" />Calpis Song Version 01</a>
<img src="http://www.websitename.com/index_files/stopicon.jpg" onClick="document.getElementById('audio_play_1').pause(); return false;" />



<audio id="audio_play_2">
   <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_play_2').play(); return false;" />Calpis Song Version 05</a>
<img src="http://www.osmondheaven.com/index_files/stopicon.jpg" onClick="document.getElementById('audio_play_2').pause(); return false;" />