This is a Next.js project bootstrapped with create-next-app.


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
name={"Beautiful World (Da Capo Version)"}
artist={"宇多田ヒカル"}
url={"https://music.163.com/song/media/outer/url?id=1824020873.mp3"}
picUrl={
"https://p2.music.126.net/l3G4LigZnOxFE9lB4bz_LQ==/109951165791860501.jpg?param=34y34"
}
onCollect={() => {
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