从我刚开始接触前端的时候就想写一个能播放音乐的小程序，刚开始写的时候虽然可以放，但是确实很慢，很卡，有很多可以优化的地方。
最近在前一个版本的基础上重写了一个音乐播放器的插件，速度还可以吧

因为追求简约  所以只有播放暂停和下一曲的按钮，以及显示播放进度 (没怎么做兼容 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倒数第二行更改你想要的名称