React-native-sound: how to play mp3 file downloaded using react-native-fs

Created on 29 Dec 2015  Â·  9Comments  Â·  Source: zmxv/react-native-sound

hello, i download a mp3 file using react-native-fs. the file directory on my android device is '/data/data/com.testapp17/files/sample.mp3', but it is unable to play the file using the directory.

Most helpful comment

@fredbt ok - I just figured it out, how to play a local file downloaded previously :)

        var file_uri = RNFS.DocumentDirectoryPath + "/files/somemp3.downoaded";
        this.sound = new Sound(file_uri, '', (err) =>  {
            if (err) {
                console.log("err: "+err);
                return;
            } 
            this.sound.play();

        });


All 9 comments

As noted in the feature comparison matrix, this is a known limitation of the current Android version. I plan to implement it later, but pull requests are always welcome.

@huangzuizui can be like this:

let localSong = RNFS.CachesDirectoryPath + '/song-name.mp3';
RNFS.downloadFile('http://your-song.online/song.mp3', localSong).then(() => {
  let song = new Sound(localSong, '', (error) =>  {
    song.play();
  });
});

_PS: On real device you can't save songs on MainBundlePath._
_PS-2: You need define the absolute path to the downloaded song._

@jadsonlourenco
thanks, i assume u r talking about ios platform. it is ok on my iphone. i got that issue on android. react-native-fs support DocumentDirectory only.

(How) did you manage to actually play the sound downloaded with react-native-fs? Listing my directory content shows that after the download, the file is available and has the correct size (see attached debugger screenshot), but when trying to play this exact path with let song = new Sound(localPath, '', (error) => { }, I get an error message saying that the resource has not been found..
screen shot 2016-04-28 at 15 14 27

I have an use case which is a bit more complex (?)

I have a server that returns a mp3 to the app as a response to an HTTP request (i.e., my response has the bytes of the mp3 file along other things that I want to display to the user).

My questions are:

  • I want to save the mp3 locally (having some issues for that, see https://github.com/itinance/react-native-fs/issues/309).
  • I want to play it upon user request. Some questions here:
    --- apparently, react-native-fs does not support Blob files (the accepted encoding options are utf8, base64 and ascii). How should I save the file in the disk to later open it with react-native-sound?

Thanks,
Fred

@fredbt did you ever figure out how to play a downloaded and saved file?

hello @bitfabrikken I ended up not saving the file, but always playing it from the network.

    var sound = new Sound(myServerEndPoint() + filename, '', (error) => {
      if (error) {
        console.log(error)
      }
    })

<Button onPress={() => sound.play()}>

@fredbt ok - I just figured it out, how to play a local file downloaded previously :)

        var file_uri = RNFS.DocumentDirectoryPath + "/files/somemp3.downoaded";
        this.sound = new Sound(file_uri, '', (err) =>  {
            if (err) {
                console.log("err: "+err);
                return;
            } 
            this.sound.play();

        });


DocumentDirectoryPath 

DocumentDirectoryPath path already contains /files/

Was this page helpful?
0 / 5 - 0 ratings