HTML5 Music Playback enhancements: Support music list playback, try Listening

Before writing, I saw the blog friend Tiandi wrote "HTML5 play more than the first online music" article:

Implemented by JS+HTML5, the method is simple, and the HTML code is as follows:

The code is as follows

Copy Code

<div id= "Wrap" > <div id= "List" > <div id= "title" > Simple HTML5 music player </div> <!--1. Add a song here and change the number in parentheses--> <li><a href= "javascript:void (0);" onclick= "Playmusic (1)" > Where's daddy going </a></li> <li><a href= "javascript:void (0);" onclick= "Playmusic (2)" > Brighter </a></li> <li><a href= "javascript:void (0);" onclick= "Playmusic (3)" > Meet Again </a></li> </div> <audio id= "Player" controls= "true" > your browser is too bad, please change the browser first. </audio> <div id= "Now" > Playing: </div><span id= "Mp3name" > No </span> <div style= "Clear:both" ></div> The </DIV>JS code is as follows: function Playmusic (i) { var my = document.getElementById ("player"); Switch (i) { Each add a song, then add a case, number and HTML set in the match Case 1: My.setattribute ("src", "Http://mp3.wooeu.com/mp3.php/15314202/mp3wooeu.mp3"); 2. Add Song URL document.getElementById ("Mp3name"). innertext = "Getting the song ... "; My.addeventlistener ("Canplaythrough", function () { document.getElementById ("Mp3name"). innertext = "Stars-where Papa goes"; 3. Add song name },false); My.play (); Break Case 2: My.setattribute ("src", "Http://mp3.wooeu.com/mp3.php/15257322/mp3wooeu.mp3"); document.getElementById ("Mp3name"). innertext = "Getting the song ... "; My.addeventlistener ("Canplaythrough", function () { document.getElementById ("Mp3name"). innertext = "Beyond-brighter"; },false); My.play (); Break Case 3: My.setattribute ("src", "Http://fdfs.xmcdn.com/group3/M00/3F/64/wKgDslJJhJiDr4JAACG0hCSFjS8536.mp3"); document.getElementById ("Mp3name"). innertext = "Getting the song ... "; My.addeventlistener ("Canplaythrough", function () { document.getElementById ("Mp3name"). innertext = "Soda green-Meet Again"; },false); My.play (); Break Default } }

With the original JS written, mainly to achieve a number of music click to switch playback. Realize the idea can still take to draw lessons from, here expresses thanks!

After reading the above method, it is natural to have some of their own ideas:

Add a music list display with an array;

Add a friendly text hint when switching music;

The text identifies the currently playing track;

Clear text shows the length of the current music playback time;

Try again to listen to the function button;

Concrete display effect, directly to see this article in the upper right-hand corner demo example!

Demo Sample code:

The code is as follows

Copy Code

<div class= ' audiobox ' style= ' float:right;padding:5px;background: #E9E9E9; ' > <p style= "text-align:right;" > <!--<a href= "javascript:;" class= "A1" > Play </a> <a href= "javascript:;" class= "A2" > Suspend </a>--& Gt;<a href= "javascript:;" class= "A3" > Hearing of the Deaf once </a> </p> <audio controls= "true" id= "audio" src= "#" > <!--compatible with the various browsers can identify the song file: You can use the source tag to insert different suffixes, but belong to the same song file; audio label temporarily does not support file list play--> <!--<source src= "Http://storage.live.com/items/1F27EE2C897D560D!107?a.mp3" type= "Audio/mpeg"/>--> <!--does not support audio labels, display the following prompts--> <b style= "color: #f00;" > The browser you are using is too old to change a browser! </b> </audio> </div> <script> var index,_this,time,h,m,s,hms; var tips= "<span class= ' tips ' style= ' color: #f00; font-size:0.7em;font-weight:bold;padding-left:5px;display:none; ' > Play in ...</span> "; var audioname=["Where Daddy Goes", "brighter", "soda green-Meet Again"]; var audiourl=["Http://mp3.wooeu.com/mp3.php/15314202/mp3wooeu.mp3", "http://mp3.wooeu.com/mp3.php/15257322/ Mp3wooeu.mp3 "," Http://fdfs.xmcdn.com/group3/M00/3F/64/wKgDslJJhJiDr4JAACG0hCSFjS8536.mp3 "]; var audiohtml= "$.each (Audiourl, function (i, Val) { audiohtml+= "<li><a href= ' javascript:; ' > "+audioname[i]+" </a></li>; }); audiohtml+= "</ul>"; audiohtml+= ""; $ (audiohtml). Prependto ('. Audiobox '); $ ("#audioList li:eq (0)"). Append (tips); $ ("#audio"). attr ("src", audiourl[0]); $ ("#audio") [0].volume=0.8; $ ("#audioList li a"). each (function (index, EL) { $ (this). Click (Function (event) { _this=$ (this); index=$ ("#audioList li a"). Index (this); $ ("#audio"). attr ("src", Audiourl[index]); $ (". Tips"). HTML ("Loading ..."). Appendto (_this.parent ()). FadeIn (); Judge Song has been loaded, can play with Canplaythrough method, only support the original JS writing $ ("#audio") [0].addeventlistener ("Canplaythrough", function () { Gets the length of the current song playing Time=new Date ($ ("#audio") [0].duration). GetTime (); H=parseint (time/3600); H=h==0? ": h+": "; When the song does not exceed 1 hours, does not show the hour M=parseint ((time-h*3600)/60); S=parseint (TIME-H*3600-M*60); Hms= "[" +h+m+ ":" +s+ "]"; $ (". Tips"). HTML ("+hms+" in play); }, False); $ ("#audio") [0].play (); }); }); $ (". A1"). Click (Function (event) { $ ("#audio") [0].play (); }); $ (". A2"). Click (Function (event) { $ ("#audio") [0].pause (); }); $ (". a3"). Click (Function (event) { $ ("#audio") [0].load (); $ ("#audio") [0].play (); }); </script>

Now the playback function than the original experience, feel a lot better, but can be improved, extended the function of many, such as: More than one song automatically Lianbo, interested can be toss down the code improved.

In addition, WP blog article inserted music, recommended use of the TINYMCE Advanced Editor, this editor uses the method of inserting music is also using the HTML5 audio tag, there are several configuration items are free to choose. Insert more music, individual or recommended use of shrimp music, although the interface is ugly, also does not support the skin, but also in the acceptable range, this has to choose by themselves.