javascript - Android Chrome でオーディオを歪ませるブロブ

Question

マイクからオーディオ ストリームを入力し、それを blob に保存して、Speech Recognition API エンドポイントに送信できるようにしようとしています。これはデスクトップの Google Chrome では完全に機能しますが、モバイル デバイスのブラウザー (Android Google Chrome) に切り替えるとエラーが発生することに気付きました。オーディオをファイルに出力した後、デスクトップではファイルの音は問題なく聞こえますが、私の電話では完全に歪んでいることがわかりました。さらに調査した結果、Android chromeは Blob をサポートしていないようです。

この問題の回避策はありますか?

これは、音声を Blob に追加してファイルに保存する方法です。

                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);

更新: オーディオをファイルに保存しようとしていますが、reader.readAsDataURL() およびその他のリーダー メソッド (このリンクによると) は blob オブジェクトを想定しています。私のオーディオ オブジェクトは ArrayBuffer の型です。私の他の質問は、ArrayBuffer をファイルに出力するにはどうすればよいですか?

別の更新:このリンクによると、Blob は android chrome でサポートされている必要があります。それにもかかわらず、音声が歪んでいます。問題は別の場所にある可能性がありますか?

更新: さらに調査した結果、オーディオ配列が適切にエンコードされていない可能性があることがわかりました。マイクからの音声を処理するために、ScriptProcessor を使用していますが、このリンクによると、これは非推奨であり、android chrome ではサポートされていません。オーディオ入力のエンコード方法については、このライブラリをご覧ください。Audio Workletを使用するように切り替えることで、この問題を解決できるのではないかと考えています。これが、スクリプト プロセッサ ノードの使用方法です (参照ライブラリでも確認できます)。

       // 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);