HTML5 Audio Apps
Controlling the Audio Elements using control function and Methods.
HTML5 Media API
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.
Common Built-in Functions for Media Elements (Audio & Video)
|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.
|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.
|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).
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.
|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()
Inception dream collapse!!.