Add audio to slide show

Question

I have created an html web with a slideshow script. It displays three slides with three pictures respectively.

I would like it to play a different mp3 when I click in each image. MY PROBLEM IS THAT IT REPRODUCES THE SAME SOUND IN THE THREE OF THEM.

<div class="mySlides">
    <img onclick="play()" src="1.png">
    <audio id="audio" src="one.mp3" ></audio>
</div>

<div class="mySlides">
    <img onclick="play()" src="5.jpg">
    <audio id="audio" src="five.mp3" ></audio>
</div>

<div class="mySlides">
    <img onclick="play()" src="7.png">
    <audio id="audio" src="seven.mp3" ></audio>
</div>


<div onclick="plusDivs(-1)">Re</div>

<div onclick="plusDivs(1)">Av</div>



<script>

function play() {
    var audio = document.getElementById("audio"); audio.play(); 
}

</script>


<script>

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

</script>

Answer 1

The problem you have is this code appears more then once

<audio id="audio

Element Id should be unique on the page.

To fix it

<img onclick="play(1)" src="7.png">
<audio id="audio-1" src="seven.mp3" ></audio>

function play(nr) {
  var audio = document.getElementById("audio-"+nr);
  audio.play(); 
}