Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

[tortuc]

I'm getting this error in IPhone Safari. How can I solve this?

[quang1412]

same issue 😞

[tortuc]

@quang1412 I solved the issue by using this component.

import React, { useRef, useState } from "react";

const AudioPlayer = ({
  src, playing, onEnded
}) => {
 const audioPlayer = useRef();
  const [currentTime, setCurrentTime] = useState(0);
  const [seekValue, setSeekValue] = useState(0);

  const play = () => {
    audioPlayer.current.play();
  };

  const pause = () => {
    audioPlayer.current.pause();
  };

  const stop = () => {
    audioPlayer.current.pause();
    audioPlayer.current.currentTime = 0;
  };

  const setSpeed = (speed) => {
    audioPlayer.current.playbackRate = speed;
  };

  const onPlaying = () => {
    setCurrentTime(audioPlayer.current.currentTime);
    setSeekValue(
      (audioPlayer.current.currentTime / audioPlayer.current.duration) * 100
    );
  };

  const buttonStyle = {
    border: '1px solid #222',
    padding: '5px',
    margin: '5px'
  }

  return (
    <div className="App">
      <audio
        src={url}
        ref={audioPlayer}
        onTimeUpdate={onPlaying}
      >
        Your browser does not support the
        <code>audio</code> element.
      </audio>
      <br />
      <p>{currentTime}</p>
      <input
        type="range"
        min="0"
        max="100"
        step="1"
        value={seekValue}
        onChange={(e) => {
          const seekto = audioPlayer.current.duration * (+e.target.value / 100);
          audioPlayer.current.currentTime = seekto;
          setSeekValue(e.target.value);
        }}
      />
      <div>
        <button style={buttonStyle} onClick={play}>play</button>
        <button style={buttonStyle} onClick={pause}>pause</button>
        <button style={buttonStyle} onClick={stop}>stop</button>
        <button style={buttonStyle} onClick={() => setSpeed(0.5)}>0.5x</button>
        <button style={buttonStyle} onClick={() => setSpeed(1)}>1x</button>
        <button style={buttonStyle} onClick={() => setSpeed(1.5)}>1.5x</button>
        <button style={buttonStyle} onClick={() => setSpeed(2)}>2x</button>
      </div>
    </div>
  );
}

export default AudioPlayer

[TheNemus]

I'm having the same problem, can you explain what was the issue and how you solved it?

[tortuc]

As you can see above, the audio tag should be in the DOM. Otherwise the same error will be appeared. Please use above component, It will works well on your side.