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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.