Using html5 to capture microphone input on mobile chrome

StackOverflow https://stackoverflow.com/questions/17786351

Question

I am trying to record from the microphone using HTML5 in Chrome 29 Beta for Android (it has enabled web audio support in its beta 29). In the code below, ProcessAudio is the web audio filter function, in which I receive the input buffer from the microphone. I get the correct sample size. However, the audio pcm samples in mobile chrome are always zero. Does chrome disable the input to the audio filters in its mobile version? Has anybody got audio recording working using HTML5 in chrome mobile version? The following code works fine in chrome (desktop version). 

    <!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>
Was it helpful?

Solution 2

There's an issue with inputBuffer in Chrome beta for Android right now - it always contains zeros (at least on those devices that I tested) as you mentioned - confirmed. That ain't much of help but for demo purposes the best I could achieve right now is playing "live" input stream via <audio> object. See here. Hit "record" and then start playing the audio object. The rest beyond that is TARFU in the current beta. Guess I'm waiting for G-folks to patch it asap. What I found out though, is that zingaya.com works fine (that is, records your audio and plays it back to you) on Chrome Beta for Android. Just try them out and they'll play back your stream. Apparently, this is made by leveraging WebRTC. In other words you evidently can record an audio stream that way, I haven't figured out how to do it just yet. Post it up if you come up with something. G-guys are working fast on the other hand - they've released a new beta version less than a week ago that at least can play audio fetched with XHR. The version prior to that couldn't do that even.

OTHER TIPS

We now have Web Audio input working in Chrome for Android Beta (31.0.1650.11).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top