Estoy creando una aplicación web donde los usuarios pueden chatear entre ellos. Quiero, cuando el usuario recibe un mensaje, reproducir un sonido para notificar al usuario.

Primero, uso la forma de reproducir el sonido.

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

Tuve el siguiente error

 DOMException: Failed to load because no supported source was found

Este error es que no puedo reproducir un sonido si el usuario no está interactuando con el sitio. Pero puede resolverlo otorgando permisos de sonido al sitio. Así que resolví el problema en localhost y presioné al sitio principal. Pero en el sitio principal, siempre falla también cuando el usuario ya está interactuando con el sitio y los permisos de sonido están configurados para siempre. Tengo el mismo error.

También uso npm use-sound y funciona en localhost, pero no en el sitio principal. Tampoco arroja ningún error.

La forma en que uso use-sound:

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

Alguien sabe como solucionar este problema o tiene alguna sugerencia? Gracias