On Day 2, we’ll enable voice memo recording in our AI-powered sales assistant app using Expo AV Audio API. This will allow sales professionals to record quick notes after a client meeting, which we’ll later convert into GPT-powered CRM entries.
1. Why Add Voice Memo Recording?
✅ Faster Data Entry – Sales teams often prefer speaking over typing.
✅ Accurate Meeting Notes – Capture details immediately after meetings.
✅ Foundation for GPT Summarization – Tomorrow, we’ll transcribe and auto-summarize these memos.
2. Installing Expo AV
Ensure you have Expo AV installed:
expo install expo-av
3. Creating the Voice Memo Recorder Component
✅ Step 1: Create VoiceRecorder.js
Inside src/components/VoiceRecorder.js:
import React, { useState } from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';
import { Audio } from 'expo-av';
export default function VoiceRecorder({ onRecordingComplete }) {
const [recording, setRecording] = useState(null);
const [status, setStatus] = useState('Idle');
const startRecording = async () => {
try {
await Audio.requestPermissionsAsync();
await Audio.setAudioModeAsync({
allowsRecordingIOS: true,
playsInSilentModeIOS: true,
});
const { recording } = await Audio.Recording.createAsync(
Audio.RecordingOptionsPresets.HIGH_QUALITY
);
setRecording(recording);
setStatus('Recording...');
} catch (err) {
console.error('Failed to start recording', err);
}
};
const stopRecording = async () => {
try {
setStatus('Stopping...');
await recording.stopAndUnloadAsync();
const uri = recording.getURI();
setRecording(null);
setStatus('Idle');
onRecordingComplete(uri);
} catch (err) {
console.error('Failed to stop recording', err);
}
};
return (
<View style={styles.container}>
<Text>Status: {status}</Text>
<Button
title={recording ? 'Stop Recording' : 'Start Recording'}
onPress={recording ? stopRecording : startRecording}
/>
</View>
);
}
const styles = StyleSheet.create({
container: { padding: 10, alignItems: 'center' },
});
4. Integrating VoiceRecorder with Home Screen
✅ Step 1: Modify HomeScreen.js
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, Alert } from 'react-native';
import VoiceRecorder from '../components/VoiceRecorder';
export default function HomeScreen() {
const [recordingUri, setRecordingUri] = useState(null);
const handleRecordingComplete = (uri) => {
setRecordingUri(uri);
Alert.alert('Recording Saved', `Saved to: ${uri}`);
};
return (
<View style={styles.container}>
<Text style={styles.title}>AI Sales Assistant</Text>
<VoiceRecorder onRecordingComplete={handleRecordingComplete} />
{recordingUri && <Text>Memo Saved: {recordingUri}</Text>}
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
});
5. Testing Voice Recording
✅ Run the App
npx expo start
✅ Test Flow
| Action | Expected Result |
|---|---|
| Tap Start Recording | App starts recording voice memo. |
| Tap Stop Recording | Memo is saved; URI displayed on screen. |
| Memo Saved Message | Shows the file path (e.g., file:///...). |
6. Optional: Play Back Recorded Memo
✅ Modify VoiceRecorder.js
const playRecording = async () => {
const { sound } = await Audio.Sound.createAsync({ uri: recordingUri });
await sound.playAsync();
};
✅ Add Play Button in HomeScreen.js
{recordingUri && (
<Button title="Play Recording" onPress={() => playRecording(recordingUri)} />
)}
7. Preparing for Tomorrow: Transcribing the Memo
Tomorrow, we’ll:
- Convert voice memos to text using Google Speech-to-Text or AssemblyAI.
- Send the transcription to GPT API to generate structured CRM notes.
8. Key Concepts Covered
✅ Integrated Expo AV Audio API for voice memo recording.
✅ Created a reusable VoiceRecorder component.
✅ Saved recording URI for future processing.
9. Next Steps: Transcribing Voice Memos with AI
Tomorrow, we’ll:
- Upload recorded audio.
- Transcribe it into text using speech-to-text services.
10. References & Learning Resources
- Expo AV Docs
- React Native Audio Recording Example
- Google Speech-to-Text API
- AssemblyAI (Recommended for Transcription)
11. SEO Keywords:
React Native voice memo recording, Expo AV audio API, sales assistant voice notes, React Native speech-to-text app, voice assistant memo app.
