\n
brew install ffmpeg<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\nStep 1: Create a Project Structure<\/h3>\n\n\n\n 1. Create a folder named VoiceNote<\/code> and navigate to it:\n\n\n\n\n
mkdir VoiceNote && cd VoiceNote<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\n2. Initialize two subprojects:\n\n\n\n
a) React Native App<\/strong>: \n\n\n\n\n
npx @react-native-community\/cli init VoiceNoteApp<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\nb) Node.js Backend<\/strong>:\n\n\n\n\n
mkdir backend && cd backend npm init -y<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\nStep 2: Set Up the Node.js Backend<\/h3>\n\n\n\n 1. Install required dependencies in the backend<\/code> folder:\n\n\n\n\n
npm install express body-parser multer dotenv axios<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\n2. Install and configure FFmpeg for audio conversion:\n\n\n\n
\n
brew install ffmpeg<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\n3. Create an .env<\/code> file in the backend<\/code> folder and add your Google Speech-to-Text API key:GOOGLE_API_KEY=YOUR_GOOGLE_API_KEY<\/code>\n\n\n\n4. Create a file named server.js<\/code> in the backend<\/code> folder and add the following code:\n\n\n\n\n
require("dotenv").config();\nconst express = require("express");\nconst bodyParser = require("body-parser");\nconst multer = require("multer");\nconst fs = require("fs");\nconst axios = require("axios");\nconst { exec } = require("child_process");\n\nconst app = express();\nconst port = 5019;\n\n\/\/ Middleware\napp.use(bodyParser.json());\n\n\/\/ Multer configuration for file uploads\nconst upload = multer({ dest: "uploads\/" });\n\n\/\/ Endpoint to handle audio upload\napp.post("\/upload", upload.single("audio"), async (req, res) => {\n try {\n const inputPath = req.file.path;\n const outputPath = `${req.file.path}.wav`;\n \n \/\/ Convert the audio file to LINEAR16 with 16000 Hz sample rate\n const ffmpegCommand = `ffmpeg -i ${inputPath} -ar 16000 -ac 1 -f wav ${outputPath}`;\n exec(ffmpegCommand, async (error, stdout, stderr) => {\n if (error) {\n console.error("Error during audio conversion:", stderr);\n return res.status(500).json({ error: "Error converting audio file" });\n }\n \n \/\/ Read the converted audio file\n const audioFile = fs.readFileSync(outputPath);\n const audioBytes = audioFile.toString("base64");\n \n \/\/ Google Speech-to-Text API request payload\n const requestPayload = {\n config: {\n encoding: "LINEAR16",\n sampleRateHertz: 16000,\n languageCode: "en-US",\n },\n audio: {\n content: audioBytes,\n },\n };\n \n \/\/ Send the audio to Google Speech-to-Text API\n try {\n const response = await axios.post(\n `https:\/\/speech.googleapis.com\/v1\/speech:recognize?key=${process.env.GOOGLE_API_KEY}`,\n requestPayload,\n { headers: { "Content-Type": "application\/json" } }\n );\n \n \/\/ Extract transcription from the API response\n const transcription = response.data.results\n .map((result) => result.alternatives[0].transcript)\n .join("\\n");\n \n console.log('transcription : ', transcription);\n \n \/\/ Cleanup temporary files\n fs.unlinkSync(inputPath);\n fs.unlinkSync(outputPath);\n \n \/\/ Respond with transcription\n res.json({ transcription });\n } catch (apiError) {\n console.error("Error during transcription:", apiError.response?.data || apiError.message);\n res.status(500).json({ error: "Error during transcription" });\n }\n });\n } catch (error) {\n console.error("Error processing request:", error);\n res.status(500).json({ error: "Error processing audio file" });\n }\n });\n\napp.listen(port, () => {\n console.log(`Server running at http:\/\/localhost:${port}`);\n});\n<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\n5. Start the backend server:\n\n\n\n
\n
node server.js<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\nStep 3: Configure React Native<\/h3>\n\n\n\n 1. Install dependencies for audio recording in the VoiceNoteApp<\/code> folder:\n\n\n\n\n
npm install react-native-audio-recorder-player react-native-permissions<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\n2. Update the VoiceNoteApp\/ios\/VoiceNoteApp\/Info.plist<\/code> file for iOS permissions. Add the following:\n\n\n\n\n
<key>NSMicrophoneUsageDescription<\/key> \n<string>We need microphone access to record audio for transcription.<\/string><\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\n3. Modify the App.tsx<\/code> file to include the following code:\n\n\n\n\n
import React, { useState } from "react";\nimport { View, Text, Button, StyleSheet, ActivityIndicator } from "react-native";\nimport AudioRecorderPlayer from "react-native-audio-recorder-player";\n\nconst audioRecorderPlayer = new AudioRecorderPlayer();\n\nconst App = () => {\n const [recording, setRecording] = useState(false);\n const [transcription, setTranscription] = useState("");\n const [loading, setLoading] = useState(false); \/\/ State for the spinner loader\n\n const startRecording = async () => {\n try {\n setRecording(true);\n const path = "recording.m4a"; \/\/ Recorded file path\n await audioRecorderPlayer.startRecorder(path);\n console.log("Recording started");\n } catch (error) {\n console.error("Error starting recording:", error);\n }\n };\n\n const stopRecording = async () => {\n try {\n const result = await audioRecorderPlayer.stopRecorder();\n setRecording(false);\n console.log("Recording stopped:", result);\n\n \/\/ Show the loader while sending the audio file\n setLoading(true);\n\n \/\/ Send audio file to backend\n const formData = new FormData();\n formData.append("audio", {\n uri: `file:\/\/${result}`,\n type: "audio\/mpeg",\n name: "recording.mp4",\n });\n\n const response = await fetch("http:\/\/localhost:5019\/upload", {\n method: "POST",\n body: formData,\n headers: {\n "Content-Type": "multipart\/form-data",\n },\n });\n\n const data = await response.json();\n console.log('data.transcription: ', data.transcription);\n setTranscription(data.transcription);\n\n \/\/ Hide the loader after API call is complete\n setLoading(false);\n\n } catch (error) {\n console.error("Error stopping recording:", error);\n setLoading(false); \/\/ Ensure loader is hidden even if there's an error\n }\n };\n\n return (\n <View style={styles.container}>\n <Button\n title={recording ? "Stop Recording" : "Start Recording"}\n onPress={recording ? stopRecording : startRecording}\n \/>\n <Text style={styles.text}>\n {transcription ? `Transcription: ${transcription}` : ""}\n <\/Text>\n {loading && (\n <View style={styles.loaderContainer}>\n <ActivityIndicator size="large" color="#0000ff" \/>\n <\/View>\n )}\n <\/View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: "center",\n alignItems: "center",\n },\n text: {\n marginTop: 20,\n fontSize: 16,\n },\n loaderContainer: {\n position: "absolute",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n justifyContent: "center",\n alignItems: "center",\n backgroundColor: "rgba(255, 255, 255, 0.6)", \/\/ Optional: dim the background\n zIndex: 10, \/\/ Ensure it stays above other components\n },\n});\n\nexport default App;\n<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\n4. Run the React Native app:\n\n\n\n
\n
npx react-native run-ios<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\nStep 4: Test the App<\/h3>\n\n\n\n 1. Start the Node.js backend:\n\n\n\n
\n
cd backend && node server.js<\/code><\/pre>\n \n Copy<\/button>\n <\/amp-iframe>\n <\/div>\n\n\n\n2. Run the React Native app and test by recording your voice.\n\n\n\n
3. The transcription should appear in the app after you stop the recording.\n\n\n\n
\n\n\n\n
Summary<\/h3>\n\n\n\n By following these steps, you\u2019ve successfully created a React Native app with a Node.js backend that records audio, converts it to text using Google\u2019s Speech-to-Text API, and displays the transcription. This process involved configuring React Native, setting up a Node.js backend with FFmpeg for audio conversion, and leveraging Google\u2019s powerful speech recognition capabilities.\n","protected":false},"excerpt":{"rendered":"
This article will guide you through building a mobile app using React Native for the frontend and Node.js for the backend, where users can record […]<\/p>\n","protected":false},"author":1,"featured_media":1454,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[55,54,254],"class_list":["post-1444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-development","tag-nodejs","tag-react-native","tag-voice-to-text-app"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/1444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=1444"}],"version-history":[{"count":22,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/1444\/revisions"}],"predecessor-version":[{"id":1479,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/1444\/revisions\/1479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media\/1454"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=1444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=1444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=1444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}