New Sep 19, 2024

expo-av how to load an audio stream?

Libraries, Frameworks, etc. All from Newest questions tagged reactjs - Stack Overflow View expo-av how to load an audio stream? on stackoverflow.com

I'm trying to implement expo-av to load an audio stream. It works, but it loads the audio in about 25 seconds which I find too slow... I don't see a user waiting 25 seconds for the audio to load, he will just think it doesn't work and quit my app.

this is my code:


import { Audio } from "expo-av";

const streamUr = "https://adminradiosulamita.store:8000/radio.mp3";

import { Sound } from "expo-av/build/Audio";

export default function HomeScreen() { const [sound, setSound] = useState<Sound>(); const [loading, setLoading] = useState(false);

async function playSound() { setLoading(true);

// const { sound } = await Audio.Sound.createAsync( // { // uri: streamUrl, // headers: { // Range: "bytes=0-", // // pass aditional headers so it knows its an audio stream // "Content-Type": "audio/mpeg", // "Icy-MetaData": "1", // }, // }, // { // shouldPlay: true, // } // );

const sound = new Audio.Sound();

await sound.loadAsync( { uri: streamUrl, }, { shouldPlay: true, } );

setSound(sound);

await sound.playAsync(); setLoading(false); }

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

return ( <ParallaxScrollView> <ThemedView style={styles.titleContainer}> <TouchableOpacity onPress={playSound}> <ThemedText type="title">Play</ThemedText> </TouchableOpacity> <ThemedText type="title"> {loading ? "Cargando" : "No cargando"} </ThemedText> </ThemedView> </ParallaxScrollView> ); }

as you can see I've tried different ways but it still loads very slow. How to fix?

Scroll to top