I am trying to play sounds dynamically based on a function called meditationList. The return of the function gives me the right path which it works in the player.
However, if I call the function on the URL is not working giving me the following error: Rejection, Can't find variable meditationList. I also tried with JSON.stringify to return adress.meditation.meditationPlayerAdress but no luck
export default class Player extends React.Component<Props> {
meditationList = () => {
const adress = this.props.route.params;
return adress.meditation.meditationPlayerAdress; //console.log returns ../../assets/track1.mp3
};
audio = () => {
TrackPlayer.setupPlayer().then(async () => {
// Adds a track to the queue
await TrackPlayer.add({
id: 'trackId',
url: require('../../assets/track1.mp3'), // this.require(meditationList())- warning that variable meditationList cannot be found
title: 'Track Title',
artist: 'Track Artist',
});
let trackId = await TrackPlayer.getCurrentTrack();
// Starts playing it
TrackPlayer.play();
});
};
pause = () => {
TrackPlayer.pause();
};
stop = () => {
TrackPlayer.stop();
};
render() {
return (
<SafeAreaView style={styles.container}>
<View style={{alignItems: 'center'}}>
<View style={{alignItems: 'center', marginTop: 24}}>
<Text style={[styles.textLight, {fontSize: 12}]} />
<Text
style={[
styles.text,
{fontSize: 15, fontWeight: '500', marginTop: 8},
]}>
{this.meditationList()}
</Text>
</View>
<View style={styles.coverContainer}>
<Image
source={require('../../../assets/coverArt.jpg')}
style={styles.cover}
/>
</View>
<View style={{alignItems: 'center', marginTop: 32}}>
<Text style={[styles.textDark, {fontSize: 20, fontWeight: '500'}]}>
Exhale
</Text>
<Text style={[styles.text, {fontSize: 16, marginTop: 8}]}>sal</Text>
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 16,
}}>
<TouchableOpacity onPress={this.stop}>
<FontAwesomeIcon icon={faStop} size={32} color="#93A8B3" />
</TouchableOpacity>
<TouchableOpacity
style={styles.playButtonContainer}
onPress={this.audio}>
<FontAwesomeIcon
name="play"
icon={faPlay}
size={32}
color="#3D425C"
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.pause}>
<FontAwesomeIcon icon={faPause} size={32} color="#93A8B3" />
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
}
meditationList cannot be found solution:
As you are using class based component
, anything defined within that, you can access that via this.ANYTHING_DEFINED
, but not directly, so here we need this.meditationList()
You can use meditationList()
within function based component
without error.
require(var) will not take dynamic varibale
You cannot use variables in require. All requires must be statically analyzable. That means you always have to write require('/path/to/file').SOURCE
But, you can do something like this, SOURCE
const IMAGES = {
image1: require('../image1'), // statically analyzed
image2: require('../image2'), // statically analyzed
}
getImage(num: number) { // dynamically invoked
return IMAGES['image' + num];
}
For everybody who got this problem. I couldn't find an easy solution for it, but I found one quite convenient walk around.
Considering that is not good for an app to store all the audio files in local storage(especially in cases of big apps ), I decided to set the path of my URL to an audio link, hence solving the problem with "required"
Now my code looks like this and works perfectly
meditationList = () => {
const adress = this.props.route.params;
return adress.meditation.meditationPlayerAdress; //returns a URL link now
};
audio = () => {
TrackPlayer.setupPlayer().then(async () => {
// Adds a track to the queue
await TrackPlayer.add({
id: 'trackId',
url: this.meditationList(),
title: 'Track Title',
artist: 'Track Artist',
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.