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 → lxyisme → Vue Musicapp

lxyisme / Vue Musicapp

使用vue全家桶制作的音乐播放器

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

vuevuexmusic-player

Projects that are alternatives of or similar to Vue Musicapp

Cocomusic
a simple music player built by electron and vue
Stars: ✭ 937 (+380.51%)
Mutual labels:  music-player, vuex
Seemusic
Vue 云音乐播放器，网易云音乐API，可听网易云高品质付费歌曲。 Vue music player
Stars: ✭ 112 (-42.56%)
Mutual labels:  music-player, vuex
Yesplaymusic
高颜值的第三方网易云播放器，支持 Windows / macOS / Linux
Stars: ✭ 12,981 (+6556.92%)
Mutual labels:  music-player, vuex
Vue Netease Music
🎵 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器（PC） Online Music Player
Stars: ✭ 1,783 (+814.36%)
Mutual labels:  music-player, vuex
Vue Mmplayer
🎵 基于 Vue 的在线音乐播放器（PC） Online music player
Stars: ✭ 1,632 (+736.92%)
Mutual labels:  music-player, vuex
Vue Soundcloud
🎧 A SoundCloud client built with Vue and Nuxt
Stars: ✭ 141 (-27.69%)
Mutual labels:  music-player, vuex
Ddbuy
🎉Vue全家桶+Vant 搭建大型单页面电商项目.http://ddbuy.7-orange.cn
Stars: ✭ 2,239 (+1048.21%)
Mutual labels:  vuex
Flutter Ui Kit
A repository full of beautiful UI examples in Flutter
Stars: ✭ 188 (-3.59%)
Mutual labels:  music-player
Turtleplayer
A Free, Fully Fledged, Open-Source Music Player for Android
Stars: ✭ 174 (-10.77%)
Mutual labels:  music-player
Mmf Blog Vue2 Ssr
mmf-blog-vue2 ssr(The service side rendering)
Stars: ✭ 174 (-10.77%)
Mutual labels:  vuex
Vue Electron
vue-blog client，base on vue-electron，axios, vuex, vue-router.
Stars: ✭ 193 (-1.03%)
Mutual labels:  vuex
Alldemo
🍑 2020全栈学习Demo大合集 包含最新 hooks TS 等 还有umi+dva,数据可视化等实战项目 (持续更新中)
Stars: ✭ 189 (-3.08%)
Mutual labels:  vuex
Vue Cheatsheet
Modified version of the official VueMastery cheatsheet
Stars: ✭ 188 (-3.59%)
Mutual labels:  vuex
Audiomotion.js
High-resolution real-time spectrum analyzer and music player using Web Audio and Canvas APIs.
Stars: ✭ 177 (-9.23%)
Mutual labels:  music-player
Vuex Class Component
A Type Safe Vuex Module or Store Using ES6 Classes and ES7 Decorators written in TypeScript.
Stars: ✭ 189 (-3.08%)
Mutual labels:  vuex
Vue Movie
基于vue2.0构建的在线电影网【film】，webpack+vue+vuex+keepAlive+muse-ui+cordova 全家桶，打包成APP
Stars: ✭ 175 (-10.26%)
Mutual labels:  vuex
Typed Vuex
🏦 A typed store accessor for vanilla Vuex.
Stars: ✭ 193 (-1.03%)
Mutual labels:  vuex
Vue Cnode
一个vuex vue-router vue-resource的单页面应用demo，api来自cnodejs. vue 1
Stars: ✭ 174 (-10.77%)
Mutual labels:  vuex
Estmusicplayer
An elegant and simple iOS music player.
Stars: ✭ 2,165 (+1010.26%)
Mutual labels:  music-player
Multi Room Audio Centralized Audio For Home
🎵 This Github Repository provides details on setting up a centralized audio system for your home using nothing but Raspberry Pi's and Old Speakers.
Stars: ✭ 189 (-3.08%)
Mutual labels:  music-player
View All Similar Projects ➔

使用vue2.0制作的音乐播放器（基于qq音乐api）持续更新中...

前段时间逛论坛，无意间看到了一个大神用vue写的音乐播放器，于是就手热自己写了一个

关于我，欢迎关注 作者：潇禹

源代码

源代码地址：GitHub
欢迎大家star和follow

在线预览

在线预览地址： Vue音乐播放器 (PC端请在浏览器的移动端模式下查看)

移动端二维码

预览图

Vue音乐播放器

使用 Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

使用依赖

   animate.css
   vue-router
   vue-resource
   webpack
   vue-awesome-swiper...

目录结构

├── README.md           
├── config             // 项目不同环境的配置
├── index.html         // 项目入口文件
├── dist               // 项目build目录
├── package.json       // 项目配置文件
├── src                // 生产目录
│   ├── assets         // css js 和图片资源
│   │	├── css
│   │	├── iconfont
│   │	├── img
│   │	└── js
│   ├── components     // 各种组件
│   │	├── loading
│   │	├── carousel.vue
│   │	├── header.vue
│   │	├── home.vue
│   │	├── musicList.vue
│   │	├── navBar.vue
│   │	├── playInfo.vue
│   │	├── playBar.vue
│   │	├── raking.vue
│   │	├── search.vue
│   │	└── toplist.vue
│   ├── store          // vuex状态管理器
│   │	├── action.js
│   │	├── getters.js
│   │	├── index.js
│   │	├── mutations.js
│   │	├── state.js
│   │	└── types.js
│   ├── json           // 推荐页面数据
│   │	└── recommend.json
│   ├── App.vue        
│   └── main.js        // Webpack 预编译入口

已实现功能：

  • [x] 音乐播放
  • [x] 自动播放下一曲
  • [x] 音乐列表（增删）
  • [x] 下一曲
  • [x] 排行榜
  • [x] 排行榜详情页
  • [x] 搜索
  • [x] loading
  • [x] 播放详情页
  • [x] 滚动歌词
  • [x] 展示音乐进度
  • [x] 音乐进度的拖拽

存在的Bug：

  • [ ]   进度条拖拽后歌词位置不能及时定位
  • [ ]   点开歌曲详情页歌词位置不执行定位

欢迎技术交流，[email protected]

微信：17612183013（欢迎“骚扰”）

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].