title: HTML5 audio.pause() not working when audio element was generated by javascript
body: <p>i have problem to pause or stop played music. audio.pause() is simple not working. I tried everything, even to change source and load it again.
  Big thanx for help.</p>
  
  <p>Not working in Chrome, Opera, Firefox...</p>
  
  <p>I tried everything possible in my view, but cannot figure it out.</p>
  
  <pre><code>&lt;link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'&gt;
  &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'&gt;&lt;/script&gt;
  &lt;style&gt;.ppbutton{font-size: 50px;cursor: pointer;}&lt;/style&gt;  
  
  &lt;a id="ppbutton1" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3"&gt;&lt;/a&gt;
  
  &lt;a id="ppbutton2" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"&gt;&lt;/a&gt;
  
  &lt;script&gt;
  var clicked_id;
  var audio_var;
  
  $('.ppbutton').on("click",function(){
    var datasrc = $(this).attr('data-src');
    clicked_id= $(this).attr('id');
    console.log(clicked_id);
    audio_var = new Audio(datasrc);
    if($(this).hasClass('fa-play')){
       console.log('play_click');
       $(this).removeClass('fa-play');
       $(this).addClass('fa-pause');
       console.log(audio_var);
       audio_var.play();
     } else {
       console.log('pause_click');
       $(this).removeClass('fa-pause');
       $(this).addClass('fa-play');
       audio_var.pause();
       //audio_var.src='';
       //audio_var.load();
       console.log(audio_var);
     }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/gugi25/pen/ywrXxE" rel="nofollow noreferrer">https://codepen.io/gugi25/pen/ywrXxE</a></p>
  
  <p>Just pause or stop the audio generated by javascript.</p>