I am making a web app where the users can chat with each other. I want, when the user receives a message, to play a sound to notify the user.

First, I use the way of playing the sound

import messageNotificationSound from 'src/assets/MessageNotification.mp3';
const audio = new Audio(sound)
audio.play()

I got the following error

DOMException: Failed to load because no supported source was found

This error is that I can't play a sound if the user is not interacting with the site. But you can solve it by giving the site sound permissions. So I solved the problem on localhost and pushed to the main site. But on the main site, it always fails also when the user is already interact with the site and the sound permissions are set to always. I got the same error.

I also use npm use-sound and it works on localhost, but not on the main site. It also doesn't throw any errors.

The way that I use use-sound:

import messageNotificationSound from 'src/assets/MessageNotification.mp3';
import useSound from 'use-sound';
const [play] = useSound(messageNotificationSound);
play();

Does anyone know how to solve this problem or have any suggestion? Thanks