expo / audio-recording-example Goto Github PK
View Code? Open in Web Editor NEWAudio Recording Example
Audio Recording Example
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
Can you please add a comment why JSON stringify and parsing is required here?
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..
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:
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;
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.
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
`
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]```
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
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);
}
};
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.
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.