Playing audio files in HTML5

Posted by Anantha Narayanan On 12:38 PM

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.

Sweet new tags in HTML5

Posted by Anantha Narayanan On 12:24 PM

Section 2: Sweet, I have new tags

While HTML5 is not always about introducing new tags, its there. Its just not added newly because they had to, but they really help identify the content you are going to put in the webpage.

Before understanding new tags which are introduced, we will understand the meaningless nature of <div> tags. A div tag is used only to stuff contents together, and later style it using stylesheets (CSS). Consider the following example:

<div id="navigation">
  some navigation links
</div>

Well do you consider the following or above to be simple enough to understand?

<nav>
  some navigation links
</nav>

It makes sense to write less code and which is intelligible for humans. After all humans write HTML.

For a full list of tags available in HTML5 check this link in MDN.

Previous Section Next Section

Starting with HTML5

Posted by Anantha Narayanan On 12:22 PM

Section 1: HTML5 basics

What is the point of learning Grails (or any other web framework) if you don't know basic HTML. In this age of HTML5, I am starting to learn HTML5 the old fashioned way, self-learning.

I will be sharing my learning to all those who want it. This is really basic stuff.

The following is the simplest of simple valid HTML5 page you will create yourself.

<!DOCTYPE html>
<title>Hello World</title>
<h1>My first HTML5 Document</h1>

Yes, you heard it right, you don't need a <head> or <body> etc. tags to call your document a valid HTML5 document. The browsers now-a-days (except IE) are smart enough to identify that <title> is the title of the document, and <h1> has to be printed within the body.

If you doubt that the above code is not a valid HTML5, be my guest and copy the code and paste it in the validator. http://validator.w3.org/#validate_by_input

This is the first thing you must know about HTML5.

Next Section

Recommended Post Slide Out For Blogger