Package Exports

react-awesome-audio
react-awesome-audio/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-awesome-audio) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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.

JSPM