react-jinke-music-player
π΅ Maybe the best beautiful HTML5 responsive player component for react : )
Installation
using yarn :
yarn add react-jinke-music-player using npm :
npm install react-jinke-music-player --save Screenshots
mini mode
Light Theme
Dark Theme
mobile
Example
live example : https://lijinke666.github.io/react-music-player/
practical application : Jinke.Li's House
local example : http://localhost:8081/
Usage
import React from "react"; import ReactDOM from "react-dom"; import ReactJkMusicPlayer from "react-jinke-music-player"; import "react-jinke-music-player/assets/index.css"; ReactDOM.render( <ReactJkMusicPlayer {...options} />, document.getElementById("root") );API
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS class for the root DOM node |
| audioLists | object[] | - | detail |
| theme | string | dark | color of the music player theme dark |
| defaultPosition | object | {top:0,left:0} | audio controller initial position with left,top,right,and bottom |
| playModeText | object | {order: "order",orderLoop: "orderLoop",singleLoop: "singleLoop",shufflePlay:"shufflePlay"}` | play mode text config of the audio player |
| playModeShowTime | number | 600 | play mode toggle show time (ms) |
| bounds | object,number | body | specifies movement boundaries. Accepted values: parent restricts movement within the node's offsetParent (nearest node with position relative or absolute), or a selector, restricts movement within the targeted node An object with left, top, right, and bottom properties. These indicate how far in each direction the draggable can be moved. |
| preload | boolean,string | false | Whether to load audio immediately after the page loads. can be set to `auto |
| remember | boolean | false | The next time you access the player, do you keep the last state |
| glassBg | boolean | false | Whether the player's background displays frosted glass effect |
| remove | boolean | true | The Audio Can be deleted |
| defaultPlayIndex | number | 0 | Default play index of the audio player |
| playIndex | number | 0 | play index of the audio player |
| openText | string | open | audio controller open text |
| closeText | string | close | audio controller close text |
| panelTitle | string | PlayList | audio list panel title |
| notContentText | string | no music | audio list panel show text of the playlist has no songs |
| checkedText | string | - | audio theme switch checkedText |
| unCheckedText | string | - | audio theme switch unCheckedText |
| defaultPlayMode | string | order | default play mode of the audio player options can be set to order,orderLoop,singleLoop,shufflePlay or omitted |
| mode | string | mini | audio theme switch checkedText can be set to mini,full or omitted |
| once | boolean | false | The default audioPlay handle function will be played again after each pause, If you only want to trigger it once, you can set 'true' |
| autoPlay | boolean | true | Whether the audio is played after loading is completed. |
| toggleMode | boolean | true | Whether you can switch between two modes, full => mini or mini => full |
| drag | boolean | true | audio controller is can be drag of the "mini" mode |
| seeked | boolean | true | Whether you can drag or click the progress bar to play in the new progress. |
| showMiniModeCover | boolean | true | audio cover is show of the "mini" mode |
| showMiniProcessBar | boolean | false | audio progress circle bar is show of the "mini" mode |
| showProgressLoadBar | boolean | true | Displays the audio load progress bar. |
| showPlay | boolean | true | play button display of the audio player panel |
| showReload | boolean | true | reload button display of the audio player panel |
| showDownload | boolean | true | download button display of the audio player panel |
| showPlayMode | boolean | true | play mode toggle button display of the audio player panel |
| showThemeSwitch | boolean | true | theme toggle switch display of the audio player panel |
| showLyric | boolean | false | audio lyric button display of the audio player panel |
| lyricClassName | string | - | audio lyric class name |
| emptyLyricPlaceholder | string | - | audio lyric empty lyric placeholder |
| extendsContent | array | - | Extensible custom content like [<button>button1</button>,<button>button2</button>] |
| controllerTitle | string | <FaHeadphones/> | audio controller title |
| defaultVolume | number | 100 | default volume of the audio player , range 0-100 |
| loadAudioErrorPlayNext | boolean | true | Whether to try playing the next audio when the current audio playback fails |
| onAudioDownload | function(audioInfo) | - | audio is downloaded handle |
| onAudioPlay | function(audioInfo) | - | audio play handle |
| onAudioPause | function(audioInfo) | - | audio pause handle |
| onAudioSeeked | function(audioInfo) | - | When the user has moved/jumped to a new location in audio handle |
| onAudioVolumeChange | function(audioInfo) | - | When the volume has changed handle min = 0.0 max = 1.0 |
| onAudioEnded | function(audioInfo) | - | The single song is ended handle |
| onAudioAbort | function(audioInfo) | - | audio load abort The target event like {...,audioName:xx,audioSrc:xx,playMode:xx} |
| onAudioProgress | function(audioInfo) | - | audio play progress handle |
| onAudioLoadError | function(audioInfo) | - | audio load failed error handle |
| onAudioReload | function(audioInfo) | - | audio reload handle |
| onAudioListsChange | function(currentPlayIndex,audioLists,audioInfo) | - | audio lists change handle |
| onAudioPlayTrackChange | function(currentPlayIndex,audioLists,audioInfo) | - | audio current play track change handle |
| onAudioPlayModeChange | function(playMode) | - | play mode change handle |
| onAudioListsPanelChange | function(panelVisible) | - | audio lists panel change handle |
| onThemeChange | function(theme) | - | theme change handle |
| onModeChange | function(mode) | - | mode change handle |
| onAudioListsDragEnd | function(fromIndex,endIndex) | - | audio lists drag end handle |
| onAudioLyricChange | function(lineNum, currentLyric) | - | audio lyric change handle |
Development
git clone https://github.com/lijinke666/react-music-player.git yarn | npm install yarn start | npm start open `http://localhost:8081/` Test case
npm run test AudioList
Like This
interface ReactJkMusicPlayerAudioList { name: string | React.ReactNode, singer?: string | React.ReactNode, cover: string, musicSrc: string | () => Promise<string>, lyric?: string, }>AudioInfo
Like This
interface ReactJkMusicPlayerAudioInfo { cover: string, currentTime: number, duration: number, ended: boolean, musicSrc: string, muted: boolean, name: string, networkState: number, paused: boolean, played: any, readyState: number, startDate: any volume: number, lyric: string, }Properties
interface ReactJkMusicPlayerProps { audioLists: Array<ReactJkMusicPlayerAudioList>, theme?: ReactJkMusicPlayerTheme, mode?: ReactJkMusicPlayerMode, defaultPlayMode?: ReactJkMusicPlayerPlayMode drag?: boolean, seeked?: boolean, autoPlay?: boolean, playModeText?: { order: string | React.ReactNode, orderLoop: string | React.ReactNode, singleLoop: string | React.ReactNode, shufflePlay: string | React.ReactNode }, panelTitle?: string | React.ReactNode, closeText?: string | React.ReactNode, openText?: string | React.ReactNode, notContentText?: string | React.ReactNode, controllerTitle?: string | React.ReactNode, defaultPosition?: { top: number | string, left: number | string, right: number | string, bottom: number | string }, onAudioPlay?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void, onAudioPause?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void, onAudioEnded?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void, onAudioAbort?: (data: any) => void, onAudioVolumeChange?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void, onAudioLoadError?: (data: any) => void, onAudioProgress?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void, onAudioSeeked?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void, onAudioDownload?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void, onAudioReload?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void, onThemeChange?: (theme: ReactJkMusicPlayerTheme) => void, onAudioListsChange?: (currentPlayId: string, audioLists: Array<ReactJkMusicPlayerAudioList>, audioInfo: ReactJkMusicPlayerAudioInfo) => void, onPlayModeChange?: (playMode: ReactJkMusicPlayerPlayMode) => void, onModeChange?: (mode: ReactJkMusicPlayerMode) => void, onAudioListsPanelChange?: (panelVisible: boolean) => void, onAudioPlayTrackChange?: (fromIndex: number, endIndex: number) => void, onAudioListsDragEnd?: (currentPlayId: string, audioLists: Array<ReactJkMusicPlayerAudioList>, audioInfo: ReactJkMusicPlayerAudioInfo) => void, showDownload?: boolean, showPlay?: boolean, showReload?: boolean, showPlayMode?: boolean, showThemeSwitch?: boolean, showMiniModeCover?: boolean, toggleMode?: boolean, once?: boolean, extendsContent?: Array<React.ReactNode | string>, checkedText?: string | React.ReactNode, unCheckedText?: string | React.ReactNode, defaultVolume?: number, playModeShowTime?: number, bounds?: string | React.ReactNode, showMiniProcessBar?: boolean, loadAudioErrorPlayNext?: boolean, preload?: boolean | "auto" | "metadata" | "none", glassBg?: boolean, remember?: boolean, remove?: boolean, defaultPlayIndex?: number, playIndex?: number, lyricClassName?: string, emptyLyricPlaceholder?: string | React.ReactNode, showLyric?: boolean, }
