https://www.npmjs.com/package/react-modern-audio-player


skip to package search or skip to sign in
Neil Patrick's Mansion

  * Products
      + Pro
      + Teams
  * Pricing
  * Documentation

npm

 
[                    ]
Search
Sign UpSign In

react-modern-audio-player
TypeScript icon, indicating that this package has built-in type
declarations

1.2.2 * Public * Published a day ago

  * Readme
  * Explore BETA
  * 8 Dependencies
  * 0 Dependents
  * 13 Versions

                           rm-audio-player

                      React Modern Audio Player

                 License Version Download BundleSize

 DEMO

https://codesandbox.io/s/basic-91y82y?file=/src/App.tsx

 Flexible and Customizable UI

 This can offer waveform by wavesurfer.js

[180435472-f043dbb4-54df-43e0-bc5c-67492510e817]

 This can offer various UI and you can also customize each component
position

    Full View [180435489-263fae23-f066-4a37-a524-58918eb40b0c]

    Position Change [180435493-2c2e08c5-b67b-4ab7-aded-5a0403d42050]

    Particular View [180435497-0f839cd1-e1fd-400f-a013]
    [180435479-4f] [180435484-33] [180435486-2402ba80-7121-410c-9a06]

 Installation

npm install --save react-modern-audio-player

 Quick Start

import AudioPlayer from 'react-modern-audio-player';

const playList = [
  {
    name: 'name',
    writer: 'writer',
    img: 'image.jpg',
    src: 'audio.mp3',
    id: 1,
  },
]
function Player (){
        return (
                <AudioPlayer playList={playList} />
        )
}

 Props

interface AudioPlayerProps {
  playList: PlayList;
  audioInitialState?: AudioInitialState;
  activeUI?: ActiveUI;
  customIcons?: CustomIcons;
  coverImgsCss?: CoverImgsCss;
  placement?: {
    player?: PlayerPlacement;
    playList?: PlayListPlacement;
    interface?: InterfacePlacement;
    volumeSlider?: VolumeSliderPlacement;
  };
}

      Prop              Type                     Default
playList          PlayList          [ ]
audioInitialState AudioInitialState isPlaying: false repeatType:
                                    "ALL" volume: 1
activeUI          ActiveUI          playButton : true
customIcons       CustomIcons       undefined
coverImgsCss      CoverImgsCss      undefined
                                    playListPlacement : "bottom"
placement         Placement         interfacePlacement :
                                    DefaultInterfacePlacement

 PlayList

type PlayList = Array<AudioData>;
type AudioData = {
  src: string;
  id: number;
  name?: string | ReactNode;
  writer?: string | ReactNode;
  img?: string;
  description?: string | ReactNode;
  customTrackInfo?: string | ReactNode;
};

 audioInitialState

type AudioInitialState = Omit<
  React.AudioHTMLAttributes<HTMLAudioElement>,
  "autoPlay"
> & {
        isPlaying?: boolean;
  repeatType?: RepeatType;
  volume?: number;
  currentTime?: number;
  duration?: number;
  curPlayId: number;
};

 activeUI

type ActiveUI = {
  all: boolean;
  playButton: boolean;
  playList: PlayListUI;
  prevNnext: boolean;
  volume: boolean;
  volumeSlider: boolean;
  repeatType: boolean;
  trackTime: boolean;
  trackInfo: boolean;
  artwork: boolean;
  progress: ProgressUI;
};
type ProgressUI = "waveform" | "bar" | false;
type PlayListUI = "sortable" | "unSortable" | false;

 customIcons

type CustomIcons = {
  play: ReactNode;
  pause: ReactNode;
  prev: ReactNode;
  next: ReactNode;
  repeatOne: ReactNode;
  repeatAll: ReactNode;
  repeatNone: ReactNode;
  repeatShuffle: ReactNode;
  volumeFull: ReactNode;
  volumeHalf: ReactNode;
  volumeMuted: ReactNode;
  playList: ReactNode;
};

 coverImgsCss

interface CoverImgsCss {
  artwork?: React.CSSProperties;
  listThumbnail?: React.CSSProperties;
}

 placement

type PlayerPlacement =
  | "bottom"
  | "top"
  | "bottom-left"
  | "bottom-right"
  | "top-left"
  | "top-right";

