vbox

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

在线预览地址 VBox

功能

• 首页
  
  
  
  • 流行指数，热歌，新歌，中国新歌声排行摘要
  
  
  • 热门歌单 —（歌单详情未完成）
  
  
  
  


• 歌手
  
  
  
  • 分类搜索
  
  
  • 歌手歌曲
  
  
  • 歌手专辑
  
  
  • 歌手MV
  
  
  • 歌手详情
  
  
  
  


• 专辑
  
  
  
  • 简单搜索（最新最热）
  
  
  • 多条件搜素
  
  
  • 专辑详情
  
  
  
  


• 排行榜
  
  
  
  • 
    QQ音乐巅峰榜
    
    
    
    • 流行指数
    
    
    • 热歌
    
    
    • 新歌
    
    
    • 中国新歌声
    
    
    • 网络歌曲
    
    
    • 内地
    
    
    • 港台
    
    
    • 欧美
    
    
    • 韩国
    
    
    • 日本
    
    
    • 音乐人
    
    
    • K个金曲
    
    
    • MV — (未完成)
    
    
    
    
  
  
  • 全球榜
    
    
    
    • vivo 手机 高品质音乐榜
    
    
    • 美国公告牌榜
    
    
    • 美国iTunes榜
    
    
    • 韩国Mnet榜
    
    
    • 英国UK榜
    
    
    • 日本公信榜
    
    
    • 香港电台榜
    
    
    • 香港商台榜
    
    
    • 台湾幽浮榜
    
    
    
    
  
  
  
  


• 歌单
  
  
  
  • 快捷搜索（最新最热）
  
  
  • 快捷分类搜索
  
  
  • 歌单详情 — 未完成
  
  
  
  


• MV
  
  
  
  • 便捷搜索(最新最热)
  
  
  • 多条件搜索
  
  
  • MV播放
  
  
  • 同艺人的其他MV
  
  
  • 粉丝们也喜欢看
  
  
  
  


• 搜索
  
  
  
  • 热门搜索
  
  
  • 搜索推荐
  
  
  • 搜索结果
  
  
  • 搜索历史—未完成
  
  
  
  


• 分享 — 未完成


• 设置
  
  
  
  • 清除缓存
  
  
  • 检查更新 — （浏览器需要支持ServiceWorker）
  
  
  • 录制音乐—（浏览器需要支持MediaRecorder）
  
  
  
  


• 
  其他
  
  
  
  • 离线提醒 — (浏览器需要支持Notification)
  
  
  
  

• 响应式


• 程序本身只有极少的图片，其余都是css3画


• 支持离线存储
  
  
  
  • localStorage存储基本信息
  
  
  • indexedDB和FileSystem存储音乐文件
  
  
  
  


• 在浏览器支持的情况下：支持录制音乐（MediaRecorder）


• 在浏览器支持的情况下：支持离线浏览(serviceWoker)，即断网的情况，页面可以刷新，音乐可以播放，（ctrl + F5例外）


• 断网会有友好的断网桌面提醒

功能特别说明

• 上一首和下一首的歌曲切换是通过左右滑动实现的，因为touchmove的问题，在andriod内置浏览器可能存在问题


• 播放的音乐在播放后会被缓存到文件系统（基于indexedDB和FileSystem），但是会多发一次ajax请求


• 录制音乐需要点击保存，才会保存到文件系统


• 检查更新会检查serviceWorker文件的更新，如果是启用vue-cli npm run dev进行调试，可能导致serviceWork不正常工作，请F12进行卸载或者ctrl + F5强制重新安装

• 
  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