how to play a custom sound when web push notification received

user_15454295 0
Viewed 229

I implemented web push notifications. Notification is coming but I want to play custom notification sound that I added but that sound is not working default system window sound is coming 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);
  }
});
reactjs push-notification javascript
3 Answers

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();
user_184287160

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

Click on the lock icon, then select Site settings

Select Allow under Sound

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