Search within TutorialsPark

HTML Audio


HTML5 provides native support for audio on webpages.


HTML5 new specifications enables users to have a far more control over audio on webpages.A feature which earlier required support from Adobe Flash.

It allows users and developers to control features like start, stop , Volume control etc.

Common Audio Formats.

MP3: An audio format from MPEG(Moving Pictures Experts Group).

AAC: Advanced Audio Coding , standard format on Iphone,youtube etc.

OGG: An Opencontainer and free audio format.


Using the < Audio > element.

1. The < audio > element enables you to embed(or add) audio files on Webpages.

2. Declare the audio tag, and specify the source attribute with the Audio file location.

Syntax of an Audio embed.

Example of an Audio Embed.

Give it a TRY! » The controls attribute displays default user controls for audio player.


Multiple Audio Sources.

Not all browsers support all audio file formats,so inorder to ensure compatability across all browsers list as many audio file formats as possible..

Use type attribute to let the browser know about the type of audio file,for audio formats the syntax is audio followed by the format.

Eg: audio/mp3,audio/ogg,audio/mp4,audio/wav.

Browser Compatability with Audio Formats.

Audio Formats Chrome chrome Safari safari Firefox firefox Opera opera IE internetexplorer
MP3 Yes Yes No No Yes
Wav Yes Yes Yes Yes No
Ogg Yes No Yes Yes No


Adding Attributes to Audio .

1. The attribute autoplay allows users to start playing the audio as soon as it loads.

2. To play the audio file in a loop use the attribute loop .

3. The attribute controls sets the browser's default audio controls.

Audio attribute syntax.

Note: Audio_source.ext is the address, name and extension of audio file.

Example: Adding attributes to audio.

Give it a TRY! »

Audio attributes

Attribute Description
src Specifies the Source URL of audio.
autoplay Automatically plays the file as soon as it loads.
controls The attribute controls sets the browser's default audio controls.
loop Tells browser to play the audio in loop.
muted If present,the audio is muted initially.
preload Specifies the browser whether to load video in advance or not.
It takes three(3) values.

1. none: Nothing loads until user starts playback

2. metadata :Loads audio's metadata(e.g. length) before playback.

3. auto:Downloads the audio completely as soon as possible. the browser is free to decline the request.This is default behavior.

A Custom made HTML5 and Javascript Enabled Audio Player.

Here, is custom made HTML5 Audio Player, using the DOM elements and Javascript Events and Event handlers.


Volume:


Example: Building your own Custom made Audio Player with HTML5 and DOM Javascript.

Give it a TRY! »


We will Learn More about Audio API and javascript controls in the next section in great Detail.



Related Examples

Related Tags