All Projects → Anonlyy → shareMusic

Anonlyy / shareMusic

Licence: MIT license
基于Angular4的音乐播放器

Programming Languages

typescript
32286 projects
CSS
56736 projects
HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to shareMusic

Angular4 Primeng Admin
angular4-primeng-admin @angular/cli开发的后台模板
Stars: ✭ 99 (+482.35%)
Mutual labels:  angular4, angular-cli
Angular2 Crud Rest
Sample Angular (2.x and 4.x) app: CRUD example + routing
Stars: ✭ 152 (+794.12%)
Mutual labels:  angular4, angular-cli
Ng Packaged
An Angular library packaged by ng-packagr
Stars: ✭ 109 (+541.18%)
Mutual labels:  angular4, angular-cli
angular-youtube-player
Simple youtube player created with angular and typescript. See demo.
Stars: ✭ 35 (+105.88%)
Mutual labels:  music-player, angular-cli
Angular5 Seed
Angular5 Seed for Application
Stars: ✭ 222 (+1205.88%)
Mutual labels:  angular4, angular-cli
Coreui Free Angular Admin Template
CoreUI Angular is free Angular 2+ admin template based on Bootstrap 4
Stars: ✭ 1,279 (+7423.53%)
Mutual labels:  angular4, angular-cli
Spring Boot Angular4 Boilerplate
Quickstart for spring boot + angular 4 projects
Stars: ✭ 151 (+788.24%)
Mutual labels:  angular4, angular-cli
Laravel5.5 Angular5
Laravel 5.5 + Angular 5 + AdminLTE single page application
Stars: ✭ 40 (+135.29%)
Mutual labels:  angular4, angular-cli
Angular4 Docker Example
Efficiently Dockerized Angular CLI example app
Stars: ✭ 212 (+1147.06%)
Mutual labels:  angular4, angular-cli
Angularfire2 Offline
🔌 A simple wrapper for AngularFire2 to read and write to Firebase while offline, even after a complete refresh.
Stars: ✭ 209 (+1129.41%)
Mutual labels:  angular4, angular-cli
Angular2
Angular 2 Seed
Stars: ✭ 75 (+341.18%)
Mutual labels:  angular4, angular-cli
abp plugin with ui
Demo of using multiple angular applications and aspnetboilerplate to create plugin application
Stars: ✭ 17 (+0%)
Mutual labels:  angular4, angular-cli
Spring Boot Angular4 Authentication
spring-boot and angular 4 basic authentication with spring security
Stars: ✭ 74 (+335.29%)
Mutual labels:  angular4, angular-cli
laravel5Angular4
Laravel 5.4 & Angular 4.3.4
Stars: ✭ 37 (+117.65%)
Mutual labels:  angular4, angular-cli
Angular Contacts Demo
Angular demo(SSR) base on Angular CLI
Stars: ✭ 42 (+147.06%)
Mutual labels:  angular4, angular-cli
Paper Kit 2 Angular
Free Bootstrap 4 UI Kit for Angular 2+
Stars: ✭ 133 (+682.35%)
Mutual labels:  angular4, angular-cli
Nebular
💥 Customizable Angular UI Library based on Eva Design System 🌚✨Dark Mode
Stars: ✭ 7,368 (+43241.18%)
Mutual labels:  angular4, angular-cli
Angularconcepts
Key Angular Concepts using Latest Angular version 5
Stars: ✭ 31 (+82.35%)
Mutual labels:  angular4, angular-cli
Sb Admin Bs4 Angular 8
Simple Dashboard Admin App built using Angular 8 and Bootstrap 4
Stars: ✭ 1,931 (+11258.82%)
Mutual labels:  angular4, angular-cli
Ngx Youtube Player
YouTube player app built with Angular 7
Stars: ✭ 92 (+441.18%)
Mutual labels:  music-player, angular-cli

ShareMusic

这是一款基于Anuglar4框架的音乐播放器,并使用网易云音乐API,样式布局则参考QQ音乐客户端

UI框架

使用的是element-angularFreeng

功能开发

  • 功能开发现状
    • 用户登录,可使用真实网易账号登录,如若考虑安全问题,可使用测试账号:13711853543,密码:13902447113.
    • 搜索功能,目前可以搜索专辑、歌手、歌名和歌单,并根据对应的搜索结果跳转到对应结果页.
    • 热门歌手(已完成),目前热门歌手因为接口的限制,如果只能获取100位.
    • 音乐广场(已完成),初版目前只有热门歌单、最新音乐和排行榜数据,后续可能会陆续添加.
    • 播放器(已完成),目前播放器可以实现播放暂停、上下歌曲切换、收藏歌曲、音量控制等功能.
    • 每日推荐(已完成),在音乐广场页添加每日推荐内容,包括歌单和单曲.
    • 播放历史(尚未完成),目前的实现存储方式是考虑使用localStorage.
    • 个人信息页(尚未完成)

预览方式

PS:请在预览安装好npm和node环境。

1.安装api服务器

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
npm install(推荐cnpm)

2.启动服务器

node app.js

3.安装前端项目

git clone https://github.com/Anonlyy/shareMusic.git
npm install(推荐cnpm)

4.启动项目

npm start

note:

  • 如遇504错误,一般为后台api服务器未启动,请启动后再刷新页面。
  • 使用的公用的API,如遇奔溃和图片获取缓慢请谅解。
  • 仅供个人学习使用。

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