<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<!---------------------------------start-------->
<div class="wcontent">
<!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton3 music" class="ppbutton fa fa-play" data-src="https://www.ee.columbia.edu/~dpwe/sounds/instruments/flute-C6.wav"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton2" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton3" class="ppbutton fa fa-play" data-src="https://www.ee.columbia.edu/~dpwe/sounds/instruments/flute-C6.wav"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton3" class="ppbutton fa fa-play" data-src="https://www.ee.columbia.edu/~dpwe/sounds/instruments/flute-C6.wav"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton1" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton3" class="ppbutton fa fa-play" data-src="https://www.ee.columbia.edu/~dpwe/sounds/instruments/flute-C6.wav"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton2" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton1" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3"></a>
                 </div>
</div>
<!---------------------------------end-------->

</div>
<div class="wcontent"> <h1> I would like audio progress bar to show here of the currently playing audio </h1>
  </div>

.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;
}
}

var clicked_id;
var audio_var = new Audio();


$('.ppbutton').on("click",function(){
  var datasrc = $(this).attr('data-src');
  clicked_id= $(this).attr('id');
  console.log(clicked_id);
  audio_var.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;
     $(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);
   }

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