15

I'm trying to play sound in push notification in Chrome browser when I get notification. And I have already set the browser push notification on my site but it does not play sound. I'm already going through the option for sound but get no sound.

option = {
     'body' : 'This is tst Description',
     'icon' : 'icon.png',
     'silent' : 'false',
     'sound' : 'bell.mp3'
}

If there is any other way to play the sound in the notification, please let me know.

Bhavik Hirani
  • 1,996
  • 4
  • 28
  • 46
  • 1
    Yes browser doesnt support sound notification. – bvakiti Dec 18 '16 at 08:54
  • 1
    If you know when to play sound, you can manually play it http://stackoverflow.com/questions/10105063/how-to-play-a-notification-sound-on-websites. – Kira Dec 21 '16 at 09:29

4 Answers4

5

or you can declare myAudio object globally and use play() funcation after or before notification is popped.

myAudio = new Audio("alert_tone.mp3");

var notification = new Notification("Hi there", options);
myAudio.play();
Suraj Verma
  • 59
  • 1
  • 1
  • 1
    This will play the audio when loading the page - but not when a notification is sent. – ESP32 Jun 17 '19 at 10:04
4

Currently browsers doesn't support Notification.sound see https://developer.mozilla.org/en/docs/Web/API/notification

Alexander Shapoval
  • 41
  • 1
  • 2
  • But why it has a property named "silent"?And the docs say "Specifies whether the notification should be silent — i.e., no sounds or vibrations should be issued, regardless of the device settings." – wangqi060934 Mar 30 '19 at 08:41
4

You can try to use the chrome web-extension background_pages.

It will listen to the service worker and play the audio The simple method for it would be to requesting the URL in the service worker and capture it in the background script using the chrome.webRequest as mentioned in the link

chrome.webRequest.onBeforeRequest.addListener(
    callback, filter, opt_extraInfoSpec);

as mentioned in this thread

Update As mentioned in this link

Service Workers require a secure origin, such as HTTPS. chrome-extension:// pages are not HTTP/HTTPS, but are secure so this change becomes a necessary step to allow extensions to register a Service Worker.

"chrome-extension" is added as a scheme allowing service workers.

In the serviceworker script

First you need to register your extension in the manifest.json

  • Request the url in the service worker
  • Capture it in background script using the chrome.webRequest.onBeforeRequest.addListener
  • Play the sound in background.js

and as mentioned by @Alexander currently there is no support for the sound in the MDN

Community
  • 1
  • 1
Pritish Vaidya
  • 21,561
  • 3
  • 58
  • 76
3

As you can see in link bellow

At the time of writing, no browser has support for this option.

https://developers.google.com/web/fundamentals/push-notifications/display-a-notification#sound

enter image description here

soroush
  • 742
  • 6
  • 10