CODEWITHSUNDEEP
javascriptreact-nativeaudioexpo
user4686130
user4686130

Reputation:

React Native Audio Playing mp3 files with spaces in their names

I have been trying to build a a media player in react native using Expo to be able to play audio on my music project.

I have successfully hacked one together with the preferred design etc but I still have a minor bug. Here, I receive information from an API Endpoint with Links to files stored in a server. this audios play when the filename is just one word. When there are spaces in the name, the file, it does not play. eg .../musics/test.mp3 plays while .../musics/test 32.mp3 does not play. Any idea on how to handle this issue in React native will be highly appreciated. My play function

 startPlay = async (index = this.index, playing = false) => {
        const url = this.list[index].url;
        this.index = index;
        console.log(url);
        // Checking if now playing music, if yes stop that
        if(playing) {
            await this.soundObject.stopAsync();
        } else {
            // Checking if item already loaded, if yes just play, else load music before play
            if(this.soundObject._loaded) {
                await this.soundObject.playAsync();
            } else {
                await this.soundObject.loadAsync(url);
                await this.soundObject.playAsync();
            }
        }
    };

url is the link to the file .

I am working on a streaming platform and I will love to get a player similar to this:

enter image description here

Something like this https://hackernoon.com/building-a-music-streaming-app-using-react-native-6d0878a13ba4

But I am using React native expo. All the implementations I have come across online are using native without expo. Any pointers to any already done work on this using expo will be of great help eg packages .

thanks

Upvotes: 1

Views: 1940

Answers (1)

zer00ne
zer00ne

Reputation: 44086

The urls should be encoded:

const uri = this.list[index].url;
this.index = index;
const url = encodeURI(uri);
console.log(url);

The uri = "../musics/test 32.mp3" will be encoded to url = "../musics/test%2032.mp3"

Upvotes: 0

Related Questions