react-audio-kit

react-audio-kit is a react ui library that contains the web based audio components in a well abstracted form.

Documentation

For well defined documentation and quick hands-on please refer this.

Installation

Install my-project with npm

npm i react-audio-kit

In case, you are using typescript for development, make sure to do following change in your ts config file :

 {
  ...
  "compilerOptions": {
    ...
    "moduleResolution": "node",
    ...
  }
  ...
 }

Components

react-audio-kit comes with the following components :

Playlist manager :

This component provides you a simplest way to handle your playlists and gives you various features like :

• Pause/ Play audio
• Seek buffered-audio
• Loop control
• Volume control
• Custom theming

Preview

Usage

By default, this playlist-manager takes the list of audios to play and internally manages the states of the queue.

import { PlaylistManager } from "react-audio-kit"; // import the components from library
import "react-audio-kit/style.css"; // don't forget to import the styles from the library

export default function Home() {
  return (
    <>
      <PlaylistManager
        theme={{
          baseMediaButtonColor: "#FF69B4",
          hoveredMediaButtonColor: "#FF1493",
          mediaIconColor: "white",
          text: "black",
          loaderColor: "pink",
          shadow: true,
        }}
        audios={audios}
      />
    </>
  );
}
const audios = [
  {
    src: "https://previews.customer.envatousercontent.com/files/247158961/preview.mp3",
    img: undefined,
    subheading: "Subtitle 2",
  },
  {
    src: "https://previews.customer.envatousercontent.com/files/247158961/preview.mp3",
    img: undefined,
    subheading: "Subtitle 1",
  },
];

API

You can customize and use the Playlist Manager using following props :

| Prop | Type | Description | Default | | -------------------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | -------- | | audios | Array<Audio> | An array of audio objects to be played. | - | | getCurrentPlayback | (currentPlayback: CurrentPlaybackStateType & { bufferedProgressPercentage: number; }) => void | A callback function that provides the current playback state, including the buffered progress percentage. | - | | defaultPlayback | CurrentPlaybackStateType | An object defining the default playback state. | - | | preload | "auto" \| "metadata" \| "none" | Specifies if and how the audio should be preloaded. | "auto" | | theme | Theme | An object to customize the appearance of the playlist manager. See the Theme section below for details. | - | | hideImg | boolean | If true, hides the audio cover image. | false | | hideAudioName | boolean | If true, hides the audio name. | false | | hideLoopIcon | boolean | If true, hides the loop icon. | false | | onClickImage | () => void | A callback function triggered when the audio cover image is clicked. | - | | onClickTitle | () => void | A callback function triggered when the audio title is clicked. | - | | onClickSubtitle | () => void | A callback function triggered when the audio subtitle is clicked. | - | | borderRadius | number | Sets the border radius of the playlist manager. | - |

Theme

The theme object allows customization of the playlist manager's appearance:

| Property | Type | Description | Default | | --------------------------- | --------- | ----------------------------------------------------- | ------- | | baseMediaButtonColor | string | Color of the media buttons. | - | | hoveredMediaButtonColor | string | Color of the media buttons when hovered. | - | | mediaIconColor | string | Color of the media icons. | - | | background | string | Background color of the playlist manager. | - | | text | string | Text color. | - | | loaderColor | string | Color of the loading spinner. | - | | baseControlButtonColor | string | Color of the control buttons. | - | | hoveredControlButtonColor | string | Color of the control buttons when hovered. | - | | controlButtonIconColor | string | Color of the control button icons. | - | | shadow | boolean | If true, applies a shadow effect to the playlist manager. | false |

Audio

| Property | Type | Description | | ------------ | -------- | ---------------------------------------------------------- | | src | string | Address for the audio file | | img | string | Image source (if any) for the respective image of the song | | heading | string | Title of the audio file | | subheading | string | Subtitle of the audio file |

CurrentPlaybackStateType

| Property | Type | Description | | ------------- | --------- | ------------------------------------------------------- | | progress | number | The current progress of the audio file | | isPlaying | boolean | Whether the audio is currently playing | | volume | number | The volume level of the audio | | activeIndex | number | The index of the currently active audio in the playlist | | loading | boolean | Whether the audio is currently loading | | isError | boolean | Whether there was an error during playback | | looped | boolean | Whether the audio is set to loop |

Audio Recorder :

This component provides you a simplest way to your own voice in a well abstracted manner :

• Pause/ Resume/ Start recording
• Custom theming
• Getting audio blobs in certain time intervals
• Loudness indicators
• Senstivity management

Preview

Usage

By default, audio recorder do not require any props.

import { AudioRecorder } from "react-audio-kit"; // import the components from library
import "react-audio-kit/style.css"; // don't forget to import the styles from the library

export default function Home() {
  return (
    <>
      <AudioRecorder />
    </>
  );
}

The AudioRecorder component is a customizable audio recording utility with various event handlers and configurable properties. This document details the properties that can be passed to the component.

API

| Prop Name | Type | Description | | --------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------- | | getAudioBlobOnStop | (audioBlob: Blob) => void | Callback function that receives the final audio Blob when the recording stops. | | getCurrentAudioBlobPacket | (audioBlob: Blob) => void | Callback function that receives the current audio Blob packets during recording. | | handleError | (error: any) => void | Callback function that handles any errors that occur during the recording process. | | timeSlice | number | Optional parameter specifying the time interval (in milliseconds) at which audio packets are delivered. | | onPause | () => void | Callback function called when the recording is paused. | | onRecord | () => void | Callback function called when the recording starts. | | onResume | () => void | Callback function called when the recording resumes after being paused. | | onStop | () => void | Callback function called when the recording stops. | | sensitivity | number | Optional parameter setting the microphone sensitivity. | | color | Color | Object to customize the color scheme of the audio recorder UI. |

Color

| Property Name | Type | Description | | ------------- | -------- | ---------------------------------------------------- | | base | string | Base color for the audio recorder interface. | | hover | string | Color used when elements are hovered over. | | auora | string | Additional accent color for special UI elements. | | iconColor | string | Color for icons within the audio recorder interface. |

Contributing

Provide guidelines for contributing to the library.

## Contributing

We welcome contributions! Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch: `git checkout -b my-feature-branch`.
3. Make your changes and commit them: `git commit -m 'Add new feature'`.
4. Push to the branch: `git push origin my-feature-branch`.
5. Submit a pull request.

License

This project is licensed under the MIT License.