SoulBeats本地播放器
- 项目地址:https://github.com/hackerwen/SoulBeats
- 预览地址:http://blog.hackerwen.tech/SoulBeats/
- 界面参考:https://github.com/wangpengfei15975/skPlayer?utm_source=tuicool&utm_medium=referral
暂停界面:
播放界面:
最近想用Vue写一个网页播放器,但是一直没有找到好用的api,室友正在研究网易云api转发,过几天应该就能弄出来啦。
自己就干脆练练原生js,参照了上面那位同学的界面(配色以及布局)写出了这个播放器。
主要是html5的audio标签控件的重写。
等室友api弄好啦就用vue重构弄成在线的播放器。
技术:
- Html
- Css
- JavaScript
功能实现:
- 上/下一首
- 播放模式切换(单曲、顺序、列表、随机)
- html5 audio控件重写
使用方法:
1.js入口处配置歌曲列表json生成列表(音乐外链折腾了我很久,室友通过api加密转发弄出了网易云的外链,但是貌似链接有时间限制,坑,用毕竟静态页面,还是有很多不足,目前选择的是七牛云服务)
七牛云音乐外链生成教程:http://jingyan.baidu.com/article/f54ae2fc34c9d41e92b849af.html