使用 html5 在移动 chrome 上捕获麦克风输入答案

【问题标题】：Using html5 to capture microphone input on mobile chrome使用 html5 在移动 chrome 上捕获麦克风输入
【发布时间】：2013-07-21 02:46:38
【问题描述】：

我正在尝试在适用于 Android 的 Chrome 29 Beta 中使用 HTML5 从麦克风录制（它已在其 beta 29 中启用网络音频支持）。在下面的代码中，ProcessAudio 是网络音频过滤器函数，我在其中接收来自麦克风的输入缓冲区。我得到了正确的样本量。但是，移动 chrome 中的音频 pcm 样本始终为零。 chrome 是否会在其移动版本中禁用音频过滤器的输入？有没有人在 chrome 移动版中使用 HTML5 进行录音？以下代码在 chrome（桌面版）中运行良好。

    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
        function GetMedia(obj, fnSuccess, fnFailure)
        {
            if(navigator.getUserMedia)
            {
                return navigator.getUserMedia(obj, fnSuccess, fnFailure);
            }
            else if(navigator.webkitGetUserMedia)
            {
                return navigator.webkitGetUserMedia(obj, fnSuccess, fnFailure);
            }
            else if(navigator.mozGetUserMedia)
            {
                return navigator.mozGetUserMedia(obj, fnSuccess, fnFailure);
            }
            else if(navigator.msGetUserMedia)
            {
                return navigator.msGetUserMedia(obj, fnSuccess, fnFailure);
            }
            alert("no audio capture");
        }

        var incrementer = 0;
        function ProcessAudio(e)
        {
            var inputBuffer = e.inputBuffer.getChannelData(0);
            var outputBuffer = e.outputBuffer.getChannelData(0);
            outputBuffer.set(inputBuffer, 0);
            document.getElementById("display").innerText = 
                            incrementer + " " + inputBuffer[0];
            incrementer++;

        }

        var context = null;

        function Success(localMediaStream)
        {
            context = new window.webkitAudioContext();
            var microphone = context.createMediaStreamSource(localMediaStream);
            var node = context.createScriptProcessor(4096, 1, 1);
            node.onaudioprocess = ProcessAudio;
            microphone.connect(node);
            node.connect(context.destination);
        }
        function Error(err)
        {
            alert("no audio support");
        }
        function load(e)
        {
            GetMedia({audio:true,video:false}, Success, Error);
        }
    </script>
    </head>
    <body onload="load(event)">
    <div>Audio Player</div>
    <div id="display"></div>
    <video id="localvideo" autoplay="autoplay" style="opacity:1"></video>
    </body>
    </html>

【问题讨论】：

仅供参考，移动版 Chrome（稳定版和测试版）已经更新了一段时间，好消息是现在一切正常，正如预期的那样，包括实时输入。敲代码！ PS：也许我的错误报告做到了 C：

标签： html google-chrome mobile microphone web-audio-api

【解决方案1】：

我们现在可以在 Chrome for Android Beta (31.0.1650.11) 中使用 Web 音频输入。

【讨论】：

【解决方案2】：

目前 Android 版 Chrome 测试版中的 inputBuffer 存在问题 - 正如您所提到的，它始终包含零（至少在我测试过的那些设备上） - 已确认。这没什么帮助，但出于演示目的，我现在能做到的最好的方法是通过<audio> 对象播放“实时”输入流。见here。点击“录制”，然后开始播放音频对象。除此之外的其余部分是当前测试版中的 TARFU。猜猜我在等G-folks尽快修补它。但我发现，zingaya.com 在适用于 Android 的 Chrome Beta 上运行良好（即录制您的音频并将其回放给您）。只需试用它们，它们就会播放您的流。显然，这是通过利用 WebRTC 实现的。换句话说，您显然可以以这种方式录制音频流，我还没有弄清楚如何做到这一点。如果您有什么想法，请发布它。另一方面，G-guys 工作得很快——他们在不到一周前发布了一个新的 beta 版本，至少可以播放用 XHR 获取的音频。之前的版本甚至都做不到。

【讨论】：