The hype about html5 has been around for a while, and the younger brother is also a follow-up person. He is also curious and looking forward to the new things. This article is the first section of this series (HTML5 early adopters). We will start with a simple demo and hope that you will be interested and interested in html5.
In html5, there is a new tag, audio, which defines the sound, such as music or other audio streams.
Since the audio tag can play audio, we can no longer use flash, wmp and other third-party components, and easily use pure html to create a music player.
Example:
<Audio src = "someaudio. MP3"> </audio>
Or
<Audio>
<Source src = "someaudio. MP3"/>
</Audio>
The following figure shows the UI of a music player created by the younger brother using audio:
Audio has the following attributes:
Src: String type, the url of the audio to be played.
Autoplay: bool type. If it is true, the audio will be played immediately after it is ready. The default value is false.
Controls: bool type. If it is true, the control is displayed to the user, such as the play button. The default value is false.
More detailed properties: http://www.w3school.com.cn/html5/html5_audio.asp
Audio has several events:
Onended: when the media has reached the end of the script, that is, the current song has been played, the "Media" here refers to the audio tag.
Onloadstart: run the script when the browser starts loading media data.
Onplay: run the script when media data is about to start playing. Media data here refers to the file to be played.
Onplaying: run the script when media data has been played.
Onpause: run the script when media data is paused.
Onerror: the script that runs when an error occurs when loading media data. (This is not the case for w3school)
More detailed events: http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp#Media_Events
The complete code for creating the player is as follows:
HTML
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> No title page </title>
<Style type = "text/css">
Body
{Font-size: 13px;
Font-family:;
}
# Ul_musicList
{
Width: 300px;
List-style-type: none;
Margin: 5px 0 3px 0;
Padding: 0px;
}
# Ul_musicList li
{
Padding: 5px;
Border: solid 1px # EEEEEE;
}
</Style>
<Script src = "Scripts/jquery-1.3.2.js" type = "text/javascript"> </script>
<Script src = "Scripts/MusicBox. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var mb = null;
$ (). Ready (function (){
Mb = new MusicBox ();
Mb. init ();
});
</Script>
</Head>
<Body>
<Div>
<Audio id = "musicBox" controls = "true"
Onended = "mb. nextMusic ()"
Onloadstart = "mb. loadStart ()"
Onplaying = "mb. playing ()"
Onpause = "mb. pausePaly ()"
Onerror = "mb. loadError ()"
>
</Audio>
<Br/> <input id = "btnNext" type = "button" value = "Next" onclick = "javascript: mb. nextMusic ()"/>
<Span id = "sn_status"> </span> <br/>
<Div style = "margin-top: 5px"> song list: </div>
<Ul id = "ul_musicList">
</Ul>
<Div style = "width: 300px; text-align: right">
Playback mode: <select id = "slt_playMode">
<Option value = "1"> all loops </option>
<Option value = "2"> Single Loop </option>
</Select>
</Div>
</Div>
</Body>
MusicBox. js
MusicBox = function (){
Var _ this = this;
Var media = document. getElementById ("musicBox ");
Var musicFiles = [
{Name: "error", url: "http://www.yandui.com/upload/sound/2009-9-20/20_34_25_953_.mp3 "},
{Name: "angel wings", url: "http://www.masradio.com.cn/uploadfile/program/uploadfile/200805/20080522090800196.mp3 "},
{Name: "unsung music", url: "http://audio.ngfiles.com/88000/88260_Zanarkan_Mastered_Piano_Ve.mp3 "},
{Name: "Song of grass mud horse", url: "http://www.cnblogs.com"}, // wrong Resource
{Name: "Acacia rain", url: "http://www.czopen.com/club/forum/files/247.mp3 "}
];
// Index of the currently playing song
Var index =-1;
// The currently playing song
Var playingFile = null;
// Playback Mode
Var playMode = 1;
// The next one
This. nextMusic = function (){
If (playMode = "1 "){
Index + = 1;
}
If (index = musicFiles. length ){
Index = 0;
}
PlayingFile = musicFiles [index];
Media. setAttribute ("src", playingFile. url );
Media. play ();
$ ("# Ul_musicList" ).children().css ({"background-color": "# FFF", "border": "solid 1px # EEEEEE", "color ": "#000 "});
$ ("# Ul_musicList" ).children([[[index]).css ({"background-color": "#2C7DE2", "border": "solid 1px # 206DDF", "color ": "# FFF "});
}
// Load
This. loadStart = function (){
$ ("# Sn_status"). text ("loading ....");
}
// Play
This. playing = function (){
$ ("# Sn_status"). text ("currently playing:" + playingFile. name );
}
// Pause
This. pausePaly = function (){
$ ("# Sn_status"). text ("pause:" + playingFile. name );
}
// Loading error
This. loadError = function (){
$ ("# Sn_status"). text ("loading" + playingFile. name + "" failed, the resource may not exist ~ ");
}
// Initialization
This. init = function (){
For (var a in musicFiles ){
$ ("# Ul_musicList"). append ("<li>" + musicFiles [a]. name + "</li> ");
}
_ This. nextMusic ();
$ ("# Slt_playMode"). change (function (){
PlayMode = $ ("# slt_playMode"). val ();
});
}
}
If you can see the player and hear background music below, it means that your browser currently supports HTML5.
Sample source code download (Google Chrome testing is recommended) http://www.bkjia.com/uploadfile/2012/0327/20120327094903323.rar
Author: Xiang Shu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
