React-native-track-player: Cache for ios ?

[thalwani]

Hello,

Is it possible to have cache for ios too ? I would like to reduce the bandwidth consumption by downloading the track only the first time the user listen to it.

Thank you.

Regards,
Toufic.

[mateomorris]

I'm also interested to know if caching is in the works for iOS. This is by far the best RN sound library, but I won't be able to release my app for iOS until it has offline playability (since it's a standard feature in competing apps).

[osiloke]

Cacheing is implemented in IOS by creating a local proxy server to serve the files. The proxy server would handle cacheing. I would recommend using https://github.com/swisspol/GCDWebServer

[mateomorris]

@osiloke Have you managed to enable caching with this library using that method?

[osiloke]

@mateomorris, i have. I made changes to react-native-track-player which recognizes localhost requests as local urls and therefore allows tracks to be played even though the server is offline. Take a look at the https://github.com/osiloke/react-native-track-player/commit/0fb12255cd1dde0fa2c83ef6888a49f396b522d1
I wrote a custom proxy server which rewrites segment urls in an HLS index to use the local proxy server. For example if you had a URL http://example.com/audio/example.mp3/index.m3u8 you would pass that URL to the proxy server, the proxy server will download the HLS, rewrite the segment URLS to point to that same proxy server. When the proxy server receives a request for a segment, it either downloads it or returns it from its cache.

[mateomorris]

That's pretty cool. I'll try it out and post here if I get it working. Thanks @osiloke

[aboux]

Hello,
@mateomorris @thalwani did it work for you? I have a music streaming app and I might move to this library.

[gazedash]

But what about this https://github.com/spotify/SPTPersistentCache and https://github.com/vdugnist/DVAssetLoaderDelegate ? react-native-video uses these packages to implement caching on iOS

[CapitanRedBeard]

Haven't implemented this myself but plan to in the future. For others interested here is the react-native-video discussion that @gazedash mentioned. https://github.com/react-native-community/react-native-video/issues/99

[mateomorris]

Got caching working on iOS with react-native-fetch-blob.

import RNFetchBlob from 'rn-fetch-blob'

RNFetchBlob
  .config({
    path: dirs.MainBundleDir + '/file-name.mp3',
    fileCache : true,
  })
  .fetch('GET', 'https://sample-videos.com/audio/mp3/crowd-cheering.mp3') // audio url
  .progress((received, total) => {
      console.log('progress', received / total)
  })
  .then((res) => {
    let track = {
        id: "835f65f11b6f4532873df1684680558c",
        url: 'file://' + res.path(), 
        title: 'Title',
        artist: 'Artist',
        album: 'Album',
        genre: 'Genre',
        date: 1551334620000, // RFC 3339
        artwork: 'https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg', 
    }
    TrackPlayer.add([track]).then(function() {
      TrackPlayer.play()
    }).catch((error) => {
        console.log(error)
    })
  })
  .catch((error) => {
    console.log('Could not download file', error)
  })

[gazedash]

@mateomorris it's not caching, it's downloading. The main point of caching is to be able to save the audio file while the user is listening to it. In your solution, user have to wait to be able to play it locally.
Or even download it twice. Just think about large audio files, how long will it take to download it?

[mateomorris]

Ah, gotcha. Didn't know that difference. At any rate, this was good enough for my purposes.

[martinezguillaume]

Any news on this issue ?

[ewindso]

Ping!

[sirakoff]

Came across https://github.com/StyleShare/HLSCachingReverseProxyServer

Can someone please help with implementing it?