@logicsquare/react-audio-player NPM

React Audio Player

Custom audio player component with support for different browsers.
Written in TypeScript
Highly customizable layout
Mobile responsive

Supported browsers: Chrome, Firefox, Safari, Edge

Installation

$ npm i @logicsquare/react-audio-player

$ yarn add @logicsquare/react-audio-player

Usage

import CustomAudioPlayer from "@logicsquare/react-audio-player";

const Player = () => (
  <CustomAudioPlayer
    theme="#ff9900"
    media={[
      {
        title: "Some Title 1",
        url: "http://example.com/audio1.mp3",
        thumbnail: "http://example.com/thumbnail1.jpg",
        artist: "Artist Name 1",
      },
      {
        title: "Some Title 2",
        url: "http://example.com/audio2.mp3",
        thumbnail: "http://example.com/thumbnail2.jpg",
        artist: "Artist Name 2",
      },
    ]}
    // other props here
  />
);

Keyboard shortcuts (When audio player focused)

They can be turned off by setting hasDefaultKeyShortcuts prop to false

Key binding	Action
Space	Play/Pause
←	Skip Backward
→	Skip Forward
↑	Volume up
↓	Volume down
M	Toggle mute

Player Props

Props	Type	Default	Note
theme (optional)	string	#000000	Set theme of the player
media	Array<object>	undefined	Pass an array of objects where each object contains audio details
skipTime (optional)	number	10	Set the time in seconds for skipping audio forward or backward
showSkipButtons (optional)	boolean	true	Show skip buttons for skipping forward and backward
showVolumeControl (optional)	boolean	true	Show volume control for adjusting volume
showPlaybackSpeedControls (optional)	boolean	true	Show playback speed controls for adjusting playback speed
hasDefaultKeyShortcuts (optional)	boolean	true	Wheather to have default keyboard shortcuts