HTML5 audio Combat, Web music player development

today we are based on HTML5 Audio to develop a Web page Music player.

In HTML5 new features, audio, video is our more concerned about the new elements, we can finally get out of Flash, to develop audio, video player, for a new HTML element, is nothing more than attributes, events, methods, and so on, about the specific properties of audio, events, Method , please google.

Look at our HTML code: audio.html

<!         DOCTYPE html>

Javascript Code: Audio.js
$ (function () {//player var player = {//Song Paths path: ' res/music/',//song Data data:null, Index of the currently playing song Currentindex:-1,//Player element jquery object $audio: $ (' audio '),//song list $            Mlist: $ (' #m-list '),//The song being played $rmusic: $ (' #rmusic '),//Initialize Data init:function () {            Data is typically from the server side, loading data via Ajax, here is the analog player.data = [' May-Ing-Audition ' love. mp3 ', ' Li Yuchun-see you at the next intersection. mp3 ', ' The few-Hi-song. mp3 '];            In general, the template engine, the data and template conversion to a view, to show that this is the analog var mhtml = ';            var len = Player.data.length; for (var i = 0; i < len; i++) {mhtml + = ' <li><a index= "' + i + '" > ' + player.data[i] + ' &lt            ;/a></li> ';        } Player. $mList. HTML (MHTML);            },//Ready ready:function () {//Control Player.audio = Player. $audio. Get (0);              $ (' #ctrl-area '). On (' Click ', ' button ', function () {  Player. $rmusic. HTML (Player.data[player.currentindex]);            });                Play $ (' #btn-play '). Click (function () {Player.audio.play ();                if (Player.currentindex = =-1) {$ (' #btn-next '). Click ();            }            });            Pause $ (' #btn-pause '). Click (function () {Player.audio.pause ();            }); Next $ (' #btn-next '). Click (function () {if (Player.currentindex = =-1) {Pla                Yer.currentindex = 0;                } else if (Player.currentindex = = (player.data.length-1)) {player.currentindex = 0;                } else {player.currentindex++;                } console.log ("Player.currentindex:" + player.currentindex);                PLAYER.AUDIO.SRC = Player.path + Player.data[player.currentindex];            Player.audio.play ();            });       Previous song     $ (' #btn-pre '). Click (function () {if (Player.currentindex = =-1) {Player.currentind                ex = 0;                } else if (Player.currentindex = = 0) {Player.currentindex = (player.data.length-1);                } else {player.currentindex--;                } PLAYER.AUDIO.SRC = Player.path + Player.data[player.currentindex];            Player.audio.play ();            }); Single Cycle $ (' #btn-loop '). Click (function () {Console.log ("Player.currentindex:", Player.currentind                ex);                    Player.audio.onended = function () {Player.audio.load ();                Player.audio.play ();            };            }); Sequentially play $ (' #btn-order '). Click (function () {Console.log ("Player.currentindex:", Player.currentin                DEX); Player.audio.onended = function () {$ (' #btn-next '). Click ();            };            });                    Random Play $ (' #btn-random '). Click (function () {Player.audio.onended = function () {                    var i = parseint ((player.data.length-1) * Math.random ());                Playbyme (i);            };            });                Play the specified song function Playbyme (i) {Console.log ("index:", i);                PLAYER.AUDIO.SRC = Player.path + player.data[i];                Player.audio.play ();                Player.currentindex = i;            Player. $rmusic. HTML (Player.data[player.currentindex]);            }//The song was clicked $ (' #m-list a '). Click (function () {Playbyme ($ (this). attr (' index '));        });    }    };    Player.init (); Player.ready ();});

Effect:



Implements the common function of the player, of course, can be based on CSS3 to develop a more cool interface effect,
The main concern here is the implementation of the Code.