Audio tag <audio>

Like Video tag, we also have an audio tag , through which we can directly embed the piece of music we want with a very simple code.

<audio src='music.ogg' controls='controls'>
</audio>

The control attribute gives controls like pause, play and volume controls. Several other attributes like width and height of the audio window can also be set. Moreover, we can put any message between the opening and closing tags. This message will be displayed if the browser doesn't support audio.

<audio src='music.ogg' controls='controls'>
Sorry, your browser doesn't support audio tag 
</audio>

However, only three types of audio file are supported by browsers. So, it may be so that a particular file format in not supported by all the browsers. So, we usually give all the three formats of audio as source. The browser will show the first recognizable format of audio. Here is an example :-

<audio width='320' height='240' controls='controls'>
  <source src='music.mp3' type='audio/mp3' />
  <source src='music.ogg' type='audio/ogg' />
  <source src='music.wav' type='audio/wav' />

Your browser does not support the audio tag.
</audio>

The example above tries to implement all the three file formats and display the message if none of them are compatible.

Besides, we also have attributes like autoplay which causes the audio to play as soon as its get loaded. Setting loop attribute make it to replay the audio once it has finished playing.

<audio width='320' height='240' controls='controls' autoplay='autoplay' loop='loop'>
  <source src='music.mp3' type='audio/mp3' />
  <source src='music.ogg' type='audio/ogg' />
  <source src='music.wav' type='audio/wav' />
Your browser does not support the audio tag.
</audio>

The audio now starts as soon as it gets loaded and continues till paused.

Lets have a look at the canvas element where we can make drawings

Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


<<< Wanna review

Continue >>>