3

After using rn-fetch-blob to get .mp3 file, i typed console.log(filePathIos) and got the path like this: "/var/mobile/Containers/Data/Application/80D7496B-862A-44D6-9D3A-F0EF31B565CF/Documents/xxx.mp3"

My code for playing track:

let filePathIos = `${fs.dirs.DocumentDir}/${fileName}`;
const thisSong = props.songs[0]
const track = {
        id: thisSong.id.toString(),
        url: filePathIos,
        title: thisSong.title,
        artist: "xxx"
}
const togglePlayback = async () => {
        setAudioStatus(!AudioStatus)
        const currentTrack = await TrackPlayer.getCurrentTrack();
        if (currentTrack == null) {
            await TrackPlayer.add(track);
            await TrackPlayer.play();
        } else {
            if (AudioStatus) {
                await TrackPlayer.play();
            } else {
                await TrackPlayer.pause();
            }
        }
    }

The problem is: The local file is downloaded sucessfully and i can open it locally. But the above code dont work. when i try to press toggle button, xcode shows some logs as: "Starting/Resuming playback" but the song is still not played.

If i try to change a litte in the code abve ( change the url to an online music url) like this:

const track = {
        id: thisSong.id.toString(),
        url: 'https://audio-previews.elements.envatousercontent.com/files/103682271/preview.mp3',
        title: thisSong.title,
        artist: "xxx"
}

then the app works like a charm and it can play the song.

Im using these packages to build app, and for some specific reasons, i cannot upgrade/downgrade these packages:

  • platform: react native for IOS
  • react-native-track-player@1.1.3
  • react-native@0.59.2
  • rn-fetch-blob@0.10.15

Things i tried with no luck:

  • changes url from url: filePathIos to url: 'file://' + encodeURIComponent(filePathIos)

Thank you for any ideas!

AmerllicA
  • 29,059
  • 15
  • 130
  • 154
Quang Thái
  • 649
  • 5
  • 17
  • 1
    I have opened a bug for the same reason... https://github.com/react-native-kit/react-native-track-player/issues/1032 Currently, if you "require" the file it works, but if you try to use a "file:///..." url it does not. – Pablo Romeu Sep 21 '20 at 06:09
  • @PabloRomeu in addition, it can work with files in Document ("file://Users/Documents/xxx.mp3"), but can not work with rn-fetch-blob path to file. I have no idea what is happening – Quang Thái Sep 22 '20 at 03:04

1 Answers1

3

Well, found it. The problem is that version 1.2.3 has an error on Track.swift that is fixed on the Dev branch:

func getSourceUrl() -> String {
        return url.isLocal ? url.value.path : url.value.absoluteString
}

in version 1.2.3 is:

func getSourceUrl() -> String {
        return url.value.absoluteString
}

This prevents local files to be played.

You can use the "Dev" branch as a workaround. I will fill a bug report.

Pablo Romeu
  • 2,113
  • 1
  • 13
  • 15
  • Thank you for spending time! Does the url after fixing line needs to start with 'file://'? something like file://Users/thainq/Library/Developer/CoreSimulator/Devices/3A86BC22-C9D2-4284-9D23-2F8ED01D4AE9/data/Containers/Data/Application/0C16AE28-F358-4281-9AA1-8918BA24EBA0/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_fwh078gqndf0clxbxyu4mb.mp3 – Quang Thái Sep 22 '20 at 11:09
  • hmm, just try to fix the line above but it seems not to work.... i tried to install the dev branch but there are so many error while compiling file... – Quang Thái Sep 22 '20 at 11:10
  • That was the problem for me... They are adding an extra "file://" to the getSourceUrl method and that was the problem... – Pablo Romeu Sep 23 '20 at 06:57