HTML5 Project Note 4: Using the audio API to design a gorgeous HTML5 music player

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&nbsp;|&nbsp;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" &GT;&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