/    Sign up×
Community /Pin to ProfileBookmark

Set current time of html5 audio with link

Copy linkTweet thisAlerts:
Mar 22.2013

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>.
[/code]

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
});
[/CODE]

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
});
[/CODE]

Thanks.

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WindbrandauthorMar 24.2013 — Anyone?
Copy linkTweet thisAlerts:
@xelawhoMar 24.2013 — 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()
});[/CODE]
Copy linkTweet thisAlerts:
@WindbrandauthorMar 25.2013 — 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;
});

});
[/CODE]
Copy linkTweet thisAlerts:
@xelawhoMar 25.2013 — the problem is that you are mixing jQuery with vanilla js. [CODE]$('audio')[/CODE] 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;[/CODE]

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]

[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;
});

});

[/CODE]

making that last line really just the same as saying:
[CODE]document.getElementById("myaudio").currentTime=seconds;[/CODE]
×

Success!

Help @Windbrand spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...