Lemon Kazi Lemon Kazi - 3 months ago 22
jQuery Question

HTML audio player timeline functionality add

I am trying to add HTML audio player. I applied a code there play pause working. I need to add timeline functionality here. But don't know how to do that. Here another problem also I don't know how can I apply play pause in same button. Please help me. Below is my code. sample



#audioplayer{
width: 480px;
height: 60px;
margin: 50px auto auto auto;
border: solid;
}

#pButton{
height:60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
float:left;
outline:none;
}

.play, .play:hover, .pause:focus{background: url('http://www.alexkatz.me/codepen/images/play.png') ;}
.pause, .pause:hover, .play:focus{background: url('http://www.alexkatz.me/codepen/images/pause.png') ;}

#timeline{
width: 400px;
height: 20px;
margin-top: 20px;
float: left;
border-radius: 15px;
background: rgba(0,0,0,.3);

}
#playhead{
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: 1px;
background: rgba(0, 0, 0,1);

}

<audio id="player" src="http://www.alexkatz.me/codepen/music/interlude.mp3"></audio>
<div id="audioplayer">
<button id="pButton" class="play" onclick="document.getElementById('player').play()"></button>
<button id="pButton" class="pause" onclick="document.getElementById('player').pause()"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>




Answer

I use javascript, and change the dom and css. You need to learn audio event and property.

var audio = document.getElementById("player");
var btn = document.getElementById("pButton");
btn.addEventListener("click", function(){
   if (audio.paused) {
   	   audio.play();
       btn.classList.remove("pause");
       btn.classList.add("play");
   } else  {
   	   audio.pause();
       btn.classList.remove("play");
       btn.classList.add("pause");
   }
});
var playhead = document.getElementById("playhead"); audio.addEventListener("timeupdate", function(){ var duration = this.duration; var currentTime = this.currentTime; var percentage = (currentTime / duration) * 100; playhead.style.left = percentage * 4 + 'px'; });
#audioplayer{
    position: relative;
	width: 480px;
	height: 60px;
	margin: 50px auto auto auto;
    border: solid;
}

#pButton{
    height:60px; 
    width: 60px;
    border: none;
    float:left;
    outline:none;
}

#pButton.pause {
    background: url('http://www.alexkatz.me/codepen/images/play.png') no-repeat;
    background-size: 56px;
    background-position: center;
}

#pButton.play {
    background: url('http://www.alexkatz.me/codepen/images/pause.png') no-repeat;
    background-size: 56px;
    background-position: center;
}

#timeline{
	width: 400px;
	height: 20px;
	margin-top: 20px;
	float: left;
	border-radius: 15px;
	background: rgba(0,0,0,.3);
    position: relative;
}
#playhead{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: 1px;
	background: rgba(0, 0, 0,1);
    position: absolute;
    left: 0px;
}
<audio id="player" src="http://www.alexkatz.me/codepen/music/interlude.mp3"></audio>
<div id="audioplayer">
 <button id="pButton" class="pause"></button>
 <div id="timeline">    
	<div id="playhead"></div>
 </div>
</div>