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/
• https://react-jinke-music-player.netlify.com/

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	1	default volume of the audio player , range 0-1
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(volume)	-	When the volume has changed handle min = 0.0 max = 1.0
onAudioEnded	function(currentPlayId,audioLists,audioInfo)	-	The single song is ended handle
onAudioAbort	function(currentPlayId, audioLists, audioInfo)	-	audio load abort The target event like {...,audioName:xx,audioSrc:xx,playMode:xx}
onAudioProgress	function(audioInfo)	-	audio play progress handle
onAudioLoadError	function(errMsg,currentPlayId, audioLists, audioInfo)	-	audio load failed error handle
onAudioReload	function(audioInfo)	-	audio reload handle
onAudioListsChange	function(currentPlayId,audioLists,audioInfo)	-	audio lists change handle
onAudioPlayTrackChange	function(currentPlayId,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
clearPriorAudioLists	boolean	false	Replace a new playlist with the first loaded playlist,
autoPlayInitLoadPlayList	boolean	false	Play your new play list right after your new play list is loaded turn false.
spaceBar	boolean	false	Play and pause audio through space bar （Desktop effective）.
showDestroy	boolean	false	Destroy player button display
onBeforeDestroy	function(currentPlayId,audioLists,audioInfo)	-	custom destroy handler before
onDestroyed	function(currentPlayId,audioLists,audioInfo)	-	player destroyed handle
customDownloader	function(downloadInfo: TransformedDownloadAudioInfo)	-	custom download handle
audioTitle	string | (audioInfo: ReactJkMusicPlayerAudioInfo) => string	{name} - {signer}	custom audio title

Custom operation ui

Support feature:

• play
• pause
• reload
• change play time
• change playbackRate
• change volume
• destroy audio player

class App extends React.Component{
  constructor() {
    this.audioInstance = null
  }
  render() {
    return (
      <>
        <ReactJkMusicPlayer getAudioInstance={instance => this.audioInstance = instance}/>
        <button onClick={() => this.audioInstance.play()}>play</button>
        <button onClick={() => this.audioInstance.pause()}>pause</button>
        <button onClick={() => this.audioInstance.load()}>reload</button>
        <button onClick={() => (this.audioInstance.currentTime = 40)}>
          change current play time
        </button>
        <button onClick={() => (this.audioInstance.playbackRate = 2)}>
          change play back rate
        </button>
        <button onClick={() => (this.audioInstance.volume = 0.2)}>change volume</button>
        <button onClick={() => this.audioInstance.destroy()}>destory player</button>
      </>
    )
  }
}

Glass bg

<ReactJkMusicPlayer glassBg/>

Custom downloader

eg. https://www.npmjs.com/package/file-saver

const customDownloader = (downloadInfo) => {
  const link = document.createElement('a')
  link.href = downloadInfo.src // a.mp3
  link.download = downloadInfo.filename || 'test'
  document.body.appendChild(link)
  link.click()
}
<ReactJkMusicPlayer audioLists={[{src: "a.mp3"}]} customDownloader={customDownloader}/>

// use onBeforeAudioDownload
const onBeforeAudioDownload = () => {
  return Promise.resolve({
    src: '1.mp3',
  })
}

const customDownloader = (downloadInfo) => {
  console.log(downloadInfo.src) // 1.mp3
}
<ReactJkMusicPlayer customDownloader={customDownloader} onBeforeAudioDownload={onBeforeAudioDownload}/>

Destory player

  const onBeforeDestroy = (currentPlayId, audioLists, audioInfo) => {
    return new Promise((resolve, reject) => {
      // your custom validate
      if (window.confirm('Are you confirm destroy the player?')) {
        // if resolve, player destroyed
        resolve()
      } else {
        // if reject, skip.
        reject()
      }
    })
  }

  const onDestroyed = (currentPlayId, audioLists, audioInfo) => {
    console.log('onDestroyed:', currentPlayId, audioLists, audioInfo)
  }

  ReactDOM.render(
    <ReactJkMusicPlayer
      showDestroy
      onBeforeDestroy={onBeforeDestroy}
      onDestroyed={onDestroyed}
    />
  )

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

export 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?: (
    currentPlayId: string,
    audioLists: Array<ReactJkMusicPlayerAudioList>,
    audioInfo: ReactJkMusicPlayerAudioInfo
  ) => void
  onAudioAbort?: (
    currentPlayId: string,
    audioLists: Array<ReactJkMusicPlayerAudioList>,
    audioInfo: ReactJkMusicPlayerAudioInfo
  ) => void
  onAudioVolumeChange?: (volume: number) => void
  onAudioLoadError?: (
    errMsg: any,
    currentPlayId: string,
    audioLists: Array<ReactJkMusicPlayerAudioList>,
    audioInfo: ReactJkMusicPlayerAudioInfo
  ) => 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
  showDestroy?: 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>
  clearPriorAudioLists?: boolean
  autoPlayInitLoadPlayList?: boolean
  spaceBar?: boolean
  onBeforeDestroy?: (
    currentPlayId: string,
    audioLists: Array<ReactJkMusicPlayerAudioList>,
    audioInfo: ReactJkMusicPlayerAudioInfo
  ) => Promise<void>
  onDestroyed?: (
    currentPlayId: string,
    audioLists: Array<ReactJkMusicPlayerAudioList>,
    audioInfo: ReactJkMusicPlayerAudioInfo
  ) => Promise<void>
  customDownloader?: (downloadAudioInfo: TransformedDownloadAudioInfo) => void
  audioTitle?: ((audioInfo: ReactJkMusicPlayerAudioInfo) => string) | string
}

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

export interface ReactJkMusicPlayerInstance extends HTMLAudioElement {
  destroy: () => void
}

License

MIT