title: Why can not I use many play/pause buttons in one HTML page?
body: <p>In this <a href="https://www.w3.org/wiki/HTML/Elements/audio" rel="nofollow noreferrer">W3C</a> tutorial, I can make audio play/pause button. But when I put many buttons in one page. All buttons play the same sound track. It is the sound track of the first button only. I've changed the link of the audio <em>src</em> many times in all buttons I still having the same issue.</p>
  
  <p>I know the answer is simple but I don't know it. Is the issue due to the variable <em>my</em> or due to the function or something else?</p>
  
  <p>Thank you very much,</p>
  
  <p>I use the following code to create a button:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;audio id="myAudio" preload="none"
      &lt;audio id="myAudio"
  
   &lt;source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
           type='audio/mp4'&gt;
   &lt;source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
           type='audio/ogg; codecs=vorbis'&gt;
   Your user agent does not support the HTML5 Audio element.
  &lt;/audio&gt;
  &lt;button type="button" onclick="aud_play_pause()"&gt;Play/Pause&lt;/button&gt;
  &lt;script&gt;
  function aud_play_pause() {
    var my
  
  Audio = document.getElementById("myAudio");   if (myAudio.paused) {
      myAudio.play();   } else {
      myAudio.pause();   } }
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>