HTML5 audio practices, webpage music player development, html5audio

HTML5 audio practices, webpage music player development, html5audio

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

<! DOCTYPE html> 


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 + = '<li> <a index = "' + I + '">' + Player. data [I] + '</a> </li>';} 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:






Implemented the common functions of the player. Of course, you can develop more cool interface effects based on CSS3,
Here we mainly focus on the implementation of the Code.







[30 RMB] html5 player audiojs webpage music player, how to call the website
You can give me a copy of the HTML page, or the online address to me, I will give you change ztm3075@163.com
 
How to implement MP3 players on mobile Web pages? It seems that html5 cannot be played.
The version of a mobile phone that is too antique may be somewhat troublesome and may require some Flash controls. The mobile browser is newer, and HTML5 code should be used directly.
The latest Safari and Chrome in the mobile environment support HTML5 audio labels.
To create a mobile site, you can easily create a site using Dreamweaver mobile streaming media layout. You can also try some Baidu Developer Center tools