type VolumeSliderPlacement = "bottom" | "top" | 'left' | 'right';

type PlayListPlacement = "bottom" | "top";

type InterfacePlacement = {
  templateArea?: InterfaceGridTemplateArea;
  itemCustomArea?: InterfaceGridItemArea;
};

type InterfaceGridTemplateArea = Record<InterfacePlacementKey,InterfacePlacementValue>
type InterfacePlacementKey =
  | Exclude<keyof ActiveUI, "all" | "prevNnext" | "trackTime">
  | "trackTimeCurrent"
  | "trackTimeDuration";
type InterfacePlacementValue = "row1-1" | "row1-2" | "row1-3" | "row1-4" | ... more ... | "row9-9";

type InterfaceGridItemArea = Partial<Record<InterfacePlacementKey, string>>;
        /** example
        * progress : 2-4
        * repeatBtn : row1-4 / 2 / row1-4 / 10
        *
        * check MDN - grid area
        * https://developer.mozilla.org/ko/docs/Web/CSS/grid-area
        */

 Default interface placement

const defaultInterfacePlacement = {
  templateArea: {
    artwork: "row1-1",
    trackInfo: "row1-2",
    trackTimeCurrent: "row1-3",
    trackTimeDuration: "row1-4",
    progress: "row1-5",
    repeatType: "row1-6",
    volume: "row1-7",
    playButton: "row1-8",
    playList: "row1-9",
  },
};

 Override Style

 Theme mode ( dark-mode )

    it apply dark-mode depending on system-theme you can customize
    color-theme by css-variable of react-spectrum theme-default

 ID & Classnames

 root ID

  * rm-audio-player

 root ClassName

  * rm-audio-player-provider

 color variables

--rm-audio-player-interface-container:var(--spectrum-global-color-gray-100);
--rm-audio-player-volume-background: #ccc;
--rm-audio-player-volume-panel-background:#f2f2f2;
--rm-audio-player-volume-panel-border:#ccc;
--rm-audio-player-volume-thumb: #d3d3d3;
--rm-audio-player-volume-fill:rgba(0, 0, 0, 0.5);
--rm-audio-player-volume-track:#ababab;
--rm-audio-player-track-current-time:#0072F5;
--rm-audio-player-track-duration:#8c8c8c;
--rm-audio-player-progress-bar:#0072F5;
--rm-audio-player-progress-bar-background:#D1D1D1;
--rm-audio-player-waveform-cursor:var(--spectrum-global-color-gray-800);
--rm-audio-player-waveform-background:var(--rm-audio-player-progress-bar-background);
--rm-audio-player-waveform-bar:var(--rm-audio-player-progress-bar);
--rm-audio-player-sortable-list:var(--spectrum-global-color-gray-200);
--rm-audio-player-sortable-list-button-active:#0072F5;
--rm-audio-player-selected-list-item-background:var(--spectrum-global-color-gray-500);

// ...spectrum theme palette and so on... //

 Example

function App() {
  return (
    <div>
      <AudioPlayer
        playList={playList}
        audioInitialState={{
          muted: true,
          volume: 0.2,
          curPlayId: 1,
        }}
        placement={{
          interface: {
            templateArea: {
              trackTimeDuration: "row1-5",
              progress: "row1-4",
              playButton: "row1-6",
              repeatType: "row1-7",
              volume: "row1-8",
            },
          },
          player: "bottom-left",
        }}
        activeUI={{
          all: true,
          progress: "waveform",
        }}
      />
    </div>
  );
}

Keywords

  * audio
  * music
  * player
  * media
  * react
  * react-modern-audio-player

Install

npm i react-modern-audio-player

Repository

 github.com/slash9494/react-modern-audio-player

Homepage

github.com/slash9494/react-modern-audio-player/

Weekly Downloads

122

Version

1.2.2

License

MIT

Unpacked Size

594 kB

Total Files

86

Last publish

a day ago

Collaborators

  * slash9494

Try on RunKit
Report malware
 
 
Return to top of pageSupport

  * Help
  * Advisories
  * Status
  * Contact npm

Company

  * About
  * Blog
  * Press

Terms & Policies

  * Policies
  * Terms of Use
  * Code of Conduct
  * Privacy