友情提示:请各位Fork的同志高抬贵手,给个star呗
一款基于vue的音乐播放web app
在线预览地址 VBox
因预览服务器不在中国,qq音乐里面的MV数据是请求不到的 预览版本不是最新版本,请下载最新版到本地预览。service Worker因为证书问题,可能不能正常工作,可以下载项目进行预览功能
- 首页
- 流行指数,热歌,新歌,中国新歌声排行摘要
- 热门歌单 --(歌单详情未完成)
- 歌手
- 分类搜索
- 歌手歌曲
- 歌手专辑
- 歌手MV
- 歌手详情
- 专辑
- 简单搜索(最新最热)
- 多条件搜素
- 专辑详情
- 排行榜
-
QQ音乐巅峰榜
- 流行指数
- 热歌
- 新歌
- 中国新歌声
- 网络歌曲
- 内地
- 港台
- 欧美
- 韩国
- 日本
- 音乐人
- K个金曲
- MV -- (未完成)
- 全球榜
- vivo 手机 高品质音乐榜
- 美国公告牌榜
- 美国iTunes榜
- 韩国Mnet榜
- 英国UK榜
- 日本公信榜
- 香港电台榜
- 香港商台榜
- 台湾幽浮榜
-
QQ音乐巅峰榜
- 歌单
- 快捷搜索(最新最热)
- 快捷分类搜索
- 歌单详情 -- 未完成
- MV
- 便捷搜索(最新最热)
- 多条件搜索
- MV播放
- 同艺人的其他MV
- 粉丝们也喜欢看
- 搜索
- 热门搜索
- 搜索推荐
- 搜索结果
- 搜索历史--未完成
- 分享 -- 未完成
- 设置
- 清除缓存
- 检查更新 -- (浏览器需要支持ServiceWorker)
- 录制音乐--(浏览器需要支持MediaRecorder)
-
其他
- 离线提醒 -- (浏览器需要支持Notification)
#VBox特色说明
- 响应式
- 程序本身只有极少的图片,其余都是css3画
- 支持离线存储
- localStorage存储基本信息
- indexedDB和FileSystem存储音乐文件
- 在浏览器支持的情况下:支持录制音乐(MediaRecorder)
- 在浏览器支持的情况下:支持离线浏览(serviceWoker),即断网的情况,页面可以刷新,音乐可以播放,(ctrl + F5例外)
- 断网会有友好的断网桌面提醒
#功能特别说明
- 上一首和下一首的歌曲切换是通过左右滑动实现的,因为touchmove的问题,在andriod内置浏览器可能存在问题
- 播放的音乐在播放后会被缓存到文件系统(基于indexedDB和FileSystem),但是会多发一次ajax请求
- 录制音乐需要点击保存,才会保存到文件系统
- 检查更新会检查serviceWorker文件的更新,如果是启用vue-cli npm run dev进行调试,可能导致serviceWork不正常工作,请F12进行卸载或者ctrl + F5强制重新安装
<p技术栈
-
html
- audio & video
- figure,footer, header等等
-
CSS
- rem
- flex布局
- css伪类(画图标)等
-
JavaScript
- ES6 & ES7
- vue & vue-router & vuex & vue-infinite-loading & vue-lazyload
- fetch
- Web API
- indexedDB & FileSystem
- serviceWorker
- MediaRecorder
- Notification
#还在研究和可能添加的技术/功能
- 在线分享(基于socket.io + webRTC)
- 附近的人也在听 (geolocation或者第三方API)
- 网络状态提醒(呵呵,native app容易 web app不容易)
npm install
npm run dev
npm run build