Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML 5 <audio> - Play file at certain time point

I have a simple auto playing snippet that plays the audio file however I was wondering either in JavaScript or as an attribute play that file at a certain time (ex. 3:26).

<script type="text/javascript">     var myAudio=document.getElementById('audio2')     myAudio.oncanplaythrough=function(){this.play();} </script>  <audio id="audio2"         preload="auto"         src="file.mp3"         oncanplaythrough="this.play();"> </audio> 

Any help would be great. Thanks in advance :)

like image 437
Stephen Cioffi Avatar asked Aug 19 '12 19:08

Stephen Cioffi


People also ask

What is the correct HTML5 element for playing audio files?

The HTML <audio> element is used to play an audio file on a web page.

How do I get audio to automatically play in HTML?

The autoplay attribute is a boolean attribute. When present, the audio will automatically start playing as soon as it can do so without stopping.

How do I preload audio in HTML?

We use preload=”auto” attribute to preload the audio file. The HTML Audio Preload Attribute is used to specify how the author thinks the audio should be loaded when the page loads. The audio preload attribute allows the author to indicate to the browser how the user experience of a website should be implemented.

How to play an audio file in HTML?

To play an audio file in HTML, use the <audio> element: Your browser does not support the audio element. The controls attribute adds audio controls, like play, pause, and volume. The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

What is <audio> in HTML5?

HTML5 defines DOM methods, properties, and events for the <audio> element. This allows you to load, play, and pause audios, as well as set duration and volume. There are also DOM events that can notify you when an audio begins to play, is paused, etc.

How to play audio after 8 seconds in JavaScript?

This is the main function to play audio after 8 seconds. To check if your function is working or not you can use console log. This line will add a console message when the audio starts playing. Just put your audio path in the src attribute. loop will play the audio file repeatedly.

Is it time to read about HTML5 audio?

Tuesday, May 8th, 2012 by Mark Boas. This is a follow up to my 2009 article Native Audio in the Browser, which covers the basics of HTML5 audio. It may well be worth reading if you want to get a feel for the <audio> element and associated API. Now, two and a half years later, it’s time to see how things are progressing.


2 Answers

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/

like image 134
MusikAnimal Avatar answered Oct 17 '22 01:10

MusikAnimal


The best way to do this is to use the Media Fragment URI specification. Using your example, suppose you want to load the audio starting at 3:26 in.

<audio id="audio2"         preload="auto"         src="file.mp3#t=00:03:26"         oncanplaythrough="this.play();"> </audio> 

Alternatively, we could just use the number of seconds, like file.mp3#t=206.

You can also set an end time by separating the start from the end times with a comma. file.mp3#t=206,300.5

This method is better than the JavaScript method, as you're hinting to the browser that you only want to load from a certain timestamp. Depending on the file format and server support for ranged requests, it's possible for the browser to download only the data required for playback.

See also:

  • MDN Documentation - Specifying playback range
  • W3C Media Fragments URI
like image 41
Brad Avatar answered Oct 16 '22 23:10

Brad