4

I am trying to input audio stream from microphone and save it to blob so I could send it to Speech Recognition API endpoint. This works perfectly on google chrome on desktop, but I noticed errors when I would switch to a mobile device browser (android google chrome). After outputting the audio to a file, I found out that on desktop, the file sounds fine, but on my phone, it would be completely distorted. After more research, it appears that android chrome does not support Blob;

Is there some work around for this issue?

This is how I add the audio to the Blob and save it to a file:

                var blob = new Blob([audio], { type: 'audio/wav' });
                var reader = new FileReader;
                reader.onload = function() {
                    window.open(this.result.replace(/data:.+?\/[^;]+/, "data:application/octet-stream"));
                };
                reader.readAsDataURL(blob);

Update: I am trying to save the audio to a file but reader.readAsDataURL() and any other of the reader methods(according to this link) is expecting a blob object. My audio object is a type of ArrayBuffer. My other question is: how can I output ArrayBuffer to a file?

Another Update: According to this link, blob should be supported by android chrome. Nevertheless, my audio is distorted, maybe the issue could be somewhere else?

Update: After more research, I found out that our audio array might not be properly encoded. To process the audio from the microphone, we are using ScriptProcessor, but according to this link, it is deprecated, and not supported on android chrome. For reference to how we are encoding the audio input, you can check out this library. I am thinking that the issue might be solved by switching to using the Audio Worklet.This is how I am using the Script Processor Node(as you can also see in the referenced library):

       // Create ScriptProcessorNode
        this.scriptProcessorNode = this.options.context.createScriptProcessor(this.options.bufferLen, numChannels, numChannels);
        // Connect scriptProcessorNode (Theretically, not required)
        this.scriptProcessorNode.connect(this.options.context.destination);
        // Create callback to update/analyze floatFrequencyData
        var self = this;
        this.scriptProcessorNode.onaudioprocess = function (event) {
            self.analyser.getFloatFrequencyData(self.floatFrequencyData);
            self.update();
            self.store(event);
            self.monitor();
        };
        // Connect scriptProcessorNode
        this.options.source.connect(this.scriptProcessorNode);
Filip Skukan
  • 531
  • 1
  • 7
  • 18

0 Answers0