Section 3: How to play audio files in HTML5
The sweetest and simplest way to play audio files is HTML5. You will agree with me after seeing the following code:
<audio src="audiotest.ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
Was I right in guessing your reaction?
The only point you must know while playing audio files within browsers is that there is no ONE format of audio compatible with all browsers out there. So what is the option? You must encode your audio files to at least two formats, OGG and MP3. For a full list of browser compatible audio file formats refer this link in MDN.
But for now, you will be safe if you had OGG and MP3. The mechanism is called as fallback, where the browser reads the first format, and if it can play it will play. Otherwise it will move on to the next one and play the second one.
<audio controls autobuffer>
<source src="sample.mp3"/>
<source src="sample.ogg"/>
</audio>
What has been done in the latest example is to move the src of <audio> tag separately as a new tag within <audio> called the <source>. You can define different formats of the same file, and the browser just plays the one format which it can read. Even if the browser can understand multiple formats, it just settles and plays the first one it can understand.
The sweetest and simplest way to play audio files is HTML5. You will agree with me after seeing the following code:
<audio src="audiotest.ogg" autoplay>
Your browser does not support the <code>audio</code> element.
</audio>
Was I right in guessing your reaction?
The only point you must know while playing audio files within browsers is that there is no ONE format of audio compatible with all browsers out there. So what is the option? You must encode your audio files to at least two formats, OGG and MP3. For a full list of browser compatible audio file formats refer this link in MDN.
But for now, you will be safe if you had OGG and MP3. The mechanism is called as fallback, where the browser reads the first format, and if it can play it will play. Otherwise it will move on to the next one and play the second one.
<audio controls autobuffer>
<source src="sample.mp3"/>
<source src="sample.ogg"/>
</audio>
What has been done in the latest example is to move the src of <audio> tag separately as a new tag within <audio> called the <source>. You can define different formats of the same file, and the browser just plays the one format which it can read. Even if the browser can understand multiple formats, it just settles and plays the first one it can understand.
0 comments:
Post a Comment