<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');
};
});