Add audio to bell notification

[saurabhsharmaiit123]

hey I need to add an audio to bell notification.

[michaldziuba03]

@saurabhsharmaiit123 hello, it's not that easy task as browser blocks sound autoplay. To play sound - user's interaction with your website is requried (click, tap).

If you want to "subscribe" to new notification event (notification_received), you can use underlying socket using useSocket React hook. This hook works only under NovuProvider context.

Some docs reference:

• https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
• https://docs.novu.co/notification-center/react/react-components#realtime-sockets

Code sample

Some code sample here - it works only when user perform some interaction on website (click anywhere first). Playing audio is out of scope of Novu (audio is browser's API), but you need to use socket to detect new notification and then eventually play sound.

import { useEffect} from 'react';
import {
  NovuProvider,
  PopoverNotificationCenter,
  NotificationBell,
  useSocket
} from '@novu/notification-center';

function playSound() {
  const audio = new Audio();
  audio.src = 'https://notificationsounds.com/storage/sounds/file-sounds-1231-out-of-nowhere.mp3';
  audio.play();
}

function SoundTrigger() {
  const { socket } = useSocket();

  useEffect(() => {
    if (socket) {
      socket.on('notification_received', (data) => {
        playSound();
      });
    }

    return () => {
      if (socket) {
        socket.off('notification_received');
      }
    };
  }, [socket]);

  return (<div></div>)
}

export function Header() {

  function onNotificationClick(message) {
    // your logic to handle the notification click
    if (message?.cta?.data?.url) {
      window.location.href = message.cta.data.url;
    }
  }

  return (
    <NovuProvider subscriberId={'subscriber id'} applicationIdentifier={'your app id'}>
        <SoundTrigger />
        <PopoverNotificationCenter onNotificationClick={onNotificationClick}>
          {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
        </PopoverNotificationCenter>
    </NovuProvider>
  );
}