https://github.com/philnash/react-web-audio
A small example React app that listens to the microphone and visualises the audio
https://github.com/philnash/react-web-audio
getusermedia javascript react reactjs web-audio web-audio-api
Last synced: 27 days ago
JSON representation
A small example React app that listens to the microphone and visualises the audio
- Host: GitHub
- URL: https://github.com/philnash/react-web-audio
- Owner: philnash
- License: mit
- Created: 2018-09-07T05:57:16.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-07T17:18:40.000Z (about 2 years ago)
- Last Synced: 2025-05-07T15:06:38.803Z (2 months ago)
- Topics: getusermedia, javascript, react, reactjs, web-audio, web-audio-api
- Language: JavaScript
- Size: 899 KB
- Stars: 185
- Watchers: 4
- Forks: 42
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React + Web Audio
This is an example application that shows how to visualise audio from the microphone using the Web Audio API in React.
## How to build the app
If you're interested in how to build a visualiser like this in React, check out the blog post [Audio visualisation with the Web Audio API and React](https://www.twilio.com/blog/audio-visualisation-web-audio-api--react).
For more on the canvas and React, check out the post [Techniques for animating on the canvas in React](https://philna.sh/blog/2018/09/27/techniques-for-animating-on-the-canvas-in-react/).
## How to run the app
You need Node.js installed to run the application.
Clone or download the project from GitHub, change into the directory and install the dependencies.
```bash
git clone https://github.com/philnash/react-web-audio.git
cd react-web-audio
npm install
```
Start the application:
```bash
npm start
```
And open the browser to [http://localhost:3000/](http://localhost:3000).