Nothing Precedes Matter


    1.1.1 • Public • Published



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

    npm npm Build Status npm version Coverage Status

    中文文档 (Chinese documentation)


    using yarn :

    yarn add react-amai-music-player

    using npm :

    npm install react-amai-music-player --save


    mini mode

    mini mode

    Light Theme

    light theme

    Dark Theme

    dark theme




    live example :

    practical application : Jinke.Li's House

    local example : http://localhost:8081/

    Source Code


    import React from "react";
    import ReactDOM from "react-dom";
    import ReactJkMusicPlayer from "react-amai-music-player";
    import "react-amai-music-player/assets/index.css";
      <ReactJkMusicPlayer {...options} />,


    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|metadata|none true|false if preload=true preload="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
    getContainer () => HTMLElement | Selectors document.body Return the mount node for Music player


    git clone
    yarn | npm install
    yarn start | npm start
    open `http://localhost:8081/`

    Test case

    npm run test


    Like This

    interface ReactJkMusicPlayerAudioList {
      name: string | React.ReactNode,
      singer?: string | React.ReactNode,
      cover: string,
      musicSrc: string | () => Promise<string>,
      lyric?: string,


    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,


    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,
      getContainer?: () => HTMLElement




    npm i react-amai-music-player

    DownloadsWeekly Downloads






    Unpacked Size

    1.07 MB

    Total Files


    Last publish


    • maxbaluev