AudioContext.createMediaStreamSource alternative f

Question

I've developed an app using Cordova and the Web Audio API, that allows the user to plug in headphones, press the phone against their heart, and hear their own heartbeat.

It does this by using audio filter nodes.

 //Setup userMedia
context = new (window.AudioContext||window.webkitAudioContext);
navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia);
navigator.getUserMedia(
                        {audio:true},
                        userMediaSuccess,
                        function(e) {
                            alert("error2 " + e.message);
                        });

function userMediaSuccess(stream)
{   
    //set microphone as input
    input = context.createMediaStreamSource(stream);

    //amplify the incoming sounds
    volume = context.createGain();      
    volume.gain.value = 10;

    //filter out sounds below 25Hz
    lowPass = context.createBiquadFilter(); 
    lowPass.type = 'lowpass';
    lowPass.frequency.value = 25;

    //filter out sounds above 425Hz
    highPass = context.createBiquadFilter(); 
    highPass.type = 'highpass';
    highPass.frequency.value = 425;

    //apply the filters and amplification to microphone input
    input.connect(lowPass);
    input.connect(highPass);
    input.connect(volume);

    //send the result of these filters to the phones speakers
    highPass.connect(context.destination);
    lowPass.connect(context.destination);       
    volume.connect(context.destination);


}

It runs fine when I deploy to Android, but it seems most of these features aren't available on iOS mobile browsers.

I managed to make getUserMedia function using the iosRTC plugin, but createMediaStreamSource is still "not a function."

So, I'm looking for an alternative to the Web Audio API that can filter out frequencies, or if there are any plugins I could use, that would be perfect.

Answer 1

Did you try to use

document.addEventListener('deviceready', function () {
  // Just for iOS devices.
  if (window.device.platform === 'iOS') {
     cordova.plugins.iosrtc.registerGlobals();
  }
});

Answer 2

You asked this question quite a while ago, but sadly createMediaStreamSource is still not supported in Safari Mobile (will it ever be?).

As previously said, a plugin is the only way to achieve this, and there is actually a Cordova/Phonegap plugin that does exactly that. cordova-plugin-audioinput gives you access to the sound from the microphone using either the Web Audio API or by callbacks that delivers raw audio data chunks, and it supports iOS as well as Android.

Since I don't want to post the same answer twice, I'll instead point you to the following answer here on stackoverflow, where you'll also find a code example: https://stackoverflow.com/a/38464815/6609803

I'm the creator of the plugin and any feedback is appreciated.

Answer 3

There's no way to do this on ios web. You'd need a native app, since Apple doesn't support audio input in safari.