- ⭐️ With Typescript
- 🚀 Declarative Hooks API
- 🛠 Using Audio Web API
You can easily play, pause, and stop sounds with React Hooks.
using yarn
yarn add react-use-audio
using NPM
npm install react-use-audio
import { useAudio } from "react-use-audio";
// You need to add sound-related files
import testSound from "../sounds/test.mp3";
function App() {
const { play } = useAudio(testSound);
return <button onClick={play}>start</button>;
}
export default App;
import { useAudio } from "react-use-audio";
// You need to add sound-related files
import testSound from "../sounds/test.mp3";
function App() {
const { play, stop, pause } = useAudio(testSound);
return (
<>
<button onClick={play}>start</button>
<button onClick={pause}>pause</button>
<button onClick={stop}>stop</button>
</>
);
}
export default App;
import { useAudio } from "react-use-audio";
// You need to add sound-related files
import testSound from "../sounds/test.mp3";
function App() {
const { data, play, stop, pause } = useAudio(testSound);
return (
<>
<button onClick={play}>start</button>
<button onClick={pause}>pause</button>
<button onClick={stop}>stop</button>
<div>is pause: {data.isPause ? "true" : "false"}</div>
<div>is play: {data.isPlaying ? "true" : "false"}</div>
</>
);
}
export default App;
Add audio.d.ts under the src directory and add the code below.
declare module "*.mp3";
declare module "*.wav";