GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → xiangwenhu → Vbox

xiangwenhu / Vbox

vue实现的音乐Web App

Programming Languages

es6
455 projects

Labels

vuevue-routerservice-workerindexeddbvuex2vue-demo

Projects that are alternatives of or similar to Vbox

Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区，使用webpack2打包
Stars: ✭ 1,134 (+1453.42%)
Mutual labels:  vue-demo, vuex2, vue-router
Dsw
Dynamic Service Worker - making your offline Progressive Web Apps way easier
Stars: ✭ 277 (+279.45%)
Mutual labels:  indexeddb, service-worker
Vuejs Firebase Shopping Cart
Shopping cart demo using Vuejs and Firebase
Stars: ✭ 274 (+275.34%)
Mutual labels:  vuex2, vue-router
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+580.82%)
Mutual labels:  vue-demo, vue-router
cloudMusic
(移动端)Vue2.0+Nodejs网易云音乐，网易云音乐api强力驱动，高音质破解(持续更新中)
Stars: ✭ 14 (-80.82%)
Mutual labels:  vue-router, vuex2
jooger.me
👍 My personal website，powered by @nuxt
Stars: ✭ 39 (-46.58%)
Mutual labels:  vue-router, vue-demo
Fans
这是一个app(android/iOS)项目，但页面视图全部都用的是html5页，没有使用app的原生页面。 前端h5是基于mui + vue2 + vue-router2 + es6 + webpack2 + vuex + signalR 的前端webApp单页项目框架，项目可以直接在PC上运行html5页面。 app打包技术是用HBuilder IDE工具一键打包成APP。
Stars: ✭ 416 (+469.86%)
Mutual labels:  vuex2, vue-router
meal-ticket
前端基于webpack+vue+vux，后端基于express+lowdb。有了这些，开发一个项目将会变得很轻松。
Stars: ✭ 19 (-73.97%)
Mutual labels:  vue-router, vue-demo
Vue Blog
A single-user blog built with vue2, koa2 and mongodb which supports Server-Side Rendering
Stars: ✭ 586 (+702.74%)
Mutual labels:  vuex2, vue-router
Vuecnodejs
⚽️🎉Vue初/中级项目，CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org ) 预览(DEMO)：
Stars: ✭ 705 (+865.75%)
Mutual labels:  vuex2, vue-router
Vue 163 Music
【停止维护】网易云音乐web版，支持PC端常用功能，localStorage保存播放列表
Stars: ✭ 788 (+979.45%)
Mutual labels:  vue-demo, vue-router
Manhuaren
vue2.0全家桶，仿漫画人官网（移动端）
Stars: ✭ 18 (-75.34%)
Mutual labels:  vuex2, vue-router
Vue-MintShop
🍖 🍉 使用 ES6 + Mock.js + vue2.0 全家桶开发的前后端分离的外卖App。开发文档、流程完整详尽，非常适合作为个人练手项目。
Stars: ✭ 626 (+757.53%)
Mutual labels:  vue-router, vue-demo
basic-transport-info-app
A progressive web app to show direct & indirect buses / transport between two places / cities / stops .Show next schedule & travel duration. Algorithm to calculate indirect buses on basis of their schedule time. Voice search . Locate nearest city/stop by gps. Bus timetable.
Stars: ✭ 12 (-83.56%)
Mutual labels:  vue-router, vuex2
Build-vue-hackernews-2.0-from-scratch
A tutorial for beginners to build a complex project with Vue.js 2.0 step by step
Stars: ✭ 85 (+16.44%)
Mutual labels:  vue-router, vuex2
Vue Website
🍰 想用vue把我现在的个人网站重新写一下，新的风格，新的技术，什么都是新的！
Stars: ✭ 351 (+380.82%)
Mutual labels:  vue-demo, vue-router
loQL
loQL is a lightweight, open source npm package that caches API requests with service workers, unlocking performance gains and enabling offline use.
Stars: ✭ 49 (-32.88%)
Mutual labels:  service-worker, indexeddb
vue-mall
vue企业级商城练手项目并且提供接口唷
Stars: ✭ 14 (-80.82%)
Mutual labels:  vue-router, vue-demo
Vue Mintshop
🍖 🍉 使用 ES6 + Mock.js + vue2.0 全家桶开发的前后端分离的外卖App。开发文档、流程完整详尽，非常适合作为个人练手项目。
Stars: ✭ 552 (+656.16%)
Mutual labels:  vue-demo, vue-router
Vue Chat
👥Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室。
Stars: ✭ 887 (+1115.07%)
Mutual labels:  vuex2, vue-router
View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].