AudioContext API can't use mediaStream

I have this working code to grab audio from the microphone:

  var audioContext = window.AudioContext ? new window.AudioContext() :
               window.webkitAudioContext ? new window.webkitAudioContext() :
               window.mozAudioContext ? new window.mozAudioContext() :
               window.oAudioContext ? new window.oAudioContext() :
               window.msAudioContext ? new window.msAudioContext() :
               undefined;

  (...)
  navigator[getUserMedia]({audio:true}, function(stream) {
    media = audioContext.createScriptProcessor(stream);
    js = audioContext.createJavaScriptNode(BUFFER_LENGTH, 2, 2);
    js.onaudioprocess = function(e) { 
      sendAudio(e);
    };
  }

but when I tried to stop it, in Chrome works fine and in Firefox, I get an error that media.mediaStream.stop don't exists!!

Stoping code:

    (...)
    media.mediaStream.stop();
    js.disconnect();

to quick fix I put a try catch and set the variables null, but I don't like off the fix! What can I do?

Answers


for starters createJavaScriptNode is deprecated, instead use createScriptProcessor this works :

var audio_context;

var BUFF_SIZE = 512; 

var microphone_data = {};

try {

  window.AudioContext = window.AudioContext || window.webkitAudioContext;
  audio_context = new AudioContext();
  console.log("cool audio context established");

} catch (e) {
  alert('Web Audio API is not supported by this browser and/or its current config\n');
}

function process_microphone_buffer(event) {

    var microphone_buffer = event.inputBuffer.getChannelData(0);   

    console.log('microphone_buffer.length ', microphone_buffer.length);
}


function on_error(e) {
    console.log(e);
}

function start_microphone() {

    microphone_data.microphone_stream = audio_context.createMediaStreamSource(microphone_data.media_stream);

    microphone_data.script_processor_node = audio_context.createScriptProcessor(BUFF_SIZE, 1, 1);

    microphone_data.script_processor_node.onaudioprocess = process_microphone_buffer;

    microphone_data.microphone_stream.connect(microphone_data.script_processor_node);
    microphone_data.microphone_stream.connect(audio_context.destination);

    console.log('OK microphone stream connected');
}

function record_microphone() {    //   call this from your UI ... say a button

    if (! navigator.getUserMedia) {

        navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    }

    navigator.getUserMedia(

        {audio: true},

        function(stream) {

            microphone_data.media_stream = stream;
            start_microphone();
        },

        on_error
    );
}

function stop_microphone() {  //  call this from ... say a button

    microphone_data.microphone_stream.disconnect();
    microphone_data.script_processor_node.disconnect();
    microphone_data.media_stream.stop();
    microphone_data.script_processor_node.onaudioprocess = null;

    console.log('... microphone now stopped')    ;
}

take care


Need Your Help

Angular Material dropdown using md-select and md-option doesn't display

javascript html angularjs material-design angular-material

I was able to successfully create dropdown picker by designing stand-alone page using md-select/md-option as mentioned below, However when i use this in my app it throws an error and I don't see dr...

Implement MVVM With Entity Framework

wpf entity-framework mvvm

I created database in management studio, a model in my project with the ADO.NET Entity Data model for the tables.