expo/audio-recording-example

Audio Recording Example

Expo

Try Expo in the Browser  •  Read the Documentation  •  Learn more on our blog  •  Request a feature

Follow us on

       

Introduction

Expo is an open-source platform for making universal native apps that run on Android, iOS, and the web. It includes a universal runtime and libraries that let you build native apps by writing React and JavaScript.

This repository includes the Expo SDK, Modules API, Go app, CLI, Router, documentation, and various other supporting tools. Expo Application Services (EAS) is a platform of hosted services that are deeply integrated with Expo open source tools. EAS helps you build, ship, and iterate on your app as an individual or a team.

Read the Expo Community Guidelines before interacting in the repository. Thank you for helping keep the Expo community open and welcoming!

Table of contents

• 📚 Documentation
• 🗺 Project Layout
• 🏅 Badges
• 👏 Contributing
• ❓ FAQ
• 💙 The Team
• License

📚 Documentation

Learn about building and deploying universal apps in our official docs!

• Getting Started
• API Reference
• Using Custom Native Modules

🗺 Project Layout

• packages All the source code for Expo modules, if you want to edit a library or just see how it works this is where you'll find it.
• apps This is where you can find Expo projects which are linked to the development modules. You'll do most of your testing in here.
• apps/expo-go This is where you can find the source code for Expo Go.
• apps/expo-go/ios/Exponent.xcworkspace is the Xcode workspace. When developing iOS, always open this instead of Exponent.xcodeproj because the workspace also loads the CocoaPods dependencies.
• docs The source code for https://docs.expo.dev
• templates The template projects you get when you run npx create-expo-app
• react-native-lab This is our fork of react-native used to build Expo Go.
• guides In-depth tutorials for advanced topics like contributing to the client.
• tools contain build and configuration tools.
• template-files contains templates for files that require private keys. They are populated using the keys in template-files/keys.json.
• template-files/ios/dependencies.json specifies the CocoaPods dependencies of the app.

🏅 Badges

Let everyone know your app can be run instantly in the Expo Go app!

[![runs with Expo Go](https://img.shields.io/badge/Runs%20with%20Expo%20Go-000.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.dev/client)

[![runs with Expo Go](https://img.shields.io/badge/Runs%20with%20Expo%20Go-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.dev/client)

👏 Contributing

If you like Expo and want to help make it better then check out our contributing guide! Check out the CLI package to work on the Expo CLI.

❓ FAQ

If you have questions about Expo and want answers, then check out our Frequently Asked Questions!

If you still have questions you can ask them on our Discord and Forums or X @expo.

💙 The Team

Curious about who makes Expo? Here are our team members!

License

The Expo source code is made available under the MIT license. Some of the dependencies are licensed differently, with the BSD license, for example.

audio-recording-example's Issues

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.

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);
  }
};

Audio on Android emulator is distorted

Hi there,
Not 100% sure this is the right place to post this.
When I record and playback audio on the android emulator - the sound is heavily distorted. I am using the code as is. On ios, everything works fine.

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.

Add comment for JSON.parse/JSON.stringify

Can you please add a comment why JSON stringify and parsing is required here?

Could we get this example using Hooks?

I'm trying to avoid componentDidMount and classes and all of that.
If this example could be updated / forked to use hooks that would be great!

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;

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

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

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

`Possible Unhandled Promise Rejection (id: 0):
TypeError: recording.setOnRecordingStatusUpdate is not a function. (In 'recording.setOnRecordingStatusUpdate(this._updateScreenForRecordingStatus)', 'recording.setOnRecordingStatusUpdate' is undefined)
_stopPlaybackAndBeginRecording$@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:1571:51
tryCatch@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:15620:44
invoke@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:15808:30
tryCatch@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:15620:44
invoke@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:15678:28
http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:15686:19
tryCallOne@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:14976:14
http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:15062:25
callTimer@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:5945:17
callImmediatesPass@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:6034:36
callImmediates@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:6045:48
__callImmediates@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:5813:39
http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:5703:32
__guard@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:5802:11
flushedQueue@http://packager.5p-j8c.gregbenner.audio-recording-example.exp.direct:80/main.bundle?platform=ios&dev=true&strict=false&minify=false&hot=false&assetPlugin=expo/tools/hashAssetFiles:5702:19
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

GNB-Pro
`

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

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