Browser denying javascript play()

I struggled with that same issue as well and out of the blue I fixed that very easily:

Just change your event listener at your play button

onClick={togglePlay} to onClickCapture={togglePlay}

Example in React using hooks:

const Player = ({ audio }) => {
const [playing, setPlaying] = useState(false);

const togglePlaying = () => setPlaying((prev) => !prev);

useEffect(() => {
    if (audioRef && audioRef.current) {
        if (playing) {
            audioRef.current.play();
        } else {
            audioRef.current.pause();
        }
    }
  }, [playing]);

  return (

 <audio
            
            autoPlay=""
            src={audio}
            ref={audioRef}
            onTimeUpdate={(e) => setCurrentTime(e.target.currentTime)}
            onCanPlay={(e) => setDur(e.target.duration)}
            onEnded={songEnded}
        />
            <PlayerStart onClickCapture={togglePlaying}>
                    {playing ? <PauseIcon /> : <PlayIcon />}
            </PlayerStart>
    )
}

There is some permission blocking in all modern browser (especially chrome) when comes down to autoplaying multimedia.

Here is the Autoplay availability's section from MDN which shows when the media will be allowed to execute automatically:

• The audio is muted or its volume is set to 0;
• The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
• If the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
• If the autoplay feature policy is used to grant autoplay support to an <iframe> and its document.

---

This here is a similar solution for what you want with arrayBuffer using AJAX

here is a DEMO