Recording audio using Cordova and Javascript

Recently, I've been dabbling in creating a new app using Cordova, VueJs, and Onsen UI for VueJs. One of the main features I want to implement is the ability to use the microphone on Android or iOS devices to record audio and then send it to the Google Speech to Text API.

While I have an idea of how to send the data to the API, my challenge lies in figuring out how to actually record the data from a mobile device and utilize it temporarily without saving it directly to the device (unless there's no network connection, in which case it should be saved for later submission when connectivity is restored).

There are several key functionalities I need to incorporate: - Selectable bitrate - Monitoring available storage space on the device to estimate maximum recording duration - Extended recording time based on available space (with the option to split recordings if necessary) - Customizable UI implementation

I've researched various methods to achieve this, but most resources I found are outdated, use deprecated functions, or come with pre-set UI designs.

I've experimented with several recommended Cordova plugins, yet the only one that worked came with a fixed UI, which doesn't align with the custom UI requirement for my project. I also attempted to use getUserMedia() directly on my iPhone via Safari developer tools, but it returned undefined results.

If you know of any cutting-edge native functionalities, useful npm packages, or Cordova plugins that could help me achieve my goal, please share your suggestions or links!

Edit: In summary, I'm seeking the most effective method (applicable to both platforms) to record audio, store it temporarily if necessary, and manipulate it for tasks like sending it to APIs.

Edit 2: The client has introduced some new requirements, significantly expanding the scope of the app. One crucial request is now to save the user-recorded audio files for playback at any time without syncing between devices. Although the focus has shifted slightly, I still need to address the primary question while incorporating the feature to save recorded audio.

javascriptcordovavue.jsvuejs2

Answer №1

Perhaps you could consider giving the standard plugin a try for a straightforward solution. While you mentioned testing other plugins before, I have personally used this one in a previous project and found success with it. It's possible that there may be an issue with how you are invoking the plugin:

If you require additional customization, creating a custom plugin using native code might be necessary. We had to do something similar to access specific features like the Android equalizer in our projects.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the proper way to execute this API request and retrieve the latest news data using the Fetch method?

Note: Please note that the API Key used in this code is not a real one for privacy reasons. const url = 'http://newsapi.org/v2/everything?' + 'q=platformer&' + 'apiKey=3ce15c4d1fd3485cbcf17879bab498db'; ...

javascriptjsonfetch-api

Top recommendation for creating a customizable grid in Angular

We are currently in the process of transitioning our application from GWT to angular. Within our application, we have implemented an editable grid feature. One method for making the grid editable is to use a separate editor for each cell. However, this ap ...

javascriptangularjs

Tips on validating interconnected strings with the help of yup within a react native environment

In my scenario, I am dealing with two date strings called start_date and end_date. Initially, both of these start off as empty strings: export interface FilterSchema { start_date?: any; end_date?: any; } const initialValues: FilterSchema = { s ...

javascriptreactjstypescriptreact-nativeyup

Managing consecutive synchronous side effects that are dependent on each other using React hooks

I am currently in the process of transitioning my application from using Redux to the new context and hooks, but I am facing challenges when it comes to handling a series of synchronous side-effects that rely on the response of the previous one. In my exi ...

javascriptreactjsreact-hooks

Is there a scoping problem with committing actions in Vue and Firebase?

I encountered an issue with the following code snippet: actions: { getFirebaseDb({commit}) { let rooms = [] db.collection("rooms").get().then(function(querySnapshot){ querySnapshot.forEach(doc => { let room = doc.dat ...

firebasefirebase-realtime-databasevue.jsvuex

Continuously animate a series of CSS properties

Here's the code snippet I'm working with: @keyframes ball1 { 0% { transform: translateX(0px); opacity: 0%; } 50% { opacity: 100%; } 100% { transform: translateX(120px); opacity: 0%; } } @keyframes ball2 { 0 ...

javascriptcssanimation

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Just starting out with angular and having trouble generating or updating a table based on text boxes. The schema includes country, sales, and profit fields. There are two text boxes for the x-axis and y-axis inputs. The table should dynamically update when ...

javascripthtmlangularmongodbtypescript

How to display currency input in Angular 2

Is there a way to dynamically format input as USD currency while typing? The input should have 2 decimal places and populate from right to left. For example, if I type 54.60 it should display as $0.05 -> $0.54 -> $5.46 -> $54.60. I found this PLUN ...

javascriptangulartypescriptdirective

Troubleshooting: Dealing with ng-click and invalid functions

Prior to resolving the issue, I encountered a component (within an HTML template) containing a ng-click that was invoking a nonexistent function. Is there a method to enable a strict mode (similar to 'use strict' in JS) or something equivalent t ...

javascriptangularjs

Angular 8 experiencing unexpected collision issues

Currently, I am utilizing Angular 8 with "typescript": "~3.5.3". My objective is to handle the undefined collision in my code. const { testLocation } = this.ngr.getState(); this.step2 = testLocation && testLocation.step2 ? testLocat ...

javascriptangulartypescriptangular-reactive-formsangular-forms

How can you convert an epoch datetime value from a textbox into a human-readable 24-hour date format

I have an initial textbox that displays an epoch datetime stamp. Since this format is not easily readable by humans, I made it hidden and readonly. Now, I want to take the epoch value from the first textbox and convert it into a 24-hour human-readable da ...

javascripthtmldatetimemomentjsepoch

Choose a row from a table by utilizing AJAX with jQuery

Need help with deleting specific table rows using AJAX? The goal is to send the ID and Printer Type values from the table data cells when a row is selected for deletion. <table class="u-full-width" > <thead> <tr> ...

javascriptjqueryajax

Am I causing my entire React component to re-render needlessly every time the state changes?

I've been attempting to develop an accordion component using React, but I seem to be encountering issues with the animation not functioning as expected. The approach I'm taking is quite standard - setting a max-height of 0 for each item body and ...

javascriptreactjs

What is the best way to have child controllers load sequentially within ng-repeat?

Currently, I have a main controller that retrieves data containing x and y coordinates of a table (rows and columns). Each cell has a child controller responsible for preparing the values it will display based on the x and y values from the parent control ...

javascriptangularjs

What is the best way to show customized text from a data member within the :items object array for the item title in a v-select (Vuetify) dropdown menu

Currently, I am new to Vue and exploring Vuetify while working on building a dropdown using "v-select". If there is a simpler way to achieve this, it would be awesome! Otherwise, my plan is to create a new array, convert data for certain members into obje ...

javascriptvue.jsfrontendvuetify.jsv-select

Exploring the features of NextJS version 13 with the benefits

Starting from the 13th step, SSR is utilized by default and in order to opt for client side rendering you must specify it at the top like so: 'use client' Currently, my setup involves TypeScript and styled-component integration. Take a look at ...

javascriptreactjstypescriptnext.js

Is it necessary to include a request in the API route handler in Next.js when passing parameters?

In my API route handler, I have a function for handling GET requests: import { NextRequest, NextResponse } from "next/server"; export async function GET(req: NextRequest, { params }: { params: { id: string } }) { const { id } = params; try { ...

javascriptnext.js

What is the best way to transfer a multidimensional array from PHP to JavaScript?

Attempting to extract array value from a JSON string, I utilize the json_decode function in PHP. <?php $jsonContent=file_get_contents('http://megarkarsa.com/gpsjson.php'); $jsonDecoded=json_decode($jsonContent,true); foreach($jsonEncoded[&apo ...

javascriptphparraysjsonmultidimensional-array

Expand an image to its full dimensions when it is initially loaded

Currently, I am experimenting with placing images of bubbles randomly on a webpage. To create the illusion of the bubble expanding in size from nothing to its full scale, I have been using CSS and specifically the transform:scale(); property. However, my ...

javascriptjqueryhtml

Prevent additional clicks on the image

Currently, I am dealing with a situation where I have a list containing a jQuery handler for mouse clicks. The dilemma is that I need to insert an image into the list, but I want clicking on the image to trigger a different function than clicking elsewhere ...

javascriptjqueryhtml-lists