❀Notwithstanding Previous Misdemeanors

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

    1.1.0Β β€’Β PublicΒ β€’Β Published

    react-awesome-audio

    Optimized and Supercharged React hook to play audio without any DOM element πŸ’ͺ🎧

    Find the npm package here

    npm version

    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

    Install

    npm i react-awesome-audio

    DownloadsWeekly Downloads

    32

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    10.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • niloysikdar