The main part code of the imitation Kugou HTML5 mobile music player_html5 tutorial skills

HTML5 works, after testing, the effect is confirmed to be good. Unfortunately, it only supports webkit-based browsers such as Google and Apple. When netizens experience it, please use Google and other browsers to run it, otherwise you will not be able to see the effect. I won’t go into details. Let’s see the effect

Copy the code

The code is as follows:

The main part of the code is as follows:
function ZzxMusic(){
var aa={};
//Module settings
var setting = {
newSong:{'target':'newSong', 'type':'1','firstCount':6,'Count':5},
songCharts:{'target':'newSong','type':'1','firstCount':2,' Count':4},
singer:{'target':'newSong','type':'1','firstCount':8,'Count':7},
radioStation:{'target' :'newSong','type':'1','firstCount':9,'Count':2}
};
//Default loaded module
aa.newSong = new Zzx(setting. newSong);
//Module initialization
$(".menu_tagList").children("li").bind('click',function(){
for(var i in setting){
if($(this).attr("id")==i){
if(typeof aa[i]==='undefined'){
aa[i] = new Zzx(setting [i]);
}else{
aa[i].init();
}
}
}
$(".menu_hover").removeClass("menu_hover ");
$(this).addClass("menu_hover");
})
}
//Instantiate the console
var myControl = new Control({
audio : document.getElementById("myMusic"), //Player
playModeNode: $("#modeButton"), //Mode selection button
playBtn: $("#playButton"), //Master button
playTitle : $("#musicTitle"), //Song TITLE container
singerHead : $("#singerHead"), //Song illustration container
progressWrap : $("#progressWrap"), / /Song progress bar container
progress : $("#progress"), //Song progress bar
oWinObj : $("#oWindow"), //Alert window container
allTimeNode : $("# totleTime"), //Current time container
currentTimeNode: $("#currentTime") //Current time container
});
ZzxMusic();

Original text www.jq-school.com