Notifying Users In Mobile Browsers Using Audio & Vibration API

Mobile Notification
Mobile Notification

Recently, while working on my company’s web application, I faced an interesting problem. As our application is a Tutoring web application, there is a video, chat and whiteboard modules where there is also a way for a host/teacher to take a poll(in broadcast session). Now in mobile browser, the user can go to full-screen video and the poll pop-up would have a timer which would be set by host and will expire if other participants don’t respond.

The obvious solution here was to put some type of notification, possibly Audio or Vibration, which could get the participant’s attention. Thankfully most modern browsers have both Audio and Vibration API’s readily available.

You can use Audio API in the following way:

//Check Browsers which don't play Audio
if(typeof Audio === "function"){
   var audio = new Audio('./audio/poll-notification.mp3');
   audio.play();
}

Opera Mini does not support it. But for most browser it is fine.

Same is not for Vibrate API. Surprising and frustrating about many of the modern browsers is that they still have no support for Vibrate API. Check out.

Chrome is the leading force in adopting Vibration API, followed by Firefox and Opera. Safari, which is being used extensively in Apple mobile devices is still lagging behind in supporting Vibration API.

Vibration API can be used in following way:

//Check for browsers which don't have vibrate API
if(typeof navigator.vibrate === "function"){
   window.navigator.vibrate([500,500,500]);
}

The array passed in the vibrate function is a pattern. The pattern works as even elements being the amount of time to vibrate(vibrate milliseconds) and odd elements being the amount of time vibration to stop(pause milliseconds).

window.navigator.vibrate(patternArray);

Be the first to comment

Leave a Reply

Your email address will not be published.


*