从我刚开始接触前端的时候就想写一个能播放音乐的小程序,刚开始写的时候虽然可以放,但是确实很慢,很卡,有很多可以优化的地方。
最近在前一个版本的基础上重写了一个音乐播放器的插件,速度还可以吧
因为追求简约 所以只有播放暂停和下一曲的按钮,以及显示播放进度 (没怎么做兼容 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倒数第二行更改你想要的名称