Actualmente estoy creando una aplicación en la que quiero que haya un botón de reproducción que, cuando se presiona, reproduzca un archivo de audio. Mi método para hacerlo es crear un componente de reproductor de sonido que crea el botón y la sincronización de audio para que pueda simplemente llamar al componente en la pantalla principal en la que lo uso. Puedo hacer que el componente de reproductor de sonido funcione bien cuando coloco manualmente el la ruta del archivo mp3 en su lugar correcto, pero no cuando trato de pasarlo como parámetro. Eche un vistazo a mi código a continuación y vea si puede ayudar a resolver la situación.
Componente SoundPlayer
import * as React from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; import { Audio } from 'expo-av'; function SoundPlayer({ mp3 }) { const [sound, setSound] = React.useState(); async function playSound() { console.log('Loading Sound'); const { sound } = Audio.Sound.createAsync({ mp3 }); setSound(sound); console.log('Playing Sound'); await sound.playAsync(); } React.useEffect(() => { return sound ? () => { console.log('Unloading Sound'); sound.unloadAsync(); } : undefined; }, [sound]); return ( <View style = {styles.container}> <Button title="Play Sound" onPress={playSound} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center' } }) export default SoundPlayerPantalla de la aplicación
export default function App() { return ( <SoundPlayer mp3 = {require('/Users/viswajithkumar/DharmaWorldwide/Screens/assets/Audio/FrenchTouch.mp3')}/> ); }De acuerdo con la Documentación de expo-av , podemos ver que hay dos métodos diferentes para cargar archivos estáticos y archivos remotos.
Para archivos estáticos (requeridos...) esta es la forma de cargar un archivo
const { sound } = await Audio.Sound.createAsync(require('./assets/Hello.mp3'));Para archivos remotos ( https://example.com/test.mp3 ) esta es la forma de cargar un archivo
const { sound } = await Audio.Sound.createAsync({ uri: 'https://example.com/test.mp3', });Entonces reemplazando,
const { sound } = Audio.Sound.createAsync({ mp3 });con
const { sound } = Audio.Sound.createAsync(mp3); Debería solucionar el problema. Solo asegúrese de que la location del archivo de sonido sea correcta.
Una mejor manera de cargar y reproducir archivos de audio, que personalmente creo que es la mejor, es usar la variable useRef para la instancia de sonido. He creado un snack para la implementación aquí .