$ npm install mobin-ava-music-player
import AvaMusicPlayer from "mobin-ava-music-player";
import "mobin-ava-music-player/dist/style.css";
function App() {
return (
<>
<AvaMusicPlayer
playlist={{
id: 1,
scope: "audiom",
name: "playlist name",
cover: "playlist cover",
startIndex: 1,
description: "playlist description",
items: [
{
music_id: "1",
name: "music name",
artist: [
{
artist_name: "artist name",
artist_id: 1,
},
],
cover: "music cover",
url: ["music url"],
lyric: "music lyric",
timestamp: 1,
quality: "320",
from: "string",
music_duration: 1,
mood: [""],
genre: [""],
tags: [""],
},
],
}}
/>
</>
);
}
<div id="root"></div>
<div id="ava-music-player-dialog-root"></div>
<!-- Add This line for player portal -->
API | Type | required | Default | Description |
---|---|---|---|---|
playlist | PlaylistType | ✓ | - | playlist data |
log | boolean | ✘ | - | If set to 'true,' it enables logging |
xWebId | string | ✘ | - | Set x-web-id to log request header |
provider | string | ✘ | "unknown" | set provider to send in log request |
playStatus | boolean | ✘ | - | set play status |
preFetchAudioCount | number | ✘ | 5 | Define number of prefetch audios |
preFetchAudioSize | number(MB) | ✘ | 100 MB | Define maximum size of prefetch |
onClose | function => {} | ✘ | - | Music player close event |
onOpenFullscreen | function => {} | ✘ | - | Event trigger when music player get full screen |
onCloseFullscreen | function => {} | ✘ | - | Event trigger when music player minimize from full screan |
onMusicChange | function => music | ✘ | - | Event trigger when active music change and reutrns audio and it's index in musics list |
onPlay | function => music | ✘ | - | Event trigger on music change or play |
onPlay | function => {} | ✘ | - | Event trigger on music pause |
onError | function => url, isLastUrl, music | ✘ | - | Event trigger when music url is bloken |
PlaylistType:
API | Type | required | Default | Description |
---|---|---|---|---|
id | number | ✓ | - | playlist id |
scope | string | ✓ | - | It indicates the service user of the web service. Its value for audiom is 'audiom' |
name | string | ✓ | - | Playlist name |
description | string | ✓ | - | Playlist description |
cover | string,null | ✓ | - | Playlist cover |
timestamp | number | ✘ | - | Playlist create date |
shareUrl | string | ✘ | - | Share url of playlist |
startIndex | number | ✓ | - | Each playlist has a startIndex. When played, it starts playing the music that corresponds to this index, (Change it to change the playing music) |
items | AudioType | ✓ | - | List of musics |
AudioType:
API | Type | required | Default | Description |
---|---|---|---|---|
music_id | string | ✓ | - | Music Id |
name | string | ✓ | - | Music name |
artist | Artist[] | ✓ | - | Music artists information |
cover | string , null | ✓ | - | Music Cover |
url | string[] | ✓ | - | Music urls |
lyric | string | ✘ | - | Music lyric |
shareUrl | string | ✘ | - | Music share url |
timestamp | number | ✓ | - | Music create date |
quality | string | ✓ | - | Music quality |
from | string | ✓ | - | It specifies where the music should be played from. It could be from a specific page like the home page or an artist's page, a playlist, shuffle mode, or the respective album. |
music_duration | number | ✓ | - | Music duration |
mood | string[] | ✓ | - | Music moods list |
genre | string[] | ✓ | - | Music genres list |
tags | string[] | ✓ | - | Music tags list |
Artist:
API | Type | required | Default | Description |
---|---|---|---|---|
artist_name | string | ✓ | - | Artist name |
artist_id | string | ✓ | - | Artist Id |