萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> Html5 >> 仿酷狗html5手機音樂播放器主要部分代碼

仿酷狗html5手機音樂播放器主要部分代碼

   HTML5作品,經測試,效果確定不錯,遺憾的是只支持谷歌和蘋果等以webkit核心的浏覽器,網友體驗的時候請使用谷歌等浏覽器來運行,不然的話無法看到效果,不說了,看效果吧

仿酷狗html5手機音樂播放器主要部分代碼 三聯

  復制代碼

  代碼如下:

  主要部分代碼如下:

  function ZzxMusic(){

  var aa={};

  //模塊設置

  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}

  };

  //默認加載模塊

  aa.newSong = new Zzx(setting.newSong);

  //模塊初始化

  $(".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");

  })

  }

  //實例化控制台

  var myControl = new Control({

  audio : document.getElementById("myMusic"), //播放器

  playModeNode : $("#modeButton"), //模式選擇按鈕

  playBtn : $("#playButton"), //主控按鈕

  playTitle : $("#musicTitle"), //歌曲TITLE容器

  singerHead : $("#singerHead"), //歌曲插圖容器

  progressWrap : $("#progressWrap"), //歌曲進度條容器

  progress : $("#progress"), //歌曲進度條

  oWinObj : $("#oWindow"), //警告窗容器

  allTimeNode : $("#totleTime"), //當前時間容器

  currentTimeNode : $("#currentTime") //當前時間容器

  });

  ZzxMusic();

copyright © 萬盛學電腦網 all rights reserved