As a legally blind musician, I thought it would be cool to know the current time without needing to look at a screen or clock face. I enjoy building tools that blur the line between creativity and accessibility, so I set out to create a web app that lets you listen to the time.
I imagined this tool doing three things.
-
Let me hear and understand the time without visual cues
-
Serve as a playful ear training tool for musicians
-
Provide a delightful, accessible interface for blind and low-vision users
What started as a nerdy niche idea grew into a rewarding project that’s changing the way I think about web development.
Time was not on my side
The idea didn’t come together as easily as I had hoped. Through a series of fits and starts, I realized that synchronizing musical tones with real-world time on a webpage was harder than expected. Web audio is powerful but quirky, and my hand-coded attempts stalled. Even ChatGPT struggled to generate a working simple prototype.
I originally hoped to launch something for GAAD (Global Accessibility Awareness Day) 2025, but with just a few weeks to go, it appeared that goal was out of reach.
Then I found v0 by Vercel.
v0 uses AI-assisted development to help you build full-featured websites and apps using Next.js. I had tried other AI code tools before with mixed results—but v0 astonished me. It created entire functional components in seconds.
What I expected to take several weeks, I built in about 15 hours of work over 5 days, without writing a single line of code by hand. I prompted, tested, refined—and Song Clock came to life.
How it sounds (and why)
Song Clock turns the current time into sound and musical notation:
-
⏱ The hour, minute, and second are mapped to distinct musical intervals and patterns.
-
🎶 A reference tone plays in the background to anchor the musical intervals.
-
🧠 Each time component uses a different virtual instrument and pattern:
-
Hour and reference: ambient pad drones. The interval between them indicates the hour (e.g., a perfect 5th = 5:00).
-
Minute: “bing-bong” tones for tens and ones digits alternating every second. A third above the reference tone followed by a ninth means it’s 39 minutes after the hour.
-
Seconds: brief chirps every quarter second for tens and ones digit of the current and next second. These ascend and reset pretty quickly as time progresses.
-
-
🎼 A musical score shows rendered withVexFlow shows the time as sheet music.
-
🧑🦯 Built with accessibility-first design and development practices: screen reader announcements, keyboard navigation, and adjustable sound toggles
You can play, pause, set a manual time, adjust volumes, and even "sightread" the current time.
Give it a try: https://songclock.app
My pair programmer is a robot
This project is profoundly changing how I think about development.
Song Clock uses a fairly hefty tech stack:
It weighs in at over 4,600 lines of code with logic for real-time audio synthesis, score rendering, modals, sliders, time controls, and comprehensive keyboard/screen reader accessibility.
Without v0’s AI assistance, this would have probably taken over a month of weekend tinkering. Instead, I was able to:
-
Prompt entire features (like “Add manual time setting with toggle and reset button.”
-
Say “Add a score showing the notes currently playing on three staves” and watch the logic to write the score appear.
-
Describe accessibility needs and fixes and get working React/Next.js code–usually on the first try.
Prompting Accessibility
Some of the most valuable prompts I gave focused on accessibility. Here are a few of them.
“Make the app keyboard accessible. Add visible focus states to each volume slider and toggle. Enable arrow keys to adjust slider values and display percentage labels beside each slider.”
This single prompt led to full keyboard operability for all sound controls—complete with screen-reader-friendly labels and visible focus rings.
“Add ARIA roles and labels to all controls in the Settings drawer. Trap keyboard focus inside the drawer while it’s open. Escape key should close it.”
With that, the settings modal got a huge a11y upgrade–correct keyboard navigation and interaction, focus management, ARIA attributese—all generated automatically.
“When a modal closes, return focus to the button that opened it.”
This added a crucial focus restoration behavior that’s often missed in modal dialog implementations, eliminating a common source of confusion and frustration for screen reader users.
“Use semantic heading structure inside modals, starting with <h1>. Treat each modal like a separate document.”
This ensured that the Help and Settings panels had properly nested headings, improving navigation for assistive technology users. (See Melanie Sumner’s axe-con 2025 talk for details about this compelling use case for multiple <h1> tags on a single page.)
“Use a live region to announce changes to the Play button and Score toggle (‘Sound on’, ‘Score off’, etc.) to screen readers.”
This enabled dynamic feedback without relying on visible text, which is essential for blind users tracking the app’s state through sound alone.
What this means for devs
This experience showed me that AI isn’t just a productivity booster—it’s becoming a co-developer. In Song Clock, v0 helped me:
-
Convert plain-language ideas into robust implementations.
-
Skip the friction between design and code. (I described what I wanted and the AI rendered it.)
-
Build independently, at startup speed, as a blind developer.
And most exciting of all: it enabled accessibility-first development from the very beginning. Every component—from modals to sliders to headings—was built with accessibility in mind because I asked for it.
We’re entering an era where creativity + accessibility + AI isn’t futuristic—it’s how you can build today.
I’d love feedback from musicians, accessibility professionals, and curious builders. Try listening to the time and let me know what you hear.