expo / audio-recording-example Goto Github PK

Audio Recording Example

JavaScript 0.51% TypeScript 99.49%

javascript audio expo react-native

audio-recording-example's Introduction

Expo Audio Recording Example

This is an example cross-platform app implementing Expo's Audio API (among a few others, including File System, Asset, and Permissions APIs).

Check out the good stuff in the App.tsx file!

Please report any issues at the main Expo repository

audio-recording-example's People

Contributors

Stargazers

Watchers

Forkers

james-streamba mgregory-carecloud nickarthur chithams sameesiddiqui arayi aayanqazi lisandrolan fujikawanaoki broomface nicmitchell davidjumble bound3r rad4n nicolas-f realdevknow rileystevend ismaelrumzan brianantonelli calebnance garrettyaworski muhammadzeeshan34 gabriellanghans herbertlim waqaramjad wodin dikshantsachan oavmartin mkultr4 bbbbighead philemonmastewal spf3000 matrycks nihiluis alexmartins saudi222 mrserwin birrein shanly a-anees kawingdev bernardnongpoh lyonsv afneyman adamasclub katie-mcknight-projects adjaba naveenchopra9 peterola jamedjo giorgiodemoraesrossa jcde lelapinshak agustinanahas olegp306 caseyrwebb moabisethojane erezbens lniepolski mykyta-chernenko nazosnare tamhtran

audio-recording-example's Issues

Prepare encountered an error: recorder not prepared.

I get error "Prepare encountered an error: recorder not prepared." when i run my app on simulator IOS.

I use Expo SDK 35

My code:

export const startRecord = async (handleSetRecording, handleErr) => {
     await Audio.setIsEnabledAsync(true);
     await Audio.setAudioModeAsync({
     allowsRecordingIOS: true,
     interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
     playsInSilentModeIOS: true,
     shouldDuckAndroid: true,
     interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DO_NOT_MIX,
     playThroughEarpieceAndroid: false,
     staysActiveInBackground: true
   });

  const recordingSettings = JSON.parse(
     JSON.stringify(Audio.RECORDING_OPTIONS_PRESET_LOW_QUALITY)
  );

  const recording = new Audio.Recording();
  try {
     await recording.prepareToRecordAsync(recordingSettings);
     handleSetRecording(recording);
     await recording.startAsync();
  } catch (error) {
     console.log(error);
     handleErr(error);
  }
};

Asset not found on `npm start`

the Error

Error: Asset not found: /Users/macmccarthy/Documents/learning/audio-recording-example/assets/icon.png for platform: null
    at /Users/macmccarthy/Documents/learning/audio-recording-example/node_modules/metro/src/Assets.js:188:13
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/macmccarthy/Documents/learning/audio-recording-example/node_modules/metro/src/Assets.js:52:24)
    at _next (/Users/macmccarthy/Documents/learning/audio-recording-example/node_modules/metro/src/Assets.js:72:9)

Steps I Take:

Download/clone
expo install
npm start

Not working on Android Devices

When I try to record an audio I got:

[01:01:33] [Unhandled promise rejection: Error: Start encountered an error: recording not started]
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:121:42 in createErrorFromErrorData
- node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:78:57 in <unknown>
- ... 5 more stack frames from framework internals

Excellent script!

Where does the actual file reside? is the path identical between iOS and Android?

Can the file or blob data be uploaded to a server or bucket?

Do you have some code sample on the above situations?

Thanks

Hugo Barbosa

TypeError: recording.setOnRecordingStatusUpdate is not a function.

Tested on iPhone 6, iPhone simulator, OnePlus 5 Android

All the same error

audio-recording-example: npm -v
3.8.6
audio-recording-example: node -v
v6.0.0

GNB-Pro
`

Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not a function (evaluating 'recording.setOnRecordingStatusUpdate(this._updateScreenForRecordingStatus)')

Wanting input on best way to update Icons to functional components

I am a few weeks into my react journey and am using the expo Audio library to work on an app. This project is linked in the expo docs so I have been referencing it quite a bit, and then I though for practice I'd see if I could knock out issue #21 .

My problem is updating Icons - originally I replaced all the export const RECORD_BUTTON = new Icon(...); with a functional component like this:

export function RECORD_BUTTON() {
    const [assets, _] = useAssets(require('../assets/images/record_button.png'));
    const width = 70
    const height = 119
    return assets ? <Icon
        path={assets[0]}
        width={width}
        height={height}
    /> : null
}

which works but in the styles object we access the width and the height of each Icon object with Icons.RECORDING.height and since RECORD_BUTTON isn't a class anymore, this gives an error.

I am working around it atm by declaring width and height inside the prototype like so:

export function RECORD_BUTTON() {
    const [assets, _] = useAssets(require('../assets/images/record_button.png'));
    RECORD_BUTTON.prototype.width = 70
    RECORD_BUTTON.prototype.height = 119 
    return assets ? <Icon
        path={assets[0]}
        width={RECORD_BUTTON.prototype.width}
        height={RECORD_BUTTON.prototype.height}
    /> : null
}

and then accessing it for styles with RECORD_BUTTON.prototype.width. Which seems to work, but doesn't feel right to me.

I did a bunch of googling and can't seem to figure out the correct way that people upgrade these class components to be compatible with accessing the properties in this way so I figured I'd ask here. Let me know if you have any input.

Load encountered an error: player not created.

I got this error after record the audio.

Load encountered an error: player not created.
createErrorFromErrorData@http://192.168.1.7:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3215:24
http://192.168.1.7:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3173:49
__invokeCallback@http://192.168.1.7:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3488:21
http://192.168.1.7:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3347:32
guard@http://192.168.1.7:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3286:7
invokeCallbackAndReturnFlushedQueue@http://192.168.1.7:19001/./node_modules/react-native-scripts/build/bin/crna-entry.bundle?platform=android&dev=true&hot=false&minify=false:3346:12
invokeCallbackAndReturnFlushedQueue@[native code]```

Unnecessary JSON processing

Nit Pick: Line 69 of App.js stringifies an object and then immediately parses it again, leaving you with the original object.

this.recordingSettings = JSON.parse(JSON.stringify(Audio.RECORDING_OPTIONS_PRESET_LOW_QUALITY));

I think this can be simplified to

this.recordingSettings = Audio.RECORDING_OPTIONS_PRESET_LOW_QUALITY;

Not working on iOS device

I'm trying to run this code on iphone but it is not working.. when i press Start every thing gets disabled.. It doesn't even start recording..

Needs update on expo.io

Being the reference example of a recording app in the expo docs, it should probably work: https://expo.io/@community/record

Instead, it says:

This project needs an update

This project uses Expo SDK v16.0.0. If you want to open this project, the author will need to update the project's SDK version.