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.

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

Currency unique to a specific culture

Recently, I encountered an issue while working on a website that involved using JavaScript code to format currency values. Here is the snippet of code that was causing the problem: UsdAmount.toLocaleString(siteCulture, {style: 'currency', ...

Updating a form field dynamically with AJAX in Laravel

I'm working on updating the field $medic->current based on certain logic that I have in mind. I'm quite new to using AJAX and would appreciate a little guidance to kick things off. In my code, I am calculating the difference between two dates ...

Issues with jQuery requests not working properly on the mobile application

Creating a mobile application for Android devices using Intel XDK has been a rewarding experience so far. I have been testing my PHP code on an emulator and local development server (127.0.0.1) through AJAX methods such as $.ajax(), $.post(), and $.get(). ...

Transforming a single object into multiple arrays using AngularJS

Just starting out with AngularJS and I've got some data that looks like this { day1: 0, day2: 0, day3: 0, day4: 2 } Is there a way to convert this data into arrays structured like below? [     ["day1": 0],     ["day2": 0],   ...

Shadow and Quality Issues with SVG Images

I have designed a unique SVG image with intricate details and a decorative frame, enhanced with shadowing effects. Unfortunately, after importing this SVG into a react-native application using the react-native-svg library, I noticed that the shadow around ...

A guide on implementing array properties in Vue 3

Currently learning the fundamentals, I have an array set up in the parent component (App.vue) data() { return { fruits: [ "apple", "pear", "cherry" ], }; }, I'm aiming to have three instances of the s ...

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

Sharing AngularJs controllers between different modules can help streamline your

I'm facing an issue with trying to access an array from one controller in another controller. Despite simplifying the code for clarity, I still can't seem to make it work. Here is my first controller: app.controller('mycont1', [' ...

Problems with Ajax functionality in CodePen

Currently working on the Wikipedia Viewer project for freeCodeCamp. I'm encountering an issue with the ajax function as nothing is being logged in the console upon click. The code snippet in question is provided below. Appreciate any help or insight o ...

Tips for correctly deleting a duplicate ref Object ID following the removal of a Document

Coming from a background in relational databases, I'm encountering a challenge with a pattern in Mongoose. Let's say we have SchemaA and SchemaB (for example, pets and people): const Person = new Schema({ name: String, pets: [{ ref: ...

Exploring the differences between this.$emit and this.$root.$emit in Vue.js: a guide to best practices

My Vue2 components are dynamically added and removed using v-if. Sometimes, I need to communicate between these components by using $emit in the sender and $on in the receiver. I have been utilizing this.$root.$emit to broadcast custom events and this.$ro ...

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

I’m having trouble with mxgraph’s getPrettyXml() not capturing the value of Custom elements. In my customized template, it looks like this: <add as="symbol"> <Symbol label="Symbol" description="" href="" data="{[hi :bill]}"> &l ...

Safeguarding Information about Objects

Currently, I am developing a program that allows users to retain search terms from one session to another. When a user preserves a search term, the corresponding data is also saved. At the start of each session, any outdated data is discarded if it does no ...

Establish and define the global variable "Protractor"

In order to pass a string value from the function editPage.CreateEntity();, you can use that value in multiple test cases by assigning it to the variable entityName. You are able to retrieve the value by setting up the test case as follows: fit('Te ...

Internet Explorer IE 11 encounters an "Error: Object does not support property or method" issue

Recently, I started using the jquery circleChart.min.js plugin for creating a circle chart. It's been working perfectly on all browsers except for Internet Explorer 11 (IE11). I keep getting an error message when trying to run it in IE11. Can anyone h ...

Avoid unintended double-tapping on mobile devices

On my main page, I have a button that triggers an overlay with item details, including buttons like one that reveals a phone number. An issue arises when a user accidentally double-clicks the main page button. The first click is processed on the main page ...

After using browserify, when attempting to call the function in the browser, an Uncaught ReferenceError occurs

I am currently in the process of creating a compact NPM package. Here is a basic prototype: function bar() { return 'bar'; } module.exports = bar; This package is meant to be compatible with web browsers as well. To achieve this, I have inst ...

Refreshing a webpage to accurately display changes made in a CRUD application without the need for a hard reset

My to-do app is almost fully functional - I can create items, mark them as completed, and delete them using a delete button. However, there's one issue: when I delete an item, the page doesn't update in real-time. I have to manually refresh the p ...

Get the JS file by tapping the download button, and access the

In creating the web page, I utilize a modular approach. Leveraging node js and the node-static server are essential components of this process. One specific requirement I have is implementing file downloads from a computer to a device using a button trigg ...

The routing functionality in Angular4 encounters issues when the `router.navigate()` method is used within the callback of a

I am currently working on implementing Google Sign In within my Angular4 app, but I have run into an unusual issue with routing after using router.navigate() in the Google Sign In callback function. To help illustrate this issue, I have created a sample d ...