项目作者: xiangwenhu

项目描述 :
vue实现的音乐Web App
高级语言: Vue
项目地址: git://github.com/xiangwenhu/vbox.git


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强制重新安装



  • 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