Tengo una aplicación de reacción y hay un componente llamado AudioComponent . Quiero reproducir un audio cuando se carga ese componente. Mi código para AudioComponent es el siguiente.

 import mp3 from './Hymn.mp3' function AudioComponent() { const audio = new Audio(mp3) useEffect(() => { audio.play() }, []) return ( <div className="pp"> This is the Audio component <div > </div> </div> ); } export default AudioComponent;

al ejecutar la aplicación, aparece el siguiente error en la consola.

AudioComponent.jsx:41 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Quiero reproducir el audio siempre que se use el componente de audio sin ninguna interacción del usuario. ¿Cuál podría ser el problema?