HTML5 audio practices, Web music player development

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.