Expo-AV Audio Error When Using CreateAsync URI. How can I fix?

Question

I am receiving the following error message when loading a url mp3 file using expo-av in React Native.

Possible Unhandled Promise Rejection (id: 2):
Error: The AVPlayerItem instance has failed with the error code -1004 and domain "NSURLErrorDomain".```

Here is a simplified version of my code:

import { Text, View } from 'react-native';
import React, { useState, useEffect } from 'react';
import { Audio } from 'expo-av';

const AudioPlayer = ({ audioURL }) => {

const [playbackInstance, setPlaybackInstance] = useState();
  const [playbackInstanceInfo, setPlaybackInstanceInfo] = useState({
    position: 0,
    duration: 0,
    state: 'Buffering',
  });

  async function togglePlay() {
    if (playbackInstanceInfo.state === 'Playing') {
      setPlaybackInstanceInfo({
        ...playbackInstanceInfo,
        state: 'Paused',
      });
      await playbackInstance.pauseAsync();
    } else {
      setPlaybackInstanceInfo({
        ...playbackInstanceInfo,
        state: 'Play',
      });
      await playbackInstance.playAsync();
    }
  }

  const onPlaybackStatusUpdate = status => {
    if (status.isLoaded) {
      setPlaybackInstanceInfo({
        ...playbackInstanceInfo,
        position: status?.positionMillis,
        duration: status?.durationMillis || 0,
        state: status.didJustFinish
          ? 'Ended'
          : status.isBuffering
          ? 'Buffering'
          : status.shouldPlay
          ? 'Playing'
          : 'Paused',
      });
    } else {
      if (status.isLoaded === false && status.error) {
        const errorMsg = `Encountered a fatal error 
        during playback: ${status.error}`;
        console.log(errorMsg, 'error');
      }
    }
  };

  useEffect(() => {
    const loadAudio = async () => {
      const { sound } = await Audio.Sound.createAsync(
        { uri: audioURL },
        { shouldPlay: false },
        onPlaybackStatusUpdate
      );
      setPlaybackInstance(sound);
    };
    loadAudio();
  }, []);

  useEffect(() => {
    return playbackInstance
      ? () => {
          playbackInstance.unloadAsync();
        }
      : undefined;
  }, [playbackInstance]);

return (
   <View></View>
)};

export default AudioPlayer;

Dependency Versions:

 "expo": "^46.0.0",
 "expo-av": "~12.0.4",
 "react-native": "0.69.6"

I tried to delete node modules and package-lock.json, then reinstall, but that didn't help. I tried to update expo-av to 13.0.1 but I get a warning telling me that some dependencies I have are not compatible with it, so just went back to ~12.0.4. I'm using Node.js 15.0.1 with Express ^4.17.1

Expo-AV Audio Error When Using CreateAsync URI. How can I fix?

0 Answers0