https://github.com/niloysikdar/react-awesome-audio
A package with Optimized and Supercharged React hook to play audio without any DOM element 💪🎧
https://github.com/niloysikdar/react-awesome-audio
List: react-awesome-audio
audio-player hacktoberfest hacktoberfest-accepted hacktoberfest2022 hooks npm-package react
Last synced: 4 months ago
JSON representation
A package with Optimized and Supercharged React hook to play audio without any DOM element 💪🎧
- Host: GitHub
- URL: https://github.com/niloysikdar/react-awesome-audio
- Owner: niloysikdar
- License: mit
- Created: 2022-01-01T09:45:20.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-21T11:32:34.000Z (over 4 years ago)
- Last Synced: 2025-10-31T09:01:35.086Z (8 months ago)
- Topics: audio-player, hacktoberfest, hacktoberfest-accepted, hacktoberfest2022, hooks, npm-package, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-awesome-audio
- Size: 878 KB
- Stars: 30
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-awesome-audio
### Optimized and Supercharged React hook to play audio without any DOM element 💪🎧
Find the npm package [here](https://www.npmjs.com/package/react-awesome-audio)
### Star the [GitHub repo](https://github.com/niloysikdar/react-awesome-audio) 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 (
{isPlaying ? "Pause" : "Play"}
);
};
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 (
{isPlaying ? "Pause" : "Play"}
);
};
export default App;
```
**_Note: To import audio file from assets in TypeScript, you need to use require() instead of ES6 import, [see this](https://stackoverflow.com/a/59456219) for more details._**
### Example
See the [example directory](https://github.com/niloysikdar/react-awesome-audio/tree/main/example) 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](https://github.com/niloysikdar/react-awesome-audio/issues) for a list of proposed features (and known issues). Feel free to raise new issues.
## License
Distributed under the MIT License. See [LICENSE](https://github.com/niloysikdar/react-awesome-audio/blob/main/LICENSE) for more information.
## Author
### Niloy Sikdar
- [niloysikdar30@gmail.com](mailto:niloysikdar30@gmail.com)
- [GitHub](https://github.com/niloysikdar)
- [LinkedIn](https://www.linkedin.com/in/niloysikdar)