PDA

View Full Version : One of Beverley's Audio Players - Add Time



KennyP
07-28-2018, 07:52 AM
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
07-28-2018, 12:19 PM
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
07-28-2018, 06:51 PM
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
07-28-2018, 07:06 PM
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
07-29-2018, 03:53 AM
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
07-29-2018, 03:58 AM
Do you have a live example of the code? Like on an actual URL? I can take a look at it if so.

KennyP
07-29-2018, 05:33 AM
Yes, thank you. The site is here (http://www.billyjoeconor.com/). 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
07-29-2018, 06:15 AM
And let me get this straight you want it to play another random song once the previous song ends?

KennyP
07-29-2018, 06:33 AM
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
07-29-2018, 07:19 AM
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.

KennyP
07-29-2018, 07:33 AM
The CSS yes, but not the HTML. I would appreciate it if you would please show me how to do it.

Deadweight
07-29-2018, 07:38 AM
I am not sure where you want it so here is an example. If you did say also I am tired. It is 3:30am for me but here is the HTML and JS combined.

HTML:

<div id="audioplayer">
<div id="toggle-wrap" class="play">
<button id="toggle"></button>
</div>
<div class="timeline-wrap">
<div id="timeline">
<div id="playhead" style="margin-left: 48.0126px;"></div>
</div>
<div id="timeline-timedisplay"></div>
</div>
</div>

JAVASCRIPT:

music.ontimeupdate = function() {$('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));};

I will be heading to bed in a few also.

KennyP
07-29-2018, 07:46 AM
Thanks! I appreciate your help very much. I'll try to impement it now and I'll get back to you tomorrow with the results.

Thanks again!

KennyP
07-29-2018, 09:17 AM
Thanks again for the help. The time display works great! Below is a screenshot of it on the audioplayer.

Regarding the time format though, I think it would be better if the display would add zeros until 100 is reached. So, instead of 1/190, the display would be 001/190.

2 leading zeros would be added from 1 to 9 seconds, and 1 leading zero would be added from 10 to 99 seconds.

How is it added in the javascript ?

JAVASCRIPT:

music.ontimeupdate = function() {$('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));};

Deadweight
07-29-2018, 04:11 PM
Please take a look at:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Shouldn't be too hard to understand and is good for learning. What's that old saying...
"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime."

KennyP
07-29-2018, 07:37 PM
Thanks. Using padding as in the article, I couldn't figure out how to transition from using 2 zeros going from 1 to 9 and then using 1 zero going from 10 to 99.

In any case, I decided to leave that behind because I think it's easier for a user to see a minute / seconds format, 1.15 / 1:90, but after struggling with it for hours, why
is this not working?


music.ontimeupdate = function(){
$('$tracktime').html('width', music.currentTime / music.duration * 100 + '%')
}
})

Deadweight
07-29-2018, 08:35 PM
Did you combine that one to this one?

music.ontimeupdate = function() {$('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));};

EG


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

KennyP
07-29-2018, 09:19 PM
Yes, but it didn't work. I tried it as below, and it still doesn't work:

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

Deadweight
07-29-2018, 10:04 PM
Please check my code again. Second thing selector is wrong.

... $('#timeline-timedisplay')

KennyP
07-30-2018, 01:26 AM
Sorry, I should have mentioned sooner that I had changed the selector from '#timeline-timedisplay' to '#tracktime'
So, I continued using it 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.

Deadweight
07-30-2018, 02:34 AM
ID's need to be unique...

Deadweight
07-30-2018, 03:57 AM
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
07-30-2018, 08:58 AM
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
07-30-2018, 03:07 PM
$('#timeline').html('width', music.currentTime / music.duration * 100 + '%');

Should be

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

KennyP
07-30-2018, 04:23 PM
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
07-30-2018, 06:16 PM
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);