Meeting Buzzer

Website to buzz at preset time in meetings

Released: Meeting Buzzer Website

Vibrating timer for meetings

Today is an awesome and lazy weekend, I have just managed to squeeze out of my bed and score a net displacement of 100 meters by EOD, LOL. Since I was very happy today, I thought to try and weed out the most (of one of the most) annoying and irritating things in my work life. I settled on one problem which can be quickly hacked around. Many people would hopefully echo their voices if I say that uninterrupted monologues of colleagues are the most irritating and annoying things in our meetings at work. I discovered that if we have some sort of a buzzer which reminds everyone of their time-slot, then that could potentially put an end to monologues in meetings.

I crawled up on the internet and stumbled on Mateusz Rybczonec’s blog on Animated HTML CSS timers which provides a pretty timer in JS and CSS. I also got a Google writeup for navigator.vibrate() API available in Chrome v32+. All, I needed now was to plug in a timer UI with vibrate() API and let the music play!

Goals

In short, Following is the reason I decided to develop this website?

  • Have a buzzer which can vibrate at a pre-specified time interval

  • Cannot rely on the audio buzzer, since it would be distracting

As POC, I made a simple website to solve this problem, this one: MeetingBuzzer. I had observed that I may need to change the buzzer time, so I added a slider to customize the buzzer delay.

Flow

  1. Build timer:

    
    <div class="base-timer">
         <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <g class="base-timer__circle">
         <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
        <path id="base-timer-path-remaining" stroke-dasharray="283" class="base-timer__path-remaining ${remainingPathColor}" d="
         M 50, 50
         m -45, 0
         a 45,45 0 1,0 90,0
         a 45,45 0 1,0 -90,0
         "></path>
         </g>
         </svg>
         <span id="base-timer-label" class="base-timer__label">${formatTime(
             timeLeft
         )}</span>
    </div>
     
  2. Build controls:

    
     <input type="range" id="input-seconds" name="vol" min="5" max="200" onclick="updateTime()" value="10" />
     <button class="button btn-start" id="btn-start" onclick="onTimesUp()">Start 5 Sec timer</button>
     
  3. Call vibrate API:

    
     function startTimer() {
         timerInterval = setInterval(() =&gt; {
             timePassed = timePassed += 1;
             timeLeft = TIME_LIMIT - timePassed;
             document.getElementById("base-timer-label").innerHTML = formatTime(
                 timeLeft // show the time left
             );
             updateTimerUI();
             if (timeLeft &lt;= 0) {
                 onTimesUp(); // vibrate called
             }
         }, 1000); // call this every second
     }
     function startVibrationPattern() {
         // Values at even indices (0, 2, 4, ...) specify vibrations, while the odd
         // indices specify pauses.
         // Vibrate for 500ms 6 times, pausing for 250ms in between each one.
         console.log("Vibrate!");
         navigator.vibrate([500, 250, 500, 250, 500, 250, 500, 250, 500, 250, 500]);
     }
     
  4. Reset clock when buzzed:

    
     function onTimesUp() {
         startVibrationPattern();
         resetTimer();
         startTimer();
     }
    
     function updateTime() {
         TIME_LIMIT = document.getElementById("input-seconds").value;
         document.getElementById("btn-start").innerText = `Reset ${TIME_LIMIT} Sec timer`;
         resetTimer();
     }
    
     function resetTimer() {
         clearInterval(timerInterval);
         timePassed = 0;
         timeLeft = TIME_LIMIT;
         updateTimerUI();
     }
     

I felt it was straightforward to implement and does not have many dependencies to slow me down. Having a simple website to buzz in meetings works just fine for my use cases. I felt it would be super awesome to have following features - which would be a value add:

  • Sharing links with timer presets in URL ?
  • Maybe a mobile app to buzz ?

For my demo, the source is hosted on GitHub repo: MeetingBuzzer repo, quick sneak peek is below:

Home page
Timer going off
Reschedule timer

Dialogue & Discussion