Correct Audio File Will Not Play When Photo is Clicked

Question

I'm adding multiple audio files to a webpage. When you click on photo #1, song title #1 will play. However, when I click on photo #2, it's still song title #1 that plays. And I know I have the audio file correct. Am I missing something in between the two codes below that will separate the two? (See attached picture) All of the images are the same (it's a record image), but when it's clicked, the proper song should play. Songs should only play when image is clicked on. I have a "stop" button as well, so they can stop the song if they want. I don't want another page to open in order for the song to play. I want the song to play on the same page by simply clicking on the photo.

<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;" />

Thank you

Answer 1

As I already wrote in a comment, you have two identical ids "audio_play" for different elements, which is
1.) invalid HTML
2.) the cause of your problem.

The solution:
Use different ids both for the audio elements as well as in the onClick attributes of the images:

<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;" />