🚫 This project, which relies on the server-side APIs provided by NeteaseCloudMusicApi, is archived. This is because the server-side support APIs has been officially deleted, making this project can not add new features or improve existing functionalities that depend on these APIs. As a result, Spotify-Web-Player is no longer maintained.

Spotify Web Player

🎵 Web music platform developed based on Spotify UI/UX 🎵

English · 简体中文

Directory

• Introduction of Project
• Build With
• Environment Requirement
• Installation and Usage - Server
• Installation and Usage - Frontend
• Resolve CORS Problem
• Contributor
• UI design Reference
• LICENSE

Introduction of Project

The image shown here is a index-page for tablet-size, click here to see more detailed screenshot for this application.

A web music player UI/UX clone from Spotify Web Player AND data-source provided by NetEaseCloud Music

(back to top)

Build With

• Vue3 with composition API
• Vue-router
• Pinia
• Vite
• Less
• Element-plus
• ES6+
• Fetch

(back to top)

Environment Requirement

• NodeJS LTS16+
• Chrome67+ / Edge79+ / Safari12+
• suitable device size, such as a PC or laptop

Installation and Usage - Server

# clone the data-source support
git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
cd NeteaseCloudMusicApi
node app.js

Installation and Usage - Frontend

# clone this 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

Resolve CORS Problem

As a default, Because the CORS access has been not activated, Probably cannot use this project or there is no data has been loaded, There is several methods to resolve that problem

• use browser extension
• set CORS access when sending requests on the client side
• set CORS access when code interface on the Server side
• use builder such as webpack/vite etc

We use the first method as an instance

Recommend Allow CORS extension, Activate it when the setup is done, Of course, you can choose another extension or method to resolve that problem

(back to top)

UI Design Reference

YouTube Spotify

(back to top)

Contributor

The project developed by gaomingzhao666@Nano， there is the data-source support (unmaintained now)- NeteaseCloudMusicApi

(back to top)

LICENSE

Apache License 2.0

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.

(back to top)