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 :

practical application : Jinke.Li's House

local example : http://localhost:8081/

Source Code

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 \| ReactNode \| boolean \| string`	`-`	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
getContainer	`() => HTMLElement` \| `Selectors`	`document.body`	Return the mount node for Music player
getAudioInstance	`(instance: HTMLAudioElement) => void`	`-`	get origin audio element instance , you can use it do everything
autoHiddenCover	`boolean`	`false`	Auto hide the cover photo if no cover photo is available
onBeforeAudioDownload	`(audioInfo: ReactJkMusicPlayerAudioInfo) => Promise<TransformedDownloadAudioInfo>`	`-`	transform download audio info before

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,
  [key: string]: any
}>

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,
  [key: string]: any
}

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, transformedDownloadAudioInfo: TransformedDownloadAudioInfo) => 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> | React.ReactNode | boolean | 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,
  getContainer?: () => HTMLElement
  getAudioInstance?: (instance: HTMLAudioElement) => void
  autoHiddenCover?: boolean
  onBeforeAudioDownload?: (
    audioInfo: ReactJkMusicPlayerAudioInfo
  ) => Promise<TransformedDownloadAudioInfo>
}

export interface TransformedDownloadAudioInfo {
  src: string
  filename?: string
  mimeType?: string
}

License

MIT

estien/react-music-player

react-jinke-music-player

🎵 Maybe the best beautiful HTML5 responsive player component for react : )

Installation

Screenshots

Example

Usage

API

Development

Test case

AudioList

AudioInfo

Properties

License