Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 26

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

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

    Default

    The CSS yes, but not the HTML. I would appreciate it if you would please show me how to do it.

  2. #12
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    509
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

    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:
    Code:
    <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:
    Code:
    music.ontimeupdate = function() {$('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));};
    I will be heading to bed in a few also.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

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

    KennyP (07-29-2018)

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

    Default

    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!

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

    Default

    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:
    Code:
    music.ontimeupdate = function() {$('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));};
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	WORKING-TIME-DISPLAY.jpg 
Views:	31 
Size:	32.0 KB 
ID:	6310  
    Last edited by KennyP; 07-29-2018 at 09:52 AM.

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

    Default

    Please take a look at:
    https://developer.mozilla.org/en-US/...tring/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."
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

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

    KennyP (07-29-2018)

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

    Default

    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?

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

  9. #17
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    509
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

    Did you combine that one to this one?
    Code:
    music.ontimeupdate = function() {$('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));};
    EG
    Code:
     music.ontimeupdate = function(){
        $('$tracktime').html('width', music.currentTime / music.duration * 100 + '%');
        $('#timeline-timedisplay').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));
      }
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

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

    Default

    Yes, but it didn't work. I tried it as below, and it still doesn't work:
    Code:
     music.ontimeupdate = function(){
        $('$tracktime').html('width', music.currentTime / music.duration * 100 + '%');
        $('#tracktime').html(Math.ceil(music.currentTime) + ' / ' + Math.ceil(music.duration));
      }
    Last edited by KennyP; 07-29-2018 at 09:24 PM.

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

    Default

    Please check my code again. Second thing selector is wrong.

    ... $('#timeline-timedisplay')
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

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

    KennyP (07-30-2018)

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

    Default

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

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
  •