React-native-sound: Sound does not play in background on iOS 11

Created on 28 Oct 2017  路  17Comments  路  Source: zmxv/react-native-sound

expected: with Required background modes set to
App plays audio or streams audio/video using AirPlay
App downloads content from the network

and the following in the code:

Sound.setActive(true)
Sound.enableInSilenceMode(true)
Sound.setCategory('Playback', true)


const sound = new Sound('https://s3.amazonaws.com/data.monstercat.com/blobs/21e6e0336ac16963b063b0ccba5797e1a44fcdf4', undefined, error => {
  if (error) {
    console.log('error loading sound', error)
    return
  }
  sound.play(() => { })
})

When playing sound, and sending the app to the background, the audio should still play.

I've created a minimal setup which reproduces the issue:
https://github.com/joshbalfour/rn-sound-issue

Most helpful comment

I found a solution. The docs seem to be incomplete. You have to add the following to ios/Info.plist (just before the closing </dict>):

<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
</array>

Also don't forget Sound.setCategory('Playback'). Thats enough to get it working.

After rebuilding/restarting the simulator it works fine for me.

Edit: This is indeed mentioned in the docs. You guys might have overlooked it as I have.

All 17 comments

Hi, I have same issue. Did someone found a solution ?

Dealing with the same thing here.

I haven't found anything that works, so I unfortunately had to roll my own. This does background music playing and the lock screen controls but only works on iOS:
https://gist.github.com/joshbalfour/35afac16027c8745f7e6e71fabcc4226

If this is helpful enough I'll put it properly on github and npm.

Thank you for this @joshbalfour ; it still doesn't work in my simulator.
I'd read somewhere yesterday that this is probably because of some bug in simulator for iOS 11.

It's just a simulator issue, it works if you run your application on your phone.

I found a solution. The docs seem to be incomplete. You have to add the following to ios/Info.plist (just before the closing </dict>):

<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
</array>

Also don't forget Sound.setCategory('Playback'). Thats enough to get it working.

After rebuilding/restarting the simulator it works fine for me.

Edit: This is indeed mentioned in the docs. You guys might have overlooked it as I have.

@lgraubner Sound.setCategory('Playback'), doh! Works like a charm now. Yes, that can be overlooked easily.

@frenkie does that work for both iOS and Android?

@ShayanAhmad if I recall correctly, it should work out of the box for Android. Nothing special in code or the AndroidManifest to enable background audio. The Sound.setCategory call is only implemented (and needed) for iOS.
We currently switched to a different library though because we needed streaming audio. React Native Sounds needs to download the entire file before it can play.

@lgraubner it worked like a charm.

If anyone is still seeing this issue, one reason is because iOS11 requires background audio capabilities to be enabled.

@lgraubner proposed one fix for this, another way is to select your project in Xcode, enter the Capabilities tab, and set background modes 'on', then toggle Audio, AirPlay, and Picture in Picture.

screen shot 2018-05-27 at 9 53 28 pm

After rebuilding, the audio should work in the background.

Hey,
I was having the same issue, and I resolved it by adding the correct configuration to my Info.plist file.
However, it's now working on the simulator but not on a real device.
I am using the Ambient category though.
Has anyone encounter such a case?
Thanks in advance!

@jonathanadler I have same issue , did u solve it ?

@sployad No, not yet

Same issue, works fine on debug for for real device and simulator, but not on archived release version

Same issue, it's now working on the simulator but not on a real device

Same issue, can鈥檛 play in silence mode and background

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Jeremaiha picture Jeremaiha  路  5Comments

therealproblem picture therealproblem  路  5Comments

eyale picture eyale  路  4Comments

poc7667 picture poc7667  路  4Comments

watadarkstar picture watadarkstar  路  3Comments