One of Beverley's Audio Players - Add Time

[Deadweight]

ID's need to be unique...

[Deadweight]

Sorry, I should have mentioned sooner that I had changed the selector from '#timeline-timedisplay' to '#tracktime'

I used '#tracktime' to be consistent:

<audio id="music" preload="auto">
	<source src="<?php echo $fname; ?>"/>
</audio>

<div id="audioplayer">
	<div id="toggle-wrap" class="play">
		<button id="toggle"></button>
	</div>
	<div class="timeline-wrap">
		<div id="timeline">
			<div id="playhead"></div>
  		</div>
	<div id="tracktime"></div>
    </div>
</div>

I tried the code again - unfortunately, it doesn't work.

$('$tracktime').html('width', music.currentTime / music.duration * 100 + '%');

Shouldnt that be (also note that you are using a $ and not #

$('#timeline').html('width', music.currentTime / music.duration * 100 + '%');

[KennyP]

This is what I'm entering and it still doesn't work. What am I doing wrong?

 <script>

 music.ontimeupdate = function(){
    $('#timeline').html('width', music.currentTime / music.duration * 100 + '%');
    $('#tracktime').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));
  }
	
</script>

[Deadweight]

$('#timeline').html('width', music.currentTime / music.duration * 100 + '%');

Should be

$('#timeline').css('width', music.currentTime / music.duration * 100 + '%');

[KennyP]

This follolwing still displays in seconds. Plus, it changes the timeline as in the attached screenshot.

<script>
 music.ontimeupdate = function(){
    $('#timeline').css('width', music.currentTime / music.duration * 100 + '%');
    $('#tracktime').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));
  }	
</script>

[Deadweight]

What are you trying to do? Are you trying to convert the seconds to minutes and seconds? If so then you shouldnt need my help with that. That is math calculation related. You just need to take

$('#tracktime').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));

Remove the other line and convert the Math.ceil into its own vars and calculate seconds and minutes. Hopefully, you know that there are 60 seconds in a min.

An example:

var tsecs = 232;
var rsecs = tsecs % 60;
var rmins = Math.floor(tsecs/60);