Free classroom noise meter for your board, and how to make your own

A noise meter your class can see from the back row

You'll describe the noise meter to a free AI assistant, paste what it writes into a file, and open it in your browser. Then add a traffic light, gentle warnings, a quiet-time reward and a full-screen mode, one step at a time.

• Bouncing balls that jump higher as the room gets louder, with a "too loud" line
• A traffic light and a simple meter, for when you want something calmer
• Sliders for sensitivity and the "too loud" limit, plus presets for different activities
• A "Shh…" message and an optional soft chime when it stays too loud for a few seconds
• A quiet-time counter that gives the class a star for every few quiet minutes
• A full-screen mode for the board, and friendly help if the microphone is blocked

Good for: teachers and teaching assistants who want a calm, visual way to manage noise, home educators, clubs and libraries, and anyone curious about how a web page can listen to a room without recording it.

What you need

Build it in six steps

Step 1 gives you a simple version that works, and each step after it adds more. The demo at the top of this page is roughly what you'll have once you've done every step. Yours will look a bit different, because the AI writes its own version each time.

1. Ask for the noise meter

   Copy this prompt into your AI assistant:

   Copy this promptCopy

   I don't know how to code. Please make me a classroom noise meter that runs in a web browser and shows on the classroom board.
   
   Requirements:
   - ONE single HTML file (HTML, CSS and JavaScript together), no external libraries, no internet needed. I will save it and double-click it.
   - A big "Start" button. When I press it, ask for the microphone with getUserMedia and measure how loud the room is with the Web Audio API (an AnalyserNode). Never record, save or send the sound anywhere, and say so in small text next to the Start button.
   - Turn the loudness into a number from 0 to 100.
   - Show about 20 colourful balls sitting at the bottom of a dark area. The louder the room, the higher they bounce. Draw them on a canvas.
   - Draw a dashed "Too loud" line across the area. When the noise goes over it, show "Too loud" in big red letters underneath; otherwise show "Nice and quiet" in green.
   - If the microphone is blocked or missing, show a friendly message saying what to do instead of a blank screen.
   - A clean design: a dark background and big, bright, easy-to-read text.
   
   Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

   Copy the code, paste it into your text editor, and save it as noise-meter.html. Double-click it, press Start, allow the microphone, and clap. The balls should jump.

2. Make it fit your room

   Every classroom and every microphone is different, so you need to be able to tune it. Smoothing stops one dropped book from setting it off.

   Copy this promptCopy

   That works, thank you. Please make it fit my classroom:
   - Ask for the microphone with echoCancellation, noiseSuppression and autoGainControl all turned off, so the browser doesn't change the volume behind my back.
   - Work out the loudness as the RMS of the sound wave, turned into decibels, then map that onto 0 to 100.
   - A "Sensitivity" slider from 1 to 10 that moves the decibel range up or down, for quiet rooms or a mic far from the class.
   - A "Too loud limit" slider from 10 to 100 that moves the dashed line.
   - Smooth the reading: quick to rise, slow to fall, so the balls don't flicker.
   - Three preset buttons: "Silent reading" (very low limit), "Partner talk" (middle) and "Group work" (higher).
   - Save the settings in localStorage, but never the sound.
   
   Send me the complete updated file.

   Always ask for the complete file. Replace everything in noise-meter.html, save, and refresh the tab (F5 or Cmd+R).

3. Add a traffic light and a meter

   Bouncing balls are great for younger children. Older classes often prefer something calmer.

   Copy this promptCopy

   Please add two more ways to show the noise, with buttons to switch between them: "Bouncing balls", "Traffic light" and "Meter".
   - Traffic light: a tall dark box with red, amber and green lights. Green when it's well under the limit, amber when it's close (over 70% of the limit), red when it's over. The lit one should glow.
   - Meter: a wide bar that fills from left to right, coloured green, amber or red the same way, with a white line showing the limit.
   - Use the same three colours for the "Nice and quiet / Getting louder / Too loud" words.
   - Remember which one I picked in localStorage.
   
   Send me the complete updated file.

4. Add a gentle "Shh…"

   A short burst of noise is normal. This only reacts when the room stays too loud for a few seconds, and then leaves the class alone for a moment.

   Copy this promptCopy

   Please add a warning for when the room stays too loud:
   - Only count it as too loud if it stays over the limit for a few seconds. Let me choose 2, 3 or 5 seconds.
   - Then show a big, friendly "Shh…" over the picture for about 3 seconds.
   - A tick box to turn the "Shh…" on or off, and another for a gentle chime: two soft notes made with the Web Audio API, no sound files. Off by default.
   - After a warning, wait at least 8 seconds before the next one, so it doesn't nag.
   - Ignore the microphone while the chime plays, so the meter doesn't hear itself.
   - Save these choices in localStorage.
   
   Send me the complete updated file.

5. Reward the quiet

   Praise works better than warnings. This counts how long the class stays quiet and hands out stars for it.

   Copy this promptCopy

   Please add a quiet-time reward:
   - A "Quiet time" counter in minutes and seconds that counts up while the room is under the limit. It goes back to 0:00 when a "Shh…" warning happens (not for every short noise).
   - A "Best" time that remembers the longest quiet stretch this lesson.
   - A gold star every few minutes of quiet. Let me choose 1, 2 or 5 minutes. Make each new star pop in. Show up to 10 stars, then a number, like "× 12".
   - A small "Reset quiet time and stars" button for the next lesson.
   - Keep the counter accurate even if the screen refreshes slowly, by using the real time between frames.
   
   Send me the complete updated file.

6. Make it work on the board and on phones

   Copy this promptCopy

   I want to use this on a classroom board and on a tablet or phone:
   - A "Full screen" button that hides the settings and shows just the picture, the words, the quiet time and the stars, as big as the screen allows. Use the Fullscreen API, and if the device doesn't support it, cover the whole page instead. Escape exits.
   - Make the canvas sharp on high-resolution screens using devicePixelRatio, and redraw it when the window changes size.
   - Create the AudioContext inside the Start button's click, so phones and iPads allow it.
   - A "Stop" button that turns the microphone off properly (stop every track) so the browser's mic light goes out.
   - Friendly messages that say exactly what's wrong: blocked (how to allow the mic in the address bar, and on an iPad in Settings), no microphone found, or the mic being used by another app such as Teams. Add a "Try again" button.
   - On phones, put the settings under the picture, and make sure nothing scrolls sideways.
   
   Send me the complete updated file.

Quick fixes

Twist it into something else

Anything that listens for loudness can be turned into something new. Change the first prompt to make:

Your classroom, your rules, no recordings

Many noise meter apps cost money, need an account, or are covered in adverts, and it isn't always clear what happens to the sound. Yours is one small file that you can read, that works without the internet, and that never records a thing. You decide what "too loud" means for your class, what the reward looks like and how gentle the warning is. It's also a lovely way to see how a web page can use a microphone, a canvas and sound together.

What to build next