I implemented web push notifications. Notification is ing but I want to play custom notification sound that I added but that sound is not working default system window sound is ing I want to play this sound. I added in code to let me know why this notification sound is not playing recive

self.addEventListener('push', async function (event) {
  const data = event.data.json();
  console.log(data);
  const title = 'Sound Notification';
  const options = {
    sound: '../public/messageNotification.mp3',
  };

  try {
      registration.showNotification(title, options);
  } catch (e) {
    registration.showNotification(title, options);
  }
});

I implemented web push notifications. Notification is ing but I want to play custom notification sound that I added but that sound is not working default system window sound is ing I want to play this sound. I added in code to let me know why this notification sound is not playing recive

self.addEventListener('push', async function (event) {
  const data = event.data.json();
  console.log(data);
  const title = 'Sound Notification';
  const options = {
    sound: '../public/messageNotification.mp3',
  };

  try {
      registration.showNotification(title, options);
  } catch (e) {
    registration.showNotification(title, options);
  }
});

• javascript
• reactjs
• push-notification

• we can use hook useRef and play once we received event: myAudio.current.play() – Sonu Sindhu Commented Aug 15, 2022 at 13:18

4 Answers 4

I think you can use HTMLAudioElement for his purpose. For example:

let sound: HTMLAudioElement;
sound = new Audio();
sound.src = '../public/messageNotification.mp3';
sound.load();
sound.play();

We need to take a look what registration.showNotification does, but if it is working correctly and the sound is still not playing, it might be because modern browsers block autoplay in some situations.

For example, Chrome has this autoplay policy. Firefox and Safari might have slightly different policies.

In these cases, you might need to find workarounds for each browser, or you can instruct users to always enable autoplay for your site. In Chrome 104, you do this by clicking on the lock icon (next to the URL), select Site settings, then under Sound select Allow

You cannot. Web push notifications are received by browsers. Browsers do not allow custom sounds for notifications.

const song = new Audio("url");
song.play(); // to play the audio