HTML5 audio practices, Web music player development
Today we are developing a webpage music player based on HTML5 audio.
In the new HTML5 features, audio and video are our new elements of interest. We can finally develop audio and video players from Flash. For a new HTML element, it is nothing more than attributes, events, methods, etc. Please Google for the specific attributes, events, and methods of audio.
Let's look at our HTML code: audio.html
Audio
Playing: Play Previous Next Pause
Playback Mode
- Single Loop
- Sequential playback
- Random playback
<Script src = "bower_components/jquery/dist/jquery. js "type =" text/javascript "charset =" UTF-8 "> </script> <script src =" bower_components/bootstrap/dist/js/bootstrap. js "type =" text/javascript "charset =" UTF-8 "> </script> <script src =" js/audio. js "type =" text/javascript "charset =" UTF-8 "> </script>
Javascript code: audio. js
$ (Function () {// Player var Player = {// song path: 'res/music/', // song data: null, // The index currentIndex:-1 for the currently played song, // The jquery object of the player element $ audio: $ ('audio'), // The list of songs $ mList: $ ('# m-list'), // The Playing Song $ rmusic: $ (' # rmusic '), // initialize the data init: function () {// data is generally from the server side and loaded through ajax. Here we simulate Player. data = ['October 21-Ing-Audition love', 'Li Yuchun-Next loop', 'xiao Ke-qu hongkong']; // The template engine is generally used, convert data and templates into views for display. Here we simulate var mhtml = ''; var len = Player. data. length; for (var I = 0; I <len; I ++) {mhtml + ='
'+ Player. data [I] +'';} Player.w.mlist.html (mhtml) ;}, // ready: function () {// control Player. audio = Player. $ audio. get (0); $ ('# ctrl-area '). on ('click', 'click', function () {player.20.rmusic.html (Player. data [Player. currentIndex]) ;}); // stream $ ('# btn-play '). click (function () {Player. audio. play (); if (Player. currentIndex =-1) {$ ('# btn-next '). click () ;}}); // pause $ ('# btn-pause '). click (function () {Player. audio. pause () ;}); // the next $ ('# btn-next '). click (function () {if (Player. currentIndex =-1) {Player. 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 Qu $ ('# btn-pre '). click (function () {if (Player. currentIndex =-1) {Player. currentIndex = 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 loop $ ('# btn-loop '). click (function () {console. log ("Player. currentIndex: ", Player. currentIndex); Player. audio. onended = function () {Player. audio. load (); Player. audio. play () ;};}); // sequential playback $ ('# btn-Order '). click (function () {console. log ("Player. currentIndex: ", Player. currentIndex); Player. audio. onended = function () {$ ('# btn-next '). click () ;}}); // random playback $ ('# btn-random '). click (function () {Player. audio. onended = function () {var I = parseInt (Player. data. length-1) * Math. random (); playByMe (I) ;}}); // function playByMe (I) {console. log ("index:", I); Player. audio. src = Player. path + Player. data [I]; Player. audio. play (); Player. currentIndex = I; player.20.rmusic.html (Player. data [Player. currentIndex]);} // The song is clicked $ ('# m-list '). click (function () {playByMe ($ (this ). attr ('index') ;}}}; Player. init (); Player. ready ();});
Effect:
CSS3 develops more cool interface effects,
Here we mainly focus on the implementation of the Code.