a simple HTML5 music player
一款基于HTML5的web音乐播放器
在线预览
预览:
多曲列表模式预览:
red主题预览:
方式1:NPM
npm install skplayer
方式2:引入文件
引入css文件:
<link rel="stylesheet" href="./dist/skPlayer.min.css">
写入播放器DOM:
<div id="skPlayer"></div>
引入js文件:
<script src="./dist/skPlayer.min.js"></script>
配置skPlayer对象:
//无列表单曲模式
skPlayer({
music:{
src:'http://o9vplcp9o.bkt.clouddn.com/music.mp3',//音乐文件,必填
name:'打呼',//歌曲名称,必填
author:'潘玮柏&杨丞琳',//歌手,必填
cover:'http://o9vplcp9o.bkt.clouddn.com/cover.jpg'//专辑封面,必填
}
//loop:true 是否单曲循环,选填
//theme:'red' 切换red主题,选填
});
//有列表多曲模式
skPlayer({
music:[
{
src:'http://o9vplcp9o.bkt.clouddn.com/Solitude.mp3',//音乐文件,必填
name:'Solitude',//歌曲名称,必填
author:'Re:plus',//歌手,必填
cover:'http://o9vplcp9o.bkt.clouddn.com/Solitude_cover.jpg'//专辑封面,必填
},
{
src:'http://o9vplcp9o.bkt.clouddn.com/CountingStars.mp3',
name:'Counting Stars',
author:'OneRepublic',
cover:'http://o9vplcp9o.bkt.clouddn.com/CountingStars_cover.jpg'
},
{
src:'http://o9vplcp9o.bkt.clouddn.com/music.mp3',
name:'打呼',
author:'潘玮柏&杨丞琳',
cover:'http://o9vplcp9o.bkt.clouddn.com/cover.jpg'
}
],
//loop:true 是否单曲循环,选填
//theme:'red' 切换red主题,选填
});
//获取网易云歌单模式
skPlayer({
music:317921676 //歌单id(登陆网页版网易云音乐,进入歌单详情后,在url中可找到歌单id,例:'http://music.163.com/#/playlist?id=317921676'),
theme:'red'
});
- 滚动歌词
- 兼容移动端
#更新日志
- 代码重构
- 去掉那个开始暂停的过渡动画
UI参考:dribbble