javascript – The request just isn’t allowed by the consumer agent or the platform within the present context, presumably as a result of the consumer denied permission

We have now a mission constructed with react-native and compiled for pwa utilizing react-native-web.
we’re getting an error when making an attempt to play an audio:
The request just isn't allowed by the consumer agent or the platform within the present context, presumably as a result of the consumer denied permission.
right here is a part of the code for enjoying the mentioned audio, it is inside our audio controller class:

let playingAudio!: HTMLAudioElement;
let playtime = 0;
async play(path: string) {
    if (!retailer) throw NO_STORE_ERROR;
    const res = await get(path, retailer);
    this.playingAudio = new Audio(res);
    doc.physique.appendChild(this.playingAudio);
    this.playingAudio.currentTime = this.playtime;
    await this.playingAudio.play();
    this.playingAudio.addEventListener('ended', () => {
        this.cease();
    });
}

in response to our Sentry information it solely occurred in IOS Safari. I came upon once I searched concerning the error that it may occur if the code is run with out consumer interplay (like press). however I actually name the play operate on onPress.
right here is the element we’re utilizing this:

export const VoiceItem = memo(
    (
        props: FileItemProps & {fashion?: StyleProp; onVoicePlay?(): void},
    ) => {
        const {
            itemType,
            time,
            hasMoreGap,
            fashion,
            onVoicePlay,
            deletePress,
            chatStatus,
        } = props;
        const controller = useMemo(() => new AudioController(), []);
        const pathRef = useRef();

        const [state, setState] = useState({
            playState: PlayStatus.Stopped,
            playTime: 0,
            length: 0,
        });

        useEffect(() => {
            controller.addPlayListener(setState);
        }, []);

        const getIcon = () =>  isError) return 'Obtain';
            else if (loading) return 'Shut';
            else if (state.playState === PlayStatus.Taking part in) return 'Pause';
            else return 'Play';
        ;

        const handlePress = () => {
            change (state.playState) {
                case PlayStatus.Paused:
                    controller.resume();
                    break;
                case PlayStatus.Taking part in:
                    controller.pause();
                    break;
                case PlayStatus.Stopped:
                    if (pathRef.present) {
                        controller.play(pathRef.present);
                        onVoicePlay?.();
                    }
                    break;
            }
        };

        return (
             {
                    /*logic for actions backside sheet*/
                }}
            >
                
                    
                        
                    
                
                
            
        );
    },
);

update: I tried adding an AudioContext and then await the resume function as @BGPHiJACK said. but still got the same error

async play(path: string) {
    if (!store) throw NO_STORE_ERROR;
    const res = await get(path, store);
    const audioContext = new AudioContext();
    await audioContext.resume();
    this.playingAudio = new Audio(res);
    document.body.appendChild(this.playingAudio);
    this.playingAudio.currentTime = this.playtime;
    await this.playingAudio.play();
    this.playingAudio.addEventListener('ended', () => {
        this.stop();
    });
}