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'), )

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()}> destroy player </button> <button onClick={this.audio.togglePlay}>toggle play</button> <button onClick={this.audio.clear}>clear audio lists</button> <button onClick={this.audio.playNext}>play next</button> <button onClick={this.audio.playPrev}>play prev</button> <button onClick={() => this.audio.playByIndex(1)}>play by index</button> <button onClick={() => this.audio.updatePlayIndex(1)}> update play index </button> </> ) } }

<ReactJkMusicPlayer glassBg />

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} />

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) } ;<ReactJkMusicPlayer showDestroy onBeforeDestroy={onBeforeDestroy} onDestroyed={onDestroyed} />

// so cool, so easy !!! <ReactJkMusicPlayer showMediaSession />

import Locale from 'react-jinke-music-player/lib/config/locale' // Two languages are provided by default // one of zh_CN | en_US <ReactJkMusicPlayer locale={Locale.zh_CN}/> // <ReactJkMusicPlayer locale={'en_US'}/> // Custom override const customLocale = { playModeText: { order: '', orderLoop: '', singleLoop: '', shufflePlay: '' }, openText: '', closeText: '', emptyText: '', clickToPlayText: '', clickToPauseText: '', nextTrackText: '', previousTrackText: '', reloadText: '', volumeText: '', playListsText: '', toggleLyricText: '', toggleMiniModeText: '', destroyText: '', downloadText: '', lightThemeText: '', darkThemeText: '', switchThemeText: '', removeAudioListsText: '', controllerTitle: '', emptyLyricText: '', clickToDeleteText: (name) => ``, audioTitle: '' // audioTitle: (audioInfo) => `` } <ReactJkMusicPlayer locale={customLocale}/> // Support partial override, auto merge <ReactJkMusicPlayer locale={{ audioTitle: "xxx" }}/>

import ReactJkMusicPlayer from 'react-jinke-music-player' import 'react-jinke-music-player/lib/styles/index.less'

<ReactJkMusicPlayer audioLists={[{ ... duration: 100.00 }]} />

<ReactJkMusicPlayer theme="auto" />

/**  * Don't interrupt current playing state when audio list updated  * eg. (A) is current playing...  * [A,B] => [A,C,B]  * [A,B] => [A,B,C]  *  * if (A) not in updated audio lists  * [A,B] => [C]  * (C) is playing  */ function App() { const [audioLists, setAudioLists] = useState([ { musicSrc: 'A' }, { musicSrc: 'B' }, ]) useEffect(() => { setTimeout(() => { setAudioLists([{ musicSrc: 'A' }, { musicSrc: 'C' }, { musicSrc: 'B' }]) }, 1000) }, [setAudioLists]) return ( <ReactJkMusicPlayer quietUpdate clearPriorAudioLists audioLists={audioLists} /> ) }

// components/Player.js import React from 'react' import ReactJkMusicPlayer from 'react-jinke-music-player' import styles from 'react-jinke-music-player/assets/index.module.css' export const Player = () => <ReactJkMusicPlayer /> // pages/_app.js import dynamic from 'next/dynamic' const PlayerWithNoSSR = dynamic(() => import('../components/Player'), { ssr: false, })

// Default '(max-width: 768px) and (orientation : portrait)' <ReactJkMusicPlayer mobileMediaQuery="(max-width: 1024px)" />

<ReactJkMusicPlayer volumeFade={{ fadeIn: 500, fadeOut: 500 }} />