React-native playing audio from s3 URL using react-native-sound

Question

I'm new to react-native and trying to create an audio playing app.

I used react-native-sound to achieve the same. In the documentation, it specifies that I can play the file from a network. But I could not find any docs for the same.

Right now I'm uploading audio files from my ROR backend and adding the file to a local folder inside react. I'm changing that to aws s3.

And the audio file is started like -

var whoosh = new Sound(this.state.soundFile, Sound.MAIN_BUNDLE, (error) => {

where this.state.soundFile is a local file name (string) inside the specified folder.

Is this possible?

Solution 1

You can play remote sounds with react-native-sound by specifying a url and not setting the bundle:

import React, { Component } from 'react'
import { Button } from 'react-native'
import Sound from 'react-native-sound'

class RemoteSound extends Component {
  playTrack = () => {
    const track = new Sound('https://www.soundjay.com/button/button-1.mp3', null, (e) => {
      if (e) {
        console.log('error loading track:', e)
      } else {
        track.play()
      }
    })
  }

  render() {
    return <Button title="play me" onPress={this.playTrack} />
  }
}

export default RemoteSound

Solution 2

import Sound from 'react-native-sound';

const sound = new Sound('http://sounds.com/some-sound', null, (error) => {
  if (error) {
    // do something
  }
  // play when loaded
  sound.play();
});

Comments

[Sooraj]

When I tried this got an error Failed to load the sound. Am i missing something ?

[Isilher]

Did you try it with the sample file from my snippet? Note that assets might get blocked if you try to fetch them over http://

[Sooraj]

Failed to load sound, resource not found this is the exact error message I'm getting

[Isilher]

Can you give me some more information about your setup? (physical device or simulator, android or ios) When are you creating the Sound object? If it's in the constructor or on componentDidMount it might be too soon. Try it on a button like in my example or wrap the construction in a timeout.

[Sooraj]

It's in physical device in android. The sound is being loaded in componentWillMount

[Sooraj]

Just found out a GitHub issue for the same- github.com/zmxv/react-native-sound/issues/157. I think the above solution won't work

[Koen van der Marel]

S3 doesn't provide a file extension the give URI. React-native sound breaks here. Placing manually the extension behind the url of an S3 file will deny access. Currently no solution found.