How to realize Mobile Music player with html5
This article mainly introduces the html5 how to achieve mobile music player related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this html5 how to achieve mobile music player article will have a harvest, let's take a look.
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 load 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"), / / warning window container
AllTimeNode: $("# totleTime"), / / current time container
CurrentTimeNode: $("# currentTime") / / current time container
});
ZzxMusic ()
This is the end of the article on "how to realize the Mobile Music player with html5". Thank you for your reading. I believe that everyone has a certain understanding of the knowledge of "how to achieve mobile music player in html5". If you want to learn more knowledge, you are welcome to follow the industry information channel.
