簡約的HTML5音樂播放器插件


從我剛開始接觸前端的時候就想寫一個能播放音樂的小程序,剛開始寫的時候雖然可以放,但是確實很慢,很卡,有很多可以優化的地方。
最近在前一個版本的基礎上重寫了一個音樂播放器的插件,速度還可以吧

因為追求簡約  所以只有播放暫停和下一曲的按鈕,以及顯示播放進度 (沒怎么做兼容 ie10 以上)

播放時候的效果

toggle之后的效果   會顯示當前播放進度

加載時候的效果

toggle之后的效果 加載時候的效果

 

演示地址 :http://daiwei.org/music/  

github地址: https://github.com/IFmiss/music  , 記得給個 star 哦!!!

參數:

  • width:music寬度 

  • height:music高度 

  • hasBlur: 是否顯示模糊效果

  • blur: 模糊效果的值

  • left:music left 的值

  • right:music right 的值

  • bottom: music bottom 的值

  • direction:左下還是右下角   bottomleft bottomright(left、right、bottom設置)

  • btnBackground:播放暫停按鈕的背景色,不包括圖標

  • iconColor:播放暫停按鈕的圖標顏色

  • hasSelect:是否可選擇類型 (音樂的類型,在js中以靜態數組的形式顯示,可以的話從后台獲取)

  • musicType:音樂類型   數組類型

  • hasAjax:是否是ajax請求數據,為false  則使用默認的source

  • source:音樂的數據信息  包括 name:名稱,singer:歌手,url:音樂地址,img_url:封面地址

  • durationBg:canvas進度條的背景色

  • progressBg:canvas進度條當前狀態的背景色
    方法

  • beforeMusicPlay:function(){}   在音樂播放之前觸發 (首次加載的時候)

  • afterMusicLoading:function(){} 在音樂加載成功 可播放之前

  • musicChanged:function(ret){}     音樂切換之后,播放結束 或者點擊下一首觸發   返回值:index:音樂索引,data:所有的music數據,url:音樂地址

  • getMusicInfo:function(ret){}    獲取所有音樂的信息

  $api.music({
		hasAjax:false,
    musicChanged:function(ret){
      var data = ret.data;
      var index = ret.index;
      var imageUrl = data[index].img_url;

      var music_bg = document.getElementById('music-bg');
      music_bg.style.background = 'url('+imageUrl+')no-repeat';
      music_bg.style.backgroundSize = 'cover';
      music_bg.style.backgroundPosition = 'center 30%';
    }
  });

$api  可以在music.js倒數第二行更改你想要的名稱


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM