How can I implement sound for notification like whatsapp?

user_7648701 0
Viewed 594

I'm trying to implement a sound on my appliaction when it receives some updates (like whatsapp web) using Audio Context API (currently using howler.js).

But I have a problem when the user didn't interact or refresh the page:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page

It works after the user does some gestures, but after refreshing it asks again and doesn't play the audio.

I looked on whatsapp web, and I realized that it's chat sound always works even without interacting and after refreshing the page.

How can I resolve this issue? Is there another way to solve it?

reactjs web audio notifications javascript
1 Answers

I think you did not notice that WhatsApp does not make a notification sound until you interact with the page, and the same note that appears for you appears on the WhatsApp web page if you receive a notification without interacting with the page (See the last log in image bellow):

Autoplay is only allowed when approved by the user, the site is activated by the user or media is muted.

enter image description here

Here is the power of the frontend frameworks (Like Angular) that make all website as a single page, as you only need to interact once so that you continue to receive notifications sound even when you change the page.

user_28774270
Related