One of Beverley's Audio Players - Add Time

[KennyP]

Hi:

Hopefully you, Beverley, are the one who will respond to my post:

I love this player that you have posted on your website and I'm using it, but, I have failed at trying to add

the elapsed-track-time / track-length in the player's right side, formatted like so - 17 / 235

Please show me how it's done?

Regards,

Kenny

<?php 
$files = glob('bgAudio/*.mp3');  // get all .mp3 files in the music directory
$fname = $files[array_rand($files)]; // get a random filename
//echo $fname;
$ftext = ucwords(str_replace('_', ' ', basename($fname, '.mp3'))); // get song title from $fname for display 
//echo
?>
        
<audio id="music" preload="auto">
	<source src="<?php echo $fname; ?>"/>
</audio>

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

<div style="width:100%; height:50px !important;" id="infobox" ><p>You are listening to:</p><p><span style="font-style:normal; font-weight:600;">'&nbsp;<?php echo $ftext; ?>&nbsp;'</span></p></div>
<?php } ?>
<script>

<!--[if gte IE 9]><!-->
<script>
var 	infobox = document.getElementById('infobox'),
	music = document.getElementById('music'),
	duration,
	toggle = document.getElementById('toggle-wrap'),
	playhead = document.getElementById('playhead'),
	timeline = document.getElementById('timeline'),
	timelineWidth = timeline.offsetWidth - playhead.offsetWidth,
	cookie = getCookie('fofrandomaudiotl');

window.addEventListener('resize', function() { // resize timeline with window
	timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
	}, false);

music.addEventListener('playing', function() { // while playing
	if (cookie != 'audiooff') { 
		toggle.className = 'pause';
		infobox.className = 'show'; 
		infobox.style.display = 'block';
		}
	}, false);

music.addEventListener('ended', function() { // while paused
        toggle.className = 'play';
        infobox.className = 'hide';
	}, false);

music.addEventListener('timeupdate', timeUpdate, false);

timeline.addEventListener('click', function(event) { // make timeline clickable
	moveplayhead(event);
	music.currentTime = duration * clickPercent(event);
	if (!music.pause) {
		toggle.className = 'pause';
		infobox.className = 'show'; 
		}
	}, false);

function clickPercent(e) { // returns click as decimal (.77) of total timelineWidth
	return (event.pageX - timeline.offsetLeft) / timelineWidth;
	}

playhead.addEventListener('mousedown', mouseDown, false); // make playhead draggable
window.addEventListener('mouseup', mouseUp, false); // make playhead draggable

var onplayhead = false;
function mouseDown() {
	onplayhead = true;
	window.addEventListener('mousemove', moveplayhead, true);
	music.removeEventListener('timeupdate', timeUpdate, false);
	}

function mouseUp(e) { // get input from mouse clicks
	if (onplayhead == true) {
		moveplayhead(e);
        	window.removeEventListener('mousemove', moveplayhead, true);
		music.currentTime = duration * clickPercent(e);
		music.addEventListener('timeupdate', timeUpdate, false);
		}
	onplayhead = false;
	}

function moveplayhead(e) { // moves playhead as user drags
	var newMargLeft = e.pageX - timeline.offsetLeft;
	if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
		playhead.style.marginLeft = newMargLeft + 'px';
		}
	if (newMargLeft < 0) {
		playhead.style.marginLeft = '0px';
		}
	if (newMargLeft > timelineWidth) {
		playhead.style.marginLeft = timelineWidth + 'px';
		}
	}

function timeUpdate() { // sync playhead position with current point in audio
	var playPercent = timelineWidth * (music.currentTime / duration);
	playhead.style.marginLeft = playPercent + 'px';
	if (music.currentTime == duration) {
		toggle.className = 'play';
		}
	}

function play() { // play/pause toggle
	if (music.paused) {
		music.play();
		toggle.className = 'pause';
		infobox.className = 'show';
        	infobox.style.display = 'block';
		document.cookie = 'fofrandomaudiotl=audioon; max-age=0; path=/'; // delete cookie
		} else {
		music.pause();
		toggle.className = 'play';
		infobox.className = 'hide';
        	if (document.all && !window.atob) { infobox.style.display = 'none'; } // IE9
		document.cookie = 'fofrandomaudiotl=audiooff; max-age="+60*60*24*30+"; path=/'; // set cookie for 30 days
		}
	}

toggle.addEventListener('click', play, false); // toggle action

music.addEventListener('canplaythrough', function() { // get audio duration
	duration = music.duration;
	}, false);

function getCookie(name) {
	var value = new RegExp(name + "=([^;]+)").exec(document.cookie);
	return (value != null) ? unescape(value[1]) : null;
	}

/* remove this block of code to stop auto-play */
/*window.addEventListener('load', function(){ // auto-play
	if (cookie != 'audiooff') { 
		play(); 
		} else {
        	toggle.className = 'play';
        	infobox.style.display = 'none';
		}
	}, false); */
</script>
<!--<![endif]-->

[coothead]

Hopefully you, Beverley, are the one who will respond to my post:

Unfortunately, Beverley hasn't been seen on these forums
for round about a year, and doesn't have PM's activated.

All is not lost though, as you could try contacting her
through her web site - http://fofwebdesign.co.uk/.

I hope that this helps.

coothead

[KennyP]

Thanks very much coothead. Actually, I already sent Beverley a message from her website contact page
but I haven't received a response. I thought she might respond here. This is an audioplayer she has on
her website.

In any case, I really would like to add a timer to it as I describe above. Could you please help me with it?

[coothead]

Actually, I already sent Beverley a message from her website
contact page but I haven't received a response.

How long have you been waiting for her to reply?

coothead

[KennyP]

I sent her a message a couple of weeks ago but I've had no reply. I hope she's ok. She has always been very kind and very helpful to me.

[Deadweight]

Do you have a live example of the code? Like on an actual URL? I can take a look at it if so.

[KennyP]

Yes, thank you. The site is here. It plays one song after the welcome/splash page on the browser's first visit. In order for the audioplayer to display another time and play again, the browser has to be closed and then reopened.

[Deadweight]

And let me get this straight you want it to play another random song once the previous song ends?

[KennyP]

No. It already does all that. It plays a different song on every browser visit.

I just want ithe player to display the current-elapsed-time of a song followed by the total time of the song.

For instance, if a song is 190 seconds long and it has played the first 15 seconds of it, the display would read 15/190

So, the right side of the player would display 15/190

[Deadweight]

You will need something like this:
View console for the output.

music.ontimeupdate = function() {console.log(music.currentTime, music.duration);};

I am not going to code the CSS and the HTML because you should at least be able to do that.