Page 1 of 3 123 LastLast
Results 1 to 10 of 26

Thread: One of Beverley's Audio Players - Add Time

  1. #1
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default One of Beverley's Audio Players - Add Time

    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

    Code:
    <?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>
    Code:
    <!--[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]-->
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	beverley-player.jpg 
Views:	16 
Size:	89.9 KB 
ID:	6309  
    Last edited by KennyP; 07-29-2018 at 05:40 AM.

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,197
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    Quote Originally Posted by KennyP View Post
    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
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    KennyP (07-28-2018)

  4. #3
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    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?

  5. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,197
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    Quote Originally Posted by KennyP View Post
    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
    ~ the original bald headed old fart ~

  6. The Following User Says Thank You to coothead For This Useful Post:

    KennyP (07-29-2018)

  7. #5
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    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.

  8. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    508
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

    Do you have a live example of the code? Like on an actual URL? I can take a look at it if so.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  9. The Following User Says Thank You to Deadweight For This Useful Post:

    KennyP (07-29-2018)

  10. #7
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    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.
    Last edited by KennyP; 07-29-2018 at 05:48 AM.

  11. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    508
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

    And let me get this straight you want it to play another random song once the previous song ends?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  12. #9
    Join Date
    Dec 2009
    Location
    NY NY USA
    Posts
    228
    Thanks
    158
    Thanked 1 Time in 1 Post

    Default

    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
    Last edited by KennyP; 07-29-2018 at 07:18 AM.

  13. #10
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    508
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

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

    Code:
    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.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  14. The Following User Says Thank You to Deadweight For This Useful Post:

    KennyP (07-29-2018)

Similar Threads

  1. Database for players and teams?
    By Exploding Art in forum MySQL and other databases
    Replies: 0
    Last Post: 12-07-2012, 10:27 PM
  2. Replies: 13
    Last Post: 10-16-2012, 02:31 AM
  3. Replies: 5
    Last Post: 10-07-2012, 09:31 AM
  4. flash players
    By d-machine in forum Looking for such a script or service
    Replies: 2
    Last Post: 08-08-2009, 10:41 AM
  5. web players
    By d-machine in forum PHP
    Replies: 2
    Last Post: 06-10-2009, 01:10 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •