HTML5 audio practices, webpage music player development, html5audio

Source: Internet
Author: User

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
 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.