CODEWITHSUNDEEP
javascripthtml
Gabriel
Gabriel

Reputation: 41

HTML5 audio.pause() not working when audio element was generated by javascript

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.

Not working in Chrome, Opera, Firefox...

I tried everything possible in my view, but cannot figure it out.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<style>.ppbutton{font-size: 50px;cursor: pointer;}</style>  

<a id="ppbutton1" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3"></a>

<a id="ppbutton2" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"></a>

<script>
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);
   }
});
</script>

https://codepen.io/gugi25/pen/ywrXxE

Just pause or stop the audio generated by javascript.

Upvotes: 0

Views: 2410

Answers (1)

mvinayakam
mvinayakam

Reputation: 2988

A very minor change should help.

Move the new Audio declarion inside the If Hasclass. Your problem is created because everytime the user clicks on the button, a new audio element is created.

https://codepen.io/mvinayakam/pen/KEYZdG

$('.ppbutton').on("click",function(){
var datasrc = $(this).attr('data-src');
clicked_id= $(this).attr('id');
console.log(clicked_id);
if($(this).hasClass('fa-play')){
   console.log('play_click');
   audio_var = new Audio(datasrc);
   $(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');
   console.log(audio_var);
   audio_var.pause();
   //audio_var.src='';
   //audio_var.load();
   console.log(audio_var);
 }

Upvotes: 2

Related Questions