vbox

友情提示：请各位Fork的同志高抬贵手，给个star呗
一款基于vue的音乐播放web app

在线预览地址 VBox  

因预览服务器不在中国，qq音乐里面的MV数据是请求不到的 预览版本不是最新版本，请下载最新版到本地预览。service Worker因为证书问题，可能不能正常工作，可以下载项目进行预览

功能

• 首页
  • 流行指数，热歌，新歌，中国新歌声排行摘要
  • 热门歌单 --（歌单详情未完成）
• 歌手
  • 分类搜索
  • 歌手歌曲
  • 歌手专辑
  • 歌手MV
  • 歌手详情
• 专辑
  • 简单搜索（最新最热）
  • 多条件搜素
  • 专辑详情
• 排行榜
  • QQ音乐巅峰榜
    • 流行指数
    • 热歌
    • 新歌
    • 中国新歌声
    • 网络歌曲
    • 内地
    • 港台
    • 欧美
    • 韩国
    • 日本
    • 音乐人
    • K个金曲
    • MV -- (未完成)
  • 全球榜
    • vivo 手机 高品质音乐榜
    • 美国公告牌榜
    • 美国iTunes榜
    • 韩国Mnet榜
    • 英国UK榜
    • 日本公信榜
    • 香港电台榜
    • 香港商台榜
    • 台湾幽浮榜
• 歌单
  • 快捷搜索（最新最热）
  • 快捷分类搜索
  • 歌单详情 -- 未完成
• 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