www.webdeveloper.com
Results 1 to 5 of 5

Thread: Set current time of html5 audio with link

  1. #1
    Join Date
    Sep 2011
    Posts
    31

    Set current time of html5 audio with link

    Does anyone know how to set the currentTime property of html5 audio by clicking a link with a time? Similar to how Youtube does it? Say I click a link "3:10", it will instantly change the currently playing audio's currentTime to 3:10.

    Code:
    <audio controls loop class="sound">
        <source src="../../site/music/music1.mp3"/>
        <source src="../../site/music/music2.ogg"/>
    </audio>
    
    Lorem ipsum dolor sit amet, <b><a>3:10</a></b> consectetur adipiscing elit <b><a>4:10</a></b>.
    I'm mainly just having difficulty obtaining the time from the link. I only want to have one function covering all time links, obviously I don't want to have this:

    Code:
    $('.3_10').on('click', function(e){
        //set time to 3:10
    });
    $('.3_15').on('click', function(e){
        //set time to 3:15
    });
    $('.3_17').on('click', function(e){
        //set time to 3:17
    });
    $('.4_10').on('click', function(e){
        //set time to 4:10
    });
    Instead I need to fetch the time from the link like this:

    Code:
    $('.timelink').on('click', function(e){
        //get the time from the link
        //set currentTime to target time
    });

    Thanks.

  2. #2
    Join Date
    Sep 2011
    Posts
    31
    Anyone?

  3. #3
    Join Date
    Nov 2010
    Posts
    1,031
    well you don't give us much to work with in terms of the function you use to set the current time, so here's some semi-pseudo code:

    Code:
    $('.timelink').on('click', function(e){
        currentTime=$(this).text()
    });

  4. #4
    Join Date
    Sep 2011
    Posts
    31
    Well I thought $('audio').currentTime=[value]; sets the current time.
    I got some help with this script to convert MM:SS into seconds which currentTime accepts as a parameter, but it doesn't work still.

    Code:
    $(document).ready(function() {
    			
    	$('.timelink').on('click', function(e){ //convert MM:SS into seconds
    		var timestring = $(this).text();
    		var timestringslice = timestring.split(':');
    		var seconds = (+timestringslice[0]) * 60 + (+timestringslice[1]);
    		$('audio').currentTime=seconds;
    	});
    		
    });
    Last edited by Windbrand; 03-25-2013 at 01:46 AM.

  5. #5
    Join Date
    Nov 2010
    Posts
    1,031
    the problem is that you are mixing jQuery with vanilla js.
    Code:
    $('audio')
    returns a jQuery object, but javascript doesn't know anything about that, so will either just ignore it or throw an error.

    The simplest change you can make is to change the returned jQuery object into a real DOM element like this:
    Code:
    $('audio')[0].currentTime=seconds;
    but I would err on the side of caution and give my audio player an id and refer to it that way:
    Code:
    <audio id="myaudio" controls loop class="sound">
        <source src="../../site/music/music1.mp3"/>
        <source src="../../site/music/music2.ogg"/>
    </audio>
    Code:
    $(document).ready(function() {
    			
    	$('.timelink').on('click', function(e){ //convert MM:SS into seconds
    		var timestring = $(this).text();
    		var timestringslice = timestring.split(':');
    		var seconds = (+timestringslice[0]) * 60 + (+timestringslice[1]);
    		$('#myaudio')[0].currentTime=seconds;
    	});
    		
    });
    making that last line really just the same as saying:
    Code:
    document.getElementById("myaudio").currentTime=seconds;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles