反应名称中带有空格的播放mp3文件的本机音频

时间:2019-04-05 15:00:34

标签: javascript react-native audio expo

我一直在尝试使用Expo构建本机以响应本机的媒体播放器,以便能够在我的音乐项目中播放音频。

我已经成功地破解了首选设计等,但是我仍然有一个小错误。在这里,我从API端点接收信息,并带有指向服务器中存储文件的链接。当文件名只是一个单词时,将播放此音频。名称(文件)中没有空格时,它将不播放。例如... / musics / test.mp3播放,而... / musics / test 32.mp3不播放。任何关于如何在React native中处理此问题的想法都将受到高度赞赏。我的播放功能

 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是文件的链接。

我正在一个流媒体平台上工作,我将很乐意得到一个与此类似的播放器:

enter image description here

类似https://hackernoon.com/building-a-music-streaming-app-using-react-native-6d0878a13ba4

但是我正在使用React native expo。我在网上遇到的所有实现都使用没有博览会的本机。使用expo指向任何已经完成的工作的指针都将有很大的帮助,例如package。

谢谢

1 个答案:

答案 0 :(得分:1)

网址应经过编码:

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

uri = "../musics/test 32.mp3"将被编码为url = "../musics/test%2032.mp3"