Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gaomingzhao666/spotify-web-player
🎵 A web music player UI/UX clone from Spotify Web Player and the data-source provided by NetEase Cloud Music 🎵
https://github.com/gaomingzhao666/spotify-web-player
javascript lesscss vite vue3
Last synced: about 21 hours ago
JSON representation
🎵 A web music player UI/UX clone from Spotify Web Player and the data-source provided by NetEase Cloud Music 🎵
- Host: GitHub
- URL: https://github.com/gaomingzhao666/spotify-web-player
- Owner: gaomingzhao666
- License: apache-2.0
- Created: 2024-02-15T13:28:39.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-22T13:27:33.000Z (4 months ago)
- Last Synced: 2024-05-22T13:47:10.260Z (4 months ago)
- Topics: javascript, lesscss, vite, vue3
- Language: Vue
- Homepage:
- Size: 17.9 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README-CN.md
- License: LICENSE
Awesome Lists containing this project
README
[![Stargazers][stars-shield]][stars-url]
[![Apache2.0 License][license-shield]][license-url]
🚫 由于 [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi) 已删库，无法继续根据接口文档开发功能，此项目不再维护
目录
## 项目介绍
> 上述界面为平板尺寸的应用首页，了解更多请深入 [点击此处](https://github.com/gaomingzhao666/Spotify-Web-Player/tree/main/SCREENSHOT)
Spotify - Web Player 是一个在线音乐平台项目，基于 Vue3 组合式 API + Element Plus，后端使用网易云音乐的数据，相比于网易云音乐去掉了冗余的模块，仅保留基本功能, 目前还在开发中。
(返回顶部)
## 技术栈
- Vue3 with composition API
- Vue-router
- Pinia
- Vite
- Less
- Element-plus
- ES6+
- Fetch
(返回顶部)
## 环境要求
- NodeJS 16+
- Chrome67+ / Edge79+ / Safari12+
- 对电脑与平板页面尺寸作响应式适配
## 安装与运行 - 服务端
```sh
$ # clone the project
$ git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
$ cd NeteaseCloudMusicApi
$ node app.js
```
## 安装与运行 - 客户端
```sh
$ # clone the project
$ git clone https://github.com/gaomingzhao666/Spotify-Web-Player.git
$ # install dependencies and run it
$ # recommend pnpm as a package manager that more faster than npm and the grammar is similar with npm
$ pnpm install
$ pnpm run dev
```
## 解决跨域问题
##### 默认情况下, 由于未设置跨域允许，可能会造成无法使用或者白屏问题, 解决此问题可能有以下方法
- 使用浏览器插件将跨域请求改为允许
- 在前端发送网络请求时设置跨域允许
- 后端在编写接口时改为跨域允许
- 使用构建器
##### 我们以第一种方法为例
推荐 [Allow CORS](https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf) 插件, 下载安装后在使用此项目时启用它即可, 当然你也可以自行选择其他插件或者其他方法来解决跨域问题
(返回顶部)
## UI 设计参考
[YouTube](https://www.youtube.com)
[Spotify](https://www.spotify.com/)
(返回顶部)
## 贡献者
此项目由 [gaomingzhao666@Nano](https://github.com/gaomingzhao666) 开发，后端接口支持(因版权原因现已停止维护)为 - [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)
(返回顶部)
## 开源协议
[Apache License 2.0](https://github.com/gaomingzhao666/Spotify-Web-Player/blob/master/LICENSE)
gaomingzhao666/Spotify-Web-Player is licensed under the Apache License 2.0. A permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.
(返回顶部)
[stars-shield]: https://img.shields.io/github/stars/gaomingzhao666/Spotify-Web-Player?style=for-the-badge
[stars-url]: https://github.com/gaomingzhao666/Spotify-Web-Player/stargazers
[license-shield]: https://img.shields.io/hexpm/l/apa?style=for-the-badge
[license-url]: https://github.com/gaomingzhao666/Spotify-Web-Player/blob/master/LICENSE
[release-shield]: https://img.shields.io/github/v/release/gaomingzhao666/spotify-web-player?style=for-the-badge
[release-url]: https://github.com/gaomingzhao666/Spotify-Web-Player/releases/tag