HTML5 Audio Element is Restarting instead of Resuming using play(), pause()

Question

I'm trying to create a player that shows player in another div and fetching the src of HTML5 audio element from the "a" attribute, everything is working fine but when I pause the audio and then play it again, then instead of resuming it restarts the audio.

Here is my code:

var clicked_id;
var audio_var = new Audio();
var audio_pbar= document.getElementById('pbar');
audio_var.muted=true;

$('.ppbutton').on("click",function(){
  var datasrc = $(this).attr('data-src');
  clicked_id= $(this).attr('id');
  console.log(clicked_id);
  audio_var.pause();
  audio_pbar.pause();
  
  $('.ppbutton').not(this).each(function(){
      $(this).removeClass('fa-pause');
       $(this).addClass('fa-play');
  });
  
  if($(this).hasClass('fa-play')){
     console.log('play_click');
     audio_var.src=datasrc;
    audio_pbar.src=datasrc;
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     console.log(audio_var);
     audio_var.play();
    audio_pbar.play();
   } else {
     console.log('pause_click');
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     console.log(audio_var);
     audio_var.pause();
     audio_pbar.pause();
     //audio_var.src='';
     //audio_var.load();
     console.log(audio_var);
   }

  audio_var.onended = function() {
     $("#"+clicked_id).removeClass('fa-pause');
     $("#"+clicked_id).addClass('fa-play');
  };
  audio_pbar.onended = function() {
     $("#"+clicked_id).removeClass('fa-pause');
     $("#"+clicked_id).addClass('fa-play');
  };
  });

.wcontent{
  max-height:65vh;
overflow:scroll;
max-width:800px;
  margin:0 auto;
text-align:center;
}
.talk-wrap{
  max-width:800px;
  margin:0 auto;
  max-height:80px;
}
.wtalk{
  display:flex;
  align-items:center;
justify-content:space-between;
   max-height:80px;
padding:5px 20px;
}
.talk-wrap:nth-child(odd) .wtalk{
background-color:rgba(0,0,0,.1)
}
.ppbutton{
  font-size: 35px;
  cursor: pointer;
}
.material-icons-outlined{
  font-size:30px;
}
.wtime{
  font-size:10px;
  min-width:90px;
}
.wtitle{
  font-size:1vw;
  flex-grow:1;
}
.wshare-icon{
    min-width:70px;
}
@media only screen and (max-width: 600px) {

.material-icons-outlined{
  font-size:30px;
}
.wtime h1{
  font-size:15px;
  min-width:30px;
}
.wtitle{
  font-size:2vw;
  flex-grow:1;
}
.wshare-icon{
    min-width:50px;
   flex-shrink:2;
    flex-grow:0;
}
  .play,
.pause {
    width:25px;
    height: 230px;
    border: 0px;
}
}
#pbar{width:100%;}



      




                
                                                     task_alt
                    
                  
                  
                     This is the Title of talk...                                        
                  
                                                     share
                    
                  
                  
                    ( 4:23 )                                                            
                  
                  
                 

  

                
                                                     task_alt
                    
                  
                  
                     This is the Title of talk...                                        
                  
                                                     share
                    
                  
                  
                    ( 4:23 )                                                            
                  
                  
                 

  

                
                                                     task_alt
                    
                  
                  
                     This is the Title of talk...                                        
                  
                                                     share
                    
                  
                  
                    ( 4:23 )                                                            
                  
                  
                 

  

                
                                                     task_alt
                    
                  
                  
                     This is the Title of talk...                                        
                  
                                                     share
                    
                  
                  
                    ( 4:23 )                                                            
                  
                  
                 

  

                
                                                     task_alt
                    
                  
                  
                     This is the Title of talk...                                        
                  
                                                     share
                    
                  
                  
                    ( 4:23 )                                                            
                  
                  
                 

  

                
                                                     task_alt
                    
                  
                  
                     This is the Title of talk...                                        
                  
                                                     share
                    
                  
                  
                    ( 4:23 )                                                            
                  
                  
                 

  

                
                                                     task_alt
                    
                  
                  
                     This is the Title of talk...                                        
                  
                                                     share
                    
                  
                  
                    ( 4:23 )                                                            
                  
                  
                 

  

                
                                                     task_alt
                    
                  
                  
                     This is the Title of talk...                                        
                  
                                                     share
                    
                  
                  
                    ( 4:23 )

I'm using audio_pbar variable to declare the layer with progress bar and audio_var for the player without the progress bar. I don't know where I'm making mistake, please help in this. Thanks in advance!

Giovanna Di Meglio · Accepted Answer

The problem is that you override audio src when you pause and play again.

Try to check if src exists and it is the same was playing before paused it.

if(audio_pbar.src !== datasrc) audio_pbar.src=datasrc;

HTML5 Audio Element is Restarting instead of Resuming using play(), pause()

Answers (1)

Related Questions