Try to use expo audio, ios play with Receiver but not speaker

Expo SDK
1

try this audio-recording-example with create-react-native-app
just copy the code in my file, and remove Expo.registerRootComponent(App);
add export default App

build ok, and get error when click record button
error is here:

12:10:07 PM: Possible Unhandled Promise Rejection (id: 0):
Cannot complete operation because audio is not enabled.
http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:75311:32
loadModuleImplementation@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:109:12
guardedLoadModule@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:63:45
_require@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:54:77
Audio@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:2599:19
componentDidMount@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:136201:12
http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:21597:42
measureLifeCyclePerf@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:21459:14
http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:21596:31
notifyAll@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:18429:28
close@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:18340:35
closeAll@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:18178:29
perform@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:18142:24
perform@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:18133:24
perform@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:17719:36
flushBatchedUpdates@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:17767:24
flushBatchedUpdates@[native code]
closeAll@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:18178:29
perform@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:18142:24
batchedUpdates@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:17658:33
enqueueUpdate@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:17776:36
enqueueUpdate@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:18494:29
enqueueSetState@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:18616:18
setState@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:99339:31
onData@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:98403:30
composer@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:88417:8
http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:98122:36
_compute@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:89210:40
_recompute@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:89229:19
_runFlush@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:89301:21
callTimer@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3570:17
callTimers@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3597:34
__callFunction@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3451:47
http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3322:29
guard@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3286:7
callFunctionReturnFlushedQueue@http://192.168.0.122:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3321:12
callFunctionReturnFlushedQueue@[native code]

any suggestions?
Thanks a lot!

2

I have read audio docs here
and get that, the example has been out of date

Have tried to fix the error with v16.0.0 docs, and can run now…

this is my update: gist

but, another error, I think I get the normal voice in android, but very little voice in ios, Is there any help here?

I can’t find a config for this…:pensive:

3

…
strange here…

the update of audio-recording-example, this patch, make it crash…
I find that I just back to the old codes…:sweat:, and everything is ok…

I can’t run the example without Audio.setIsEnabledAsync(true);
And I will get error with this function: const { sound, status } = await this.recording.createNewLoadedSound()

maybe 17.0.0 sdk?

4

I think my iphon5s just play the audio from Receiver but not speaker…
could this package can play the audio from speaker, like this config:

        if (PLAYBACK) {
              this.sound.setCategory("Playback");
            } else {
              this.sound.setCategory("PlayAndRecord");
            }

codes come from here: react-native-sound

Sure…I try to use react-native-sound in create-react-native-app, and failed…

5

Hi-

react-native-sound is a native module that isn’t included in Expo. We’ve developed our own audio APIs and include those (I see you’ve come across those). In any case, you won’t be able to use react-native-sound without detaching/ejecting to ExpoKit.

@greg - maybe you can shed some light here?

6

I’m getting the same error it looks like. Any fix?

7

@liu_fanyi – I’m sorry to have let this slip and never followed up with you!

If you are still debugging this problem, try opening exp://exp.host/@community/record (which is just audio-recording-example) on your iPhone and let me know if the problem persists. audio-recording-example was developed on exp/XDE instead of CRNA, so it might be an idiosyncrasy on CRNA that is giving you this problem.

Also, as @ccheever mentioned, it’s not possible to use react-native-sound with Expo without detaching/ejecting.

@hongyuchen – to be precise, you are also hearing playback of recorded sounds as coming through the receiver instead of the speaker on iPhone 5S? Can you let me know if this also happens with the official examples of exp://exp.host/@community/record and exp://exp.host/@community/playlist on your device, and any more specifics so I can try to reproduce this problem?

Thanks both for your patience!

Greg

8

It looks like both examples work. However, as liu mentions, even if I just copy the code over, it doesn’t seem to work. On Android, it’s fine, but on iOS it plays only on the receiver.

I’m on 17.0.0 however.

9

And yes, I’m also hearing recorded sounds coming out of the receiver.

10

@hongyuchen –

Awesome, thanks for the quick response!

To further clarify, all sounds on iOS play back on the receiver on both of the examples, or just the recorder example when you copy the code?

Thanks!

Greg

11

All the sounds on iOS play back on the receiver for both the examples.

12

Hey! Still actively debugging this. Any help?

13

Hi guys–

As I told @hongyuchen on Slack, I have investigated this and it turns out that the Audio mode allowsRecordingIOS sometimes routes audio output to the receiver instead of to the speaker. We will see if we can clarify this API, and plan to eventually provide a route API to select the output destination of your audio, but for now, I would do the following:

Insert this before recording:

    await Audio.setAudioModeAsync({
      allowsRecordingIOS: true,
      ...
    });

And insert this before playback:

    await Audio.setAudioModeAsync({
      allowsRecordingIOS: false,
      ...
    });

Thanks!! Let me know if you have any more questions.

Greg

3 Likes
14

I’m curious if any progress has been made on this. I am having issue where sound only via headphones on ios while it works fine on android. I’m using vanilla example, i.e. https://snack.expo.io/Hy6CaPpHW. I’m using an iPhone 5s.

I tried adding this but of course is not part of Expo and I believe is plain react-native, so fails on exp publish

    await Audio.setAudioModeAsync({
      allowsRecordingIOS: true,
      ...
    });
15

@akaruna did you find a solution to this? I’m also having this problem…

16

stupid error on my part - I wasn’t waiting for the async to return. eg, I had to change:
this
Audio.setAudioModeAsync
to
await Audio.setAudioModeAsync

2 Likes
17

Hey,
I come up with this problem two years later, so this solution seems to be working. But again this means that this problem is still on.

18

Hey, here to document my issues and solution for Android.

I was having issues too with mega quiet recordings, whether through receiver or some other reason. The iOS solution above relative to allowsRecordingIOS solved my iOS issues, but not my android ones.Turns out that “playThroughEarpieceAndroid: false” plays a similar role for Android.

When preparing to record audio, the following configuration works well for me on both iOS and Android:

  await Audio.setAudioModeAsync({
        allowsRecordingIOS: true,
        playsInSilentModeIOS: true,
        interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
        shouldDuckAndroid: true,
        interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
        playThroughEarpieceAndroid: false,
      });

When about to play back an audio recording, these settings work well for me on both platforms:

 await Audio.setAudioModeAsync({
      allowsRecordingIOS: false,
      playsInSilentModeIOS: true,
      interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
      shouldDuckAndroid: true,
      interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
      playThroughEarpieceAndroid: false,
    });
1 Like
19

Hi, is it possible to BOTH record audio and playback from the main speaker at the same time? As mentioned in this thread, when allowsRecordingIOS: true the playback always seems to come from the headset. Is there anyway around this?

I understand the potential problem here is the microphone picking up speaker audio, but other apps like TikTok seem to not have an issue with this.