Shutup App - Tell others to be quiet!

Short summary

Are you tired of asking others to be silent over and over again, when they just forget to be quiet? This HTML5 app uses your microphone to detect if it is too loud in your room. If so, an alarm sound will make clear that the volume is too high. As "too loud" depends on the user, the limit can be changed. Hint: The alarm sound itself can be louder than the allowed volume. It is not taken into account when calculating the volume, as it is removed by an audio filter. After a while your colleagues, room mates or whoever disturbs you, will learn to be considerate.

Demo

You can try the app here. Make sure to use a modern browser supporting the Web Audio Api and the Canvas element.

Screenshots

How to start

• Open a terminal and run npm install
• Then run npm run dev
• Open http://localhost:9000 in your browser and allow access

Build

• Open a terminal and run npm run build:production
• Your files will be located unter ./dist/ and can be copied to your webserver

List of technologies

• HTML5 WebAudio Api for audio stuff
• HTML Canvas to display results
• Build/Compression via Webpack 2

How does the app work?

1. It accesses the microphone via the Web Audio Api and starts recording.

navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) {
     // start recording
});

2. If the volume exceeds a defined limit, it will activate the alarm.

var tooLoud = currentValue > canvasHistorySelectedValue
if (tooLoud) {
     //play alarm
}

3. The alarm is generated by a sine oscillator, increasing its volume over time as long as is too loud.

var oscillator = audioCtx.createOscillator()
oscillator.type = 'sine'
oscillator.frequency.value = sineFrequency // value in hertz

4. The sine tone itself can be louder than the allowed volume, which would normally result in a never ending alarm. But: A sine tone can be removed from the microphone input, if we know the sine frequency (which we do as we generate it by ourselves). In order to do that we use a biquad notch filter.

var biquadFilter = audioCtxMic.createBiquadFilter()
biquadFilter.type = "notch"
biquadFilter.frequency.value = sineFrequency
biquadFilter.Q.value = 0.01

5. To give visual feedback to the user, we render a canvas with a volume/time graph.

// listenToMic, display volume over time on canvas
updateCanvasRegular = function () {

    // update arlam based on the volume
   	// render canvas

     window.requestAnimationFrame(updateCanvasRegular)
 }

Known issues

• Right now I am not too sure about the unit of the volume. It could be "db" but I just multiplied the value with a constant to get a good [0,1] range
• The rendering can be highly optimized
• A UX Designer could improve the UI ;-)

License

Licensed under MIT

Copyright (c) 2017 Alexander Thurn