I built a metronome in JavaScript to explore concepts outside of my usual work.
I set out to build a small project in vanilla JavaScript that uses things I don't normally encounter in traditional web development, like the Web Audio API. I was also curious how I would tackle accessibility since I don't often deal with sound and time. I didn't want to follow a tutorial, so I used Claude as a guide but explicitly told it not to generate any code, and used it more like a rubber duck debugger. I made myself read MDN and javascript.info before asking it anything, which proved more helpful than I expected and was an honest deterrent for depending on it. Where Claude helped most was understanding the difference between multiple approaches and knowing which one fit my use case.
I kept the scope small and focused on one problem at a time, refactoring as I went, rather than trying to get everything right upfront, kept things from getting overwhelming. Learning new things in JavaScript was honestly really nice and didn’t have a ton of difficulty.
The biggest hurdle was styling input[type="range"]. It still requires browser vendor prefixes and each browser handles it very differently. This Smashing Magazine article was extremely helpful for understanding most of the quirks although I still had to do some additional tweaks.
It was interesting to learn that iPhone silent mode disables web audio and there is no way around it. Silent mode is the physical switch above the volume buttons, if it shows orange, sound will not work.
Getting the experience to feel app-like required a couple of unfamiliar CSS properties. touch-action: manipulation prevents double-tap zoom on the buttons, and user-select: none stops text from being selectable. Small things, but they felt foreign coming from traditional web development.
If you do not hear sound, check volume or “silent mode” if using an iPhone.
Later I would like to revisit this project and add things like tap tempo, different time signatures and other features, but for now I am happy with how it turned out and would like to keep making more small fun projects. If you would like to view the code for the metronome I have uploaded it on GitHub.