Playing sounds when screen is off? about react-native-video

[brentvatne]

Nice one 😄

@jamesfzhang Did you remember to set up your app for background playback in Info.plist?

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

For a working example of background playback using the above code snippets please feel free to study the source of my Lumpen Radio app.

Background playback can be achieved by adding the following to your AppDelegate, ViewController or other suitable class and updating the Info.plist file for background playback:

@import AVFoundation

- (void)setSharedAudioSessionCategory
{
  NSError *categoryError = nil;
  [[AVAudioSession sharedInstance]
    setCategory:AVAudioSessionCategoryPlayback
          error:&categoryError];
  if (categoryError) {
    NSLog(@"Error setting category!");
  }
}

In my project I used the above in my AudioManager class and it worked well for background playback. It's could be problematic if this kind of code was added to a React Native Module as it could conflict with the app's actual intentions, and some component authors might define things differently making modules problematic to mix-and-match within an app.

[ericraio]

@jhabdas The way I know get the airplay icon to display is you need to use iOS's MPVolumeView and if AirPlay is enabled for the app, the icon will appear next to the slider. Now I think you can disable the slider from displaying but I am not sure.

When Spotify displays the AirPlay icon, I think they render it out and create their own custom element that delegates the event to the airplay icon to trigger the menu.

(fun fact, I was working at Sony with PlayStation Music & Spotify)

[johanneslumpe]

Did you try to implement the proper background mode for your application? I didn't test it, but theoretically it should work when you add the correct background mode for playing audio to your plist.

@crysfel take a look at StreamingKit for playing audio. It can be installed as a CocoaPod and wired up to play audio over HTTP, backgrounded and locked, and manage audio session interruptions (e.g. incoming calls, Siri and headphone unplug). You should then be able to use the ReaCT bridge to dispatch events to control your video from there using the public API currently in development.

Functional example with detailed commits here (URL subject to change):
https://github.com/jhabdas/react-native-es6-reflux

[tmoreton]

@crysfel I'm doing something similar, were you able to figure out how to play audio in the background using the react-native-video component or did you have to switch to the SteamingKit mentioned

[brentvatne]

Thanks for the follow up there @jhabdas :)

[jamesfzhang]

@jhabdas I added the code snippet you wrote above to my AppDelegate and followed these instructions on enabling Background playback. But I still can't get audio to play in the background.

[jamesfzhang]

@jhabdas Yes I did update Info.plist. I was hoping to avoid having to learn Objective C as I wanted to get this app I'm working on out ASAP, but thanks for the help. I'll check it out.

[jamesfzhang]

@jhabdas Out of curiosity, what version of XCode & iOS are you using to develop Lumpen Radio?

[jasecoop]

Thanks for your help with this @jhabdas.

I'm afraid, like @jamesfzhang, I haven't been able to get this working.

I don't have an AudioClass, where should I put that snippet of code?

James, did you get it working in the end?

[jamesfzhang]

I ended up writing my own AudioPlayer using StreamKit and got it working.

@jamesfzhang are you open source by any chance? 👼 be great to see a few more audio implementations so we could look at creating an audio native module on top of StreamingKit (or similar), possibly using something like rem.

[jamesfzhang]

@jhabdas Unfortunately it is not since it was written for a client. But I would be interested in contributing to a generic full-featured audio player (unlike https://github.com/andreaskeller/react-native-audioplayer)

[ericraio]

@jamesfzhang did you ever find a full feature generic audio player? This video lib is the only one that works for me

[jamesfzhang]

@ericraio ended up writing my own audio player. It uses https://github.com/tumtumtum/StreamingKit

[jasecoop]

@jamesfzhang any chance we could see an example of this in use? I have good experience with react-native but am at a loss when it gets to objective c. This issue a real blocker on my project atm

@jasecoop StreamingKit at work in OSS form. README contains links to
slides, posts and a Webcast I gave explaining how it all works. Hope it
helps. Good luck!

https://github.com/jhabdas/lumpen-radio
On Thu, Mar 31, 2016 at 1:12 AM jasecoop [email protected] wrote:

@jamesfzhang https://github.com/jamesfzhang any chance we could see an
example of this in use? I have good experience with react-native but am at
a loss when it gets to objective c. This issue a real blocker on my project
atm

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#41 (comment)

[ericraio]

@jhabdas thanks for contributing all of this! I have a quick question about in lumpen radio. What did you do for AirPlay support?

I am also looking to add an airplay button and allow you to switch the audio to a device like AppleTV

@ericraio nothing specifically I can think of. please let us know if you figure it out!

[ericraio]

@jhabdas hey good news! When background audio is turned on in xcode which also includes airplay,
after I installed this library, the airplay icon gets displayed.

https://github.com/IFours/react-native-volume-slider

@ericraio did the author bundle the AirPlay icon with the slider module so it shows in the UI and not simply the system menus? how does the experience compare to, say, Spotify, if you've used it?

[arbabi2010]

Hi. I want to do this on android. How can i use it? I set "playInBackground:true" but not working properly

[sibigit]

@arbabi2010 did you fixed the issue in android?

[arbabi2010]

@arbabi2010 did you fixed the issue in android?

Yes. but with some other packages .
I use this tutorial . and i changed some codes on it
https://reactnativeexample.com/audio-player-to-offline-local-and-online-streaming-audio/

[sibigit]

@arbabi2010 did you fixed the issue in android?

Yes. but with some other packages .
I use this tutorial . and i changed some codes on it
https://reactnativeexample.com/audio-player-to-offline-local-and-online-streaming-audio/

@arbabi2010 Thanks for replay,can you able to give the changed codes for play the sound when mobile in locked mode

[AbhijeetGiram]

@crysfel
I have found one workaround for android which allows you to prevent the screen from going to sleep while your app is active. I have used it for audio and it works for me with the help of react-native-keep-awake module.

https://www.npmjs.com/package/react-native-keep-awake

[AbhijeetGiram]

I have found the way which allows you to play the track even when screen goes to sleep/locked. I have used @react-native-community/audio-toolkit to implement the same.

e.g.
soundOne = new Player('sound_example.mp3', { continuesToPlayInBackground: true });

Here's the link!
https://www.npmjs.com/package/@react-native-community/audio-toolkit

Thanks!