HTML5音乐播放器

SoulBeats本地播放器

暂停界面:


image.png

播放界面:


image.png

最近想用Vue写一个网页播放器,但是一直没有找到好用的api,室友正在研究网易云api转发,过几天应该就能弄出来啦。
自己就干脆练练原生js,参照了上面那位同学的界面(配色以及布局)写出了这个播放器。
主要是html5的audio标签控件的重写。
等室友api弄好啦就用vue重构弄成在线的播放器。
技术:

  1. Html
  2. Css
  3. JavaScript

功能实现:

  1. 上/下一首
  2. 播放模式切换(单曲、顺序、列表、随机)
  3. html5 audio控件重写

使用方法:
1.js入口处配置歌曲列表json生成列表(音乐外链折腾了我很久,室友通过api加密转发弄出了网易云的外链,但是貌似链接有时间限制,坑,用毕竟静态页面,还是有很多不足,目前选择的是七牛云服务)

七牛云音乐外链生成教程:http://jingyan.baidu.com/article/f54ae2fc34c9d41e92b849af.html

入口配置.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容