AmericaDoodles
AmericaDoodles

Reputation: 34

`play()` Failed Due to User Interaction Requirement

I am encountering an issue where the play() method fails with the following error: play() failed because the user didn't interact with the document first.

Here are some additional details:

const audioref = useRef(null);
const incomingAudioref = useRef(null);

...
...

useEffect(() => {
  if (helpCall) {
     incomingAudioref.current.volume = 0.5;
     incomingAudioref.current.play();
  }
}, [helpCall]);

...
...

<audio ref={incomingAudioref} autoPlay muted>
  <source src={receivecall} type="audio/mpeg" />
</audio>

The thing is that even I have this error, web app works fine and it autoplays videos regardless of this error.

Has anyone experienced this issue or have any suggestions on how to resolve it?

I've checked several references and discussions and find that modern browsers are not allowing autoPlay of videos and audios.

To comply with modern browser autoplay policies, I have ensured that all <video> and <audio> elements in my project include the autoPlayand muted attributes. Despite these changes, the problem persists.

<audio ref={incomingAudioref} autoPlay muted>
  <source src={receivecall} type="audio/mpeg" />
</audio>

Upvotes: 0

Views: 21

Answers (0)

Related Questions