user962206 user962206 - 1 year ago 161
Javascript Question

HTML5 audio clicking the progress bar to move to a different time

<script type="text/javascript" src=""></script>

var counter = 0;
var numOfTracks = $(".audio-player").length;
$("#message").text("Music started");

$("#message").text("Music paused");

$(".audio-player")[counter].currentTime = 0;
$("#message").text("Music Stopped");

$(".audio-player")[counter].currentTime = 0;

if(counter > numOfTracks - 1){
counter = 0 ;

$("#message").text("Next Track started");

$(".audio-player")[counter].currentTime = 0;
$("#message").text("Previous Track");

$(".audio-player").bind('timeupdate', function(){

//Gets the whole duration of the track.
//No idea kung saan ko ilalagay sa UI**IMPLEMENT LATER**
var track_length = $(".audio-player")[counter].duration;
var secs = $(".audio-player")[counter].currentTime;
var progress = (secs/track_length) * 100;

$('#progressbar').css({'width' : progress * 2});

//Will Use these later on production
//Track Minutes
var tcMins = parseInt(secs/60);
//Track Seconds
var tcSecs = parseInt(secs - (tcMins * 60));

if (tcSecs < 10) { tcSecs = '0' + tcSecs; }

// Display the time. REMEMBER
$('#timecode').html(tcMins + ':' + tcSecs);

/*Seperate this some time in the development*/

background-color: #A8A8A8 ;
width: 260px;
height: 55px;
padding: 8px;
border: 1px solid #d0d0d0;
/* Player Controls */

/*list items of controls */

#playerControls li {
display: block;
width: 32px;
height: 32px;
padding: 0px;
float: left;
cursor: pointer;

#playerControls { list-style: none; padding: 0px; margin: 0px;}

/*Images for each li items items */
#play-bt { background: url('icons/glyphicons_173_play.png'); background-repeat:no-repeat }
#pause-bt {background: url('icons/glyphicons_174_pause.png'); background-repeat:no-repeat;}
#next-bt { background: url('icons/glyphicons_176_forward.png'); background-repeat:no-repeat}
#prev-bt {background: url('icons/glyphicons_172_rewind.png'); background-repeat:no-repeat;}

/*Progress Stuff*/

/*Remember to manipulate its width via javascript later*/
height: 14px;
width: 256px;
float: left;
margin-left: 0px;

#progressbar {background-color: #1384bb; height:14px; width:0%; }

<audio class ="audio-player" name= "audio-player" src="04-zedd-stars_come_out_(terravita_remix).ogg" >
<p>Sorry your file doesn't support html5</p>
<!--Second Track For Testing Purposes-->
<audio class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" ></audio>

<div id="message"></div>
<div id = "playerContainer">

<ul id = "playerControls" >
<li id = "prev-bt"></li>
<li id= "play-bt"></li>
<li id= "pause-bt"></li>
<li id = "next-bt"></li>
<li id= "stop-bt" ></li>
<li><span id ="timecode"></span></li>

<div id="progressContainer"><!-- Progess bars container //-->
<div id="progressbar"></div>



How can I click a certain part of my progress bar so that I can move it to a different time in the track? I have no idea on how I am going to do that. any ideas ?

Answer Source

Given some html that looks like this:

<div class="container">
    <video class="video">
    <progress min="0" max="100" value="0"></progress>
    <div class="controls></div>

In order to seek to a specific time in the video as a result of a click event the js would look like this:

var player = document.querySelector("video");
var progressBar = document.querySelector("progress");
progressBar.addEventListener("click", seek);

function seek(e) {
    var percent = e.offsetX / this.offsetWidth;
    player.currentTime = percent * player.duration;
    progressBar.value = percent / 100;

However, this doesn't address how to seek on a click/drag (like most video players do).