title: Add audio to slide show
body: <p>I have created an html web with a slideshow script.
  It displays three slides with three pictures respectively.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;div class="mySlides"&gt;
      &lt;img onclick="play()" src="1.png"&gt;
      &lt;audio id="audio" src="one.mp3" &gt;&lt;/audio&gt;
  &lt;/div&gt;
  
  &lt;div class="mySlides"&gt;
      &lt;img onclick="play()" src="5.jpg"&gt;
      &lt;audio id="audio" src="five.mp3" &gt;&lt;/audio&gt;
  &lt;/div&gt;
  
  &lt;div class="mySlides"&gt;
      &lt;img onclick="play()" src="7.png"&gt;
      &lt;audio id="audio" src="seven.mp3" &gt;&lt;/audio&gt;
  &lt;/div&gt;
  
  
  &lt;div onclick="plusDivs(-1)"&gt;Re&lt;/div&gt;
  
  &lt;div onclick="plusDivs(1)"&gt;Av&lt;/div&gt;
  
  
  
  &lt;script&gt;
  
  function play() {
      var audio = document.getElementById("audio"); audio.play(); 
  }
  
  &lt;/script&gt;
  
  
  &lt;script&gt;
  
  var slideIndex = 1;
  showDivs(slideIndex);
  
  function plusDivs(n) {
    showDivs(slideIndex += n);
  }
  
  function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n &gt; x.length) {slideIndex = 1}    
    if (n &lt; 1) {slideIndex = x.length}
    for (i = 0; i &lt; x.length; i++) {
       x[i].style.display = "none";  
    }
    x[slideIndex-1].style.display = "block";  
  }
  
  &lt;/script&gt;
  </code></pre>