https://github.com/tohsaka888/netease-music-player

Building netease-cloud-music style music player with React
https://github.com/tohsaka888/netease-music-player

music music-player nextjs react

Last synced: 4 months ago
JSON representation

Building netease-cloud-music style music player with React

• Host: GitHub
• URL: https://github.com/tohsaka888/netease-music-player
• Owner: tohsaka888
• License: mit
• Created: 2022-11-13T08:17:55.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-29T13:15:43.000Z (4 months ago)
• Last Synced: 2024-10-29T16:00:05.623Z (4 months ago)
• Topics: music, music-player, nextjs, react
• Language: TypeScript
• Homepage:
• Size: 653 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

[![CodeFactor](https://www.codefactor.io/repository/github/tohsaka888/netease-music-player/badge?style=flat-square)](https://www.codefactor.io/repository/github/tohsaka888/netease-music-player)

[![GitHub Release Date](https://img.shields.io/github/release-date/tohsaka888/netease-music-player.svg?style=flat-square)](https://github.com/tohsaka888/netease-music-player/releases)

[![npm package](https://img.shields.io/npm/v/netease-music-player.svg?style=flat-square)](https://www.npmjs.org/package/netease-music-player)

[![NPM downloads](http://img.shields.io/npm/dm/netease-music-player.svg?style=flat-square)](https://npmjs.org/package/netease-music-player)

[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/tohsaka888/netease-music-player/blob/master/LICENSE)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

## Demo

https://user-images.githubusercontent.com/58759688/201613972-351dd14b-175b-4bf4-8e3f-b9b108768002.mp4

## install

suggest use `pnpm` to install the package.

```bash

pnpm i netease-music-player

# or

npm i netease-music-player

# or

yarn add netease-music-player

```

## useage

```tsx

 {

    console.log("collected");

  }}

  onModeChange={(mode) => {

    console.log(mode);

  }}

  onPictureInPicture={() => {

    console.log("pip");

  }}

  onPlayNext={() => {

    console.log("play next");

  }}

  onPlayPrev={() => {

    console.log("play prev");

  }}

  onShare={() => {

    console.log("share");

  }}

  playlistLength={10}

/>

```

## props

```ts

export type ModeProps = "single-cycle" | "list-cycle" | "random";

export type MusicPlayerProps = {

  name: string | React.ReactNode;

  artist: string | React.ReactNode;

  url: string;

  autoplay?: boolean;

  picUrl: string;

  onPlayNext: () => void;

  onPlayPrev: () => void;

  onPictureInPicture: () => void;

  onCollect: () => void;

  onShare: () => void;

  onModeChange: (mode: ModeProps) => void;

  playlistLength: number;

};

```

## develop

first, clone this repository.

```bash

git clone https://github.com/tohsaka888/netease-music-player.git

```

then, install the packages.

```bash

pnpm i

```

open the develop server

```bash

pnpm dev

```

## license

MIT