A metronome made using React and the AudioContext API.
View the app live at: https://aviolin.github.io/metronome
- Metronome using JavaScript workers and AudioContext.
- Customizable tempo, meter and clicks per beat.
- Animation visualizing the current beat using HTML canvas and requestAnimationFrame.
- Dark mode/light mode toggle.
To install the app locally, make sure you have Node installed, and then:
- Download this repository.
- Navigate to the project folder in your console, and enter:
npm install - To run the project, enter:
npm start - The project will be running at http://localhost:3000/metronome.
This project was created to better understand React and how to implement an accurate JavaScript timer system, as well as to have a trusted online metronome to use in a pinch. The core functionality was inspired by this project: https://github.com/cwilso/metronome
This app requires OS 14+ on iPhone Safari, and there is a lag between the audio and the visuals in Android Chrome.