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:
1//Place an audio element on the page, because we use our own design of the playback interface, so this side does not have their controls. 2 <audio id= "MyMusic" > </audio> 3 4//This side puts a hidden field, his role is to hold the media file pause point in time 5 <input id= "Pausetime" type= "hidden" /> 6 7//write the interface of the Music Box 8 <div class= "MusicBox" > 9 <div class= "Leftcontrol" ></div>//Previous Control icons for media files <div id= "Maincontrol" class= "Maincontrol" ></div>//Start and pause control icons for <div class= "Rightcont Rol "></div>//control icon for Next media file <div class=" Processcontrol ">//progress bar <div class=" Songname "&G T Ben ' s Music box!</div>//media file title <div class= "Songtime" >00:00 | 00:00</div>// Time Progress <div class= "Process" ></div>//Total duration of progress bar <div class= "Processyet" ></div>//Time played progress Bar </div>20 <div class= "voiceemp" ></div>//Mute icon from <div class= "Voidprocess" >&L T;/div>//Full Volume progress bar <div class= "Voidprocessyet" ></div>//Current Volume progress bar <d IV class= "Voicefull" ></div>//Full volume icon <div class= "Showmusiclist" ></div>//Show or hide media file list Icons 26 27 </div>28 <div class= "musiclist" >//Media file list area <div class= "Author" ></div> Current media file <div class= "list" >//media file list <div class= "single" >//Individual media files <span class= "Songname" kv= "Fate" >01.fate</span>36 </div> Notoginseng </div>39 </div>
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.
This article source code download: Crx_mail_audio