CreamR / Spotify-Web-Player

🎧以 Spotify 为UI层开发的在线音乐APP🎧 - 🎵Online music platform developed base on Spotify UI🎵

Spotify - Web Player

🎧 以 Spotify 为UI层开发的在线音乐APP 🎧

简体中文 · English

目录

• 项目介绍
• 技术栈
• 环境要求
• 安装与运行 - 服务器
• 安装与运行 - 前端
• 解决跨域问题
• UI设计参考
• 贡献者
• 开源协议

项目介绍

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+
• 适配电脑与平板页面

安装与运行 - 服务器

$ # clone the project
$ git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
$ cd NeteaseCloudMusicApi
$ node app.js

安装与运行 - 前端

$ # clone the project
$ git clone https://github.com/CreamR/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 插件, 下载安装后在使用此项目时启用它即可, 当然你也可以自行选择其他插件或者其他方法来解决跨域问题

(返回顶部)

UI 设计参考

YouTube Spotify

(返回顶部)

贡献者

此项目由 Gmz@creamR 开发，后端接口支持为 - NeteaseCloudMusicApi

(返回顶部)

开源协议

Apache License 2.0

CreamR/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.

(返回顶部)