Setting HTML5 Audio Position

Setting HTML5 audio position

Works on my chrome...

$('#audio').bind('canplay', function() {
  this.currentTime = 29; // jumps to 29th secs
});

HTML5 Audio Tag - Start and end at position

There is a timerange parameter available in MediaElement's src attribute which does exactly this.

://url/to/media.ext#t=[starttime][,endtime]

Note that if you enable the controls on these elements, then the user will be able to seek to different positions.

Example :

var url = 'https://upload.wikimedia.org/wikipedia/commons/4/4b/011229beowulf_grendel.ogg';var slice_length = 12;var audio, start, end;for (var i = 0; i < 10; i++) {  start = slice_length * i; // set the start  end = slice_length * (i + 1); // set the end  // simply append our timerange param  audio = new Audio(url + '#t=' + start + ',' + end);  audio.controls = true; // beware this allows the user to change the range
  document.body.appendChild(document.createTextNode(start + 's ~ ' + end + 's'));  document.body.appendChild(document.createElement('br'));  document.body.appendChild(audio);  document.body.appendChild(document.createElement('br'));}

Is it possible to set the position and size of audio controls?

There is no way to control the html5 audio player controls via CSS for html5 audio tag. Though you may want to leave the default controls and implement your own controls via javascript.

However there is a nice existing html5 themable player called jPlayer which proves to be very useful.

HTML5 audio starts from the wrong position in Firefox

I work on SoundJS and while implementing audio sprites recently ran into similar issues. According to the spec, setting the position of html audio playhead can be inaccurate by up to 300ms. So that could explain some of the issues you are seeing.

Interestingly, your fiddle plays correctly for me in FF 28 on win 8.1 if I just let it play through from the start.

There are also some known issues with audio length accuracy that may also have an effect, which you can read about here.

If you want precision, I would definitely recommend using Web Audio where possible or a library like SoundJS.

Hope that helps.

How to set the currentTime in HTML5 audio object when audio file is online?

I found a solution to my problem, if not exactly an explanation.

My hosting provider uses a CDN, for which it must replace resource's URLs with those of a different domain. The URLs of my audio resources are dynamically constructed by JS, because there's a random element to them; as such, the deployment process that replaces URLs wasn't catching those for my audio files. To get around this, I manually excluded the audio files from the CDN, meaning I could refer to them using relative file paths.

This was how things stood when I was having this issue.

Then, due to a separate issue, I took a different approach: I got the audio files back on the CDN and wrote a function to extract the domain name I needed to use to retrieve the files. When I did that, suddenly I found that all my problems to do with setting currentTime had disappeared. Somehow, not having the files on the CDN was severely interfering with the browser's ability to load them in an orderly manner.

If anyone can volunteer an explanation for why this might have been, I'd be very curious to hear it...

Edit

I've been working on another project which involves streaming audio, this time also with PWA support, so I had to implement a caching mechanism in my service worker for audio files. Through this guide I learned all about the pitfalls of range requests, and understand now that failing to serve correct responses to requests with range headers will break seeking on some browsers.

It seems that in the above case, when I excluded my files from the CDN they were served from somewhere that didn't support range headers. When I moved them back on the CDN this was fixed, as it must have been built with explicit support for streaming media.

Here is a good explanation of correct responses to range requests. But for anyone having this issue while using a third party hosting service, it suffices to know that probably they do not support range headers for streaming media. If you want to verify this is the case, you can query the audio object's duration. At least in Safari's case, the duration is set to infinity when it can't successfully make a range request, and at that point seeking will be disabled.

HTML audio can't set currentTime

You need to do something like this (if you use jQuery)

$('#elem_audio').bind('canplay', function() {
  this.currentTime = 10;
});

or in Javascript

var aud = document.getElementById("elem_audio");
aud.oncanplay = function() {
    aud.currentTime = 10;
};

The reason behind for this setup is you need to make sure the audio is ready to play.

html5 audio currentTime doesn't work

I solved it:

audio.pause();
audio.src = audio.src;

It reload the audio tag, and set currentTime to 0

HTML 5 audio - Play file at certain time point

A few things... your script will first need to be after the audio tag.

Also you don't need the oncanplaythough attribute on the audio tag since you're using JavaScript to handle this.

Moreover, oncanplaythrough is an event, not a method. Let's add a listener for it, which will instead use canplaythough. Take a look at this:

<audio id="audio2" 
   preload="auto" 
   src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" >

   <p>Your browser does not support the audio element</p>
</audio>

<script>
  myAudio=document.getElementById('audio2');
  myAudio.addEventListener('canplaythrough', function() {
    this.currentTime = 12;
    this.play();
  });
</script>

And finally, to start the song at a specific point, simply set currentTime before you actually play the file. Here I have it set to 12 seconds so it will be audible in this example, for 3:26 you would use 206 (seconds).

Check out the live demo: http://jsfiddle.net/mNPCP/4/

---

EDIT: It appears that currentTime may improperly be implemented in browsers other than Firefox. According to resolution of this filed W3C bug, when currentTime is set it should then fire the canplay and canplaythrough events. This means in our example, Firefox would play the first second or so of the audio track indefinitely, never continuing playback. I came up with this quick workaround, let's change

this.currentTime = 12;

to test to see if it has already been set, and hence preventing the canplaythrough to get called repeatedly:

if(this.currentTime < 12){this.currentTime = 12;}

This interpretation of the spec is still currently being disputed, but for now this implementation should work on most modern browsers with support for HTML5 audio.

The updated jsFiddle: http://jsfiddle.net/mNPCP/5/

---

Related Topics