HTML5 has two awesome elements, audio and video, that can be used to create a good-performing application by creating a sound player and a visual player on the page.
Whether it's video or audio, it's a container file that contains some audio tracks, video tracks, and some meta data, which are bound to a piece of your videos or audio controls to form a complete playback component.
Browser support situation:
Browser |
Support situation |
Codecs |
Chrome |
3.0 |
Theora, Vorbis, Ogg H, AAC, MPEG4 |
FireFox |
3.5 |
Theora, Vorbis, Ogg |
Ie |
Not supported |
No |
Opera |
10.5 |
Theora, Vorbis, Ogg (10.5) VP8, Vorbis, WebM (10.6) |
Safari |
3.2 |
H, ACC, MPEG4 |
Common control functions:
Function |
Action |
Load () |
Loading audio, video software |
Play () |
Load and play audio, video files, or replay paused audio, video |
Pause () |
Pause audio, video files for playback status |
Canplaytype (obj) |
Tests whether a given mini type of file is supported |
Read-Only media properties:
Read-only properties |
Value |
Duration |
Gets the playback length of the media file, in S, or Nan if it cannot be obtained |
Paused |
Returns true if the media file is paused, otherwise false |
Ended |
Returns true if the media file is finished playing |
StartTime |
Return Start playback time |
Error |
Return error code |
Currentsrc |
Returns a file that is being played or loaded as a string |
The property values that can be scripted control:
Property |
Value |
AutoPlay |
Automatically play media files that have already been loaded |
Loop |
True when set to AutoPlay |
CurrentTime |
Returns the time taken from start to current, in S |
Controls |
Show or hide user control interface |
Volume |
Volume value, from 0.0 to 1.0 |
Muted |
Set whether to mute |
Autobuffer |
Whether to buffer load |
First, we add an audio element to the page:
<audio src= ". /media/the Sound of Silence.mp3 "controls=" Controls "autoplay=" AutoPlay "></audio>
The effect in Google Chrome is as follows:
Controls refer to the user control interface, so we can see the above operation panel on the Web page, including play and pause, play progress bar, volume progress bar, and progress time display. AutoPlay refers to the automatic advertisement of loaded media files, so we can open the page to play directly
The interface of the HTML5 Audio API is powerful and well-functioning, but our web applications require different player styles and functions depending on the needs, design style and interface color, which requires us to design flexible applications based on their APIs.
Next, we design a player for our offline working system:
View Code
After drawing this structure, we will write the corresponding CSS style:
View Code
After the page elements and CSS styles have been written, you can see a beautiful model of the music player,
Just now the player above the buttons are empty shells, there is no function. So now we're going to add these features, and the top-level framework of the script uses jquery.
View Code
At this point, a player has finished, the default is to perform a list of loop playback, including the previous, next, play, pause, play progress bar adjustment, volume adjustment progress bar, list selection and other functions. Play the song is fixed to write in the list, I like the Eson photo is also affixed to the, these can be made dynamic access or interaction with the server, interested can go to try, expand.
We were going to add an audio player to our offline working system, and later the requirement changed and abandoned, so this version is not a perfect version. The function of the video player is similar, you can try it yourself.
HTML5 Project Note 4: Using the audio API to design a gorgeous HTML5 music player