recorder.js | : microphone : HTML5 Recorder - mp3 output | Audio Utils library

I am trying to capture audio from the microphone in the browser, convert it to a wav format and send it to flask backend in order to transcribe it and perform intent classificatio on the request. However this error occurs:

I have been looking to cut a audio blob in Js, and return a cut blob.

The blob is registered using WebAudioRecorder.js and using the mic of your pc.

I already found this repo: mp3-cutter, but it is written in node.js, and require to have access to the filesystem.

I also found this one: audio-cutter, but it has a UI.

I have explored multiple solution and did not find any simple solution.

While analyzing the recording, i found out that the mp3 registered with the mic have a 1024 bit header. Using this, and based on this, i wrote little Js function:

I am using Recorder.js and MediaDevices to record audio. First few recordings are good but after some recordings (random as far as I can tell) the recorded audio is empty.

I can create the same issue if I Press Record and Stop in quick succession for some time.

Here is my code:

I would like to realize this.

1. A user speaks to a web browser.
2. A web browser (Google Chrome) record user's voice as WAV file(Recorder.js) and send it to a python-flask server.

I realized this with the help of addpipe's simple recorder.js sample. https://github.com/addpipe/simple-recorderjs-demo

This sample uses php server, so I changed the original app.js.

original app.js

I have a browser app which records the user's voice through their microphone and exports to a WAV file using recorder.js. I think convert that to a data url and post it to node. I then try to send the audio to the Microsoft Azure Speaker Recognition API but I always get "Invalid Audio Format: Not a WAVE file - no RIFF header" back.

Is there a way to add a RIFF header or is there something about recorder.js or converting to and from base64 which removes these headers? Is there a way to add them back in?

The code: INDEX.HTML

I've been using AngularAudioRecorder (AngularJS) for the last 4 years and with the last Chrome update I'm getting the following error:

...

I would like to realize this.

1. A user speaks to a web browser.
2. A web browser (Google Chrome) record user's voice as WAV file (Recorder.js) and send it to a python-flask server.
3. Python server calls Google Cloud text to speech API and transcribe WAV file.
4. Send the transcribed text to the web browser.

I develop this app locally using Windows 10, WSL, Debian 10/buster, python3.7.6 and Google Chrome.

I realized step 1,2,3, but not 4. In step 2, I used XMLHttpRequest() to send WAV file to python-flask server. So, in step 4, I can't use return render_template() in ordinary way.

I searched "XMLHttpRequest() flask return render_template()" and found a solution (How to get the response of XMLHttpRequest?) to use

XMLHttpRequest.responseText in XMLHttpRequest.onreadystatechange when XMLHttpRequest.readyState equals to XMLHttpRequest.DONE.

I needed to implement speech 'identification', ie. Guess if the person who is trying to login, is actually him/her, by matching his/her voice. To consider the case, where the app doesn't recognize the person, but the user is himself trying to login, then he may bypass it with a pin, setup during initial settings.

I am using Python and Flask, to build the webapp, and included javascript in the question, so as to know of possible ways in it too. Till now, i read about it from some sources, but i couldn't arrive at a possible solution, on stack overflow, as well as 'few' blog posts.

The best 'possible' solution i could arrive at was Cognitive Speech Services by Microsoft - https://azure.microsoft.com/en-us/services/cognitive-services/speaker-recognition/

I also thought of recording the voice using the Recorder.js, and analyzing at the server end, but couldn't implement it.

So, i wanted a way to implement it on the web app, even a simple gist with a bit of code on using ms cognitive services (i did read pages of the documentation, but it didnt help much), or doing it by python will be helpful.

When using Selenium IDE to record actions on a web page the application is stopping the JavaScript and displays the error message "too much recursion."

I'm using Selenium IDE 2.9.1.1 on FireFox 54.0.1

I wrote a simple javascript alert for testing, but it is also being stopped by Selenium.