react-awesome-audio

Optimized and Supercharged React hook to play audio without any DOM element 💪🎧

Find the npm package here

Star the GitHub repo to keep the developer motivated ✨

Installation

• using npm

npm i react-awesome-audio

or

npm install --save react-awesome-audio

• using yarn

yarn add react-awesome-audio

Also be sure you have react installed in your app at version 16.8 or above.

Usage

Using audio URL

import { useAudio } from "react-awesome-audio";

const App = () => {
    const { isPlaying, play, pause, toggle } = useAudio({
        src: "https://p.scdn.co/mp3-preview/d09498fe7e41e26b90682c3b5a0819bbcc3378e2",
        loop: true,
    });

    return (
        <div>
            <button onClick={toggle}>{isPlaying ? "Pause" : "Play"}</button>
        </div>
    );
};

export default App;

Using asset audio

import { useAudio } from "react-awesome-audio";
import song from "./assets/song.mp3";

const App = () => {
  const { isPlaying, play, pause, toggle } = useAudio({
    src: song,
    loop: true,
  });

  return (
    <div>
      <button onClick={toggle}>{isPlaying ? "Pause" : "Play"}</button>
    </div>
  );
};

export default App;

Note: To import audio file from assets in TypeScript, you need to use require() instead of ES6 import, see this for more details.

Example

See the example directory for a basic working example of using this project. To run it locally, run npm install in the example directory and then npm start.

Options

Option	Type	Default	Description
src	String	required	Audio source
loop	Boolean	false	Loop the audio
volume	Number	1 (max)	Volume of the audio, ranging from 0(min) to 1(max)
muted	Boolean	false	Mute the audio, Note: if you pass both volume and muted: true, then audio will be muted
onLoadedData	Function	() => {}	call the function when the audio data has been loaded
onError	Function	() => {}	call the function when the audio encounters an error
onEnded	Function	() => {}	call the function when the audio ends

Bugs and Features

See the issues for a list of proposed features (and known issues). Feel free to raise new issues.

License

Distributed under the MIT License. See LICENSE for more information.

Author

Niloy Sikdar

• [email protected]
• GitHub
• LinkedIn