Search within TutorialsPark

HTML5 Audio Apps

Controlling the Audio Elements using control function and Methods.


1. The HTML5 <audio> and <video> attribute controls enables you have the default browser controls for the audio or video element.

2. If you do not use the controls and autoplay attribute, you can't see anything on the webpage. Not even user controls to start, stop or pause the media.

You can built your own custom controls for media using Media API, Built-in Javascript functions and Attributes.

Common Built-in Functions for Media Elements (Audio & Video)

Function Description
load() Immediately suspends all media activity, and the element is reset to default values. Loads the media file and prepares it for playback.
play() Informs the media to play the media resource. If the media was paused at some point it resumes playback from the same point.
pause() Causes the playback to pause if active.
It sets the element's paused attribute to true and creates a pause event.
canPlayType(type) Enables you to test if the given media file with its MIME type can be supported on the element.
addTextTrack(kind,[label],[language]) Allows you to add a list of files in a track to be played on the media element.

The Read-Only Media Attributes.

Some read only media-attributes which provide realtime information about the status of the media.

Attribute Description
duration Denotes complete duration of the media resource,It the duration is not know NaN is returned.When the value is available to read, the event durationchange is raised.
paused This boolean attribute denotes if the media resource is paused or not.
The value True denotes that the media is paused.
ended This Boolean attributes denotes if the current media has ended playback or not.
The value True denotes that the resource has ended.

startTime Denotes the start-time value of the media resource.
Usually, the value is zero "0" but can be positive if the media is live streaming, or part of a large media resource which is left to buffer. type can be supported on the element.
error To return an error code, to specify the cause of the error and may be even a possible remedy.
currentSrc Specifies the URL of the current resource that is being used by the audio or video element..

Some Common Media Attributes.

Attribute Description
autoplay A Boolean Attribute to specify that the media should play as soon as it is loaded.
loop A Boolean attribute to specify that the media should loop when playback has ended
True denotes that the media should loop.
currentTime Denotes the current time in seconds that has elapsed since the playback began.
Enables you to seek the specific position in the clip playback.

controls Sets or hides the default browser controls for the media player.
volume Sets the Volume for the Media
Value "0" denotes the lowest value, and "1" denotes the highest.
muted A Boolean attribute to mute or unmute the audio.
autobuffer To specify if the media is to be loaded before the playback begins.

Building your own Audio Player (Step By Step).

We learn to build our own audio player using the audio attributes, javascript functions, methods and events

Remove the default browser controls for the audio player, by removing attribute controls

The list of Events for the media player which will be handled by specific event handlers.

Media Events.

Attribute Description
onplay Event Raised when the playback begins.
onpause Event Raised when the audio playback is paused.
onended Event Raised when the audio playback has ended or completed.

ontimeupdate Event Raised periodically as the audio playback is going on.
ondurationchange Event Raised when the duration changes, starts after the media is loaded sufficiently for the playback to start
onvolumechange Event is raised when the volume attribute is altered, or audio is muted and unmuted.

STEP 1 : Get the audio element and remove the default user controls by removing attribute controls

STEP 2 : Create the Audio controls using the input and range attribute.

STEP 3 : Add the events and their specific event handlers to the audio element

STEP 4 : Set up the seekbar using using function CreateSeekBar

STEP 5 : Add the Play and Pause feature to the audio player using function TogglePlay_Pause() , EndofAudio() and Update_Play_Pause()

STEP 6 : Update the progress and Seekbar using audioSeekBar() and SeekBar()

STEP 7 : Control the audio using functions Mute_Unmute() Volume_Controls() and change_Volume()

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.

Inception dream collapse!!.

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

Give it a TRY! »