React error when using audio.play() function

The same thing happened to me also because of the chrome changes in player promise.just replace your player.play() with

const playPromise = player.play();      if (playPromise !== undefined) {        playPromise          .then(_ => {            // Automatic playback started!            // Show playing UI.            console.log("audio played auto");          })          .catch(error => {            // Auto-play was prevented            // Show paused UI.            console.log("playback prevented");          });      }

You can read more about it here on chrome blogs about player promise changes

use import audio from '../assets/audio.mp3'//your map3 path therethen create an object let audio = new Audio(audio)and play the sound in the desired function audio.play()

Okay, I managed to fix my problem. This error is caused because the new Audio(url).play() points to the index.html in the public folder and for some reason it doesn't seem to work in the root div in my case. I created the audio element in the index.html file and moved the mp3 file to the public folder.<audio id="audio"><source src="bellNotification.mp3" type="audio/mpeg"></source></audio>

I changed the function like this

const playAudio = () => { document.getElementById("audio").play(); };

It works for me but I hope that someone can fix this problem with pure js without accessing the html file.