I am currently building an app where I want there to be a play button that when pressed plays an audio file. My method of doing so is to create a soundplayer component that creates the button and audio sync so that I can just call the component in the main screen I use it in. I can get the soundplayer component to work just fine when I manually put the mp3 file path in it's proper place, but not when I try to pass it in as a parameter. Take a look at my code below and see if you may be able to help resolve the situation.
SoundPlayer Component
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 SoundPlayer
App Screen
export default function App() {
return (
<SoundPlayer mp3 = {require('/Users/viswajithkumar/DharmaWorldwide/Screens/assets/Audio/FrenchTouch.mp3')}/>
);
}