Is there a way to lower the recording volume of HTML5 recording to prevent feedback?

Question

I am using Recorder.js to record audio but there is terrible feedback if I don't use a headset. There is even a little feedback if I use my apple earphones where the mic is a bit closer to the ear piece. Is there a way to lower the mic/recording volume and prevent the feedback?

i also had this problem before, i think its a hardware problem already. — Dale, Oct 22 '14 at 07:55
I haven't had the time to test it just yet but the links seem to have the correct info I need and their examples have no feedback so i'll award the bounty and accept it after I have tested — frazras, Oct 23 '14 at 12:46

Scott Stensland · Answer 1 · 2017-12-15T12:56:22.910

If you have access to the gain_node - you can control the output speaker volume

put this into your html (optional)

<p>Volume</p>
<input id="volume" type="range" min="0" max="1" step="0.1" value="0.5"/>

then do similar to following where U have access to the gain_node

  document.getElementById('volume').addEventListener('change', function() {

      var curr_volume = this.value;
      gain_node.gain.value = curr_volume;

      console.log("curr_volume ", curr_volume);
  });

below I bundle above into a set of calls to Web Audio API where I have a UI widget to change the volume while it listens to your microphone ... turn DOWN your volume before running this !

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>capture microphone then show time & frequency domain output</title>

<script type="text/javascript">

var webaudio_tooling_obj = function () {

    var audioContext = new AudioContext();

    console.log("audio is starting up ...");

    var BUFF_SIZE_RENDERER = 16384;
    var SIZE_SHOW = 3; // number of array elements to show in console output

    var audioInput = null,
    microphone_stream = null,
    gain_node = null,
    script_processor_node = null,
    script_processor_analysis_node = null,
    analyser_node = null;

    if (!navigator.getUserMedia)
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;

    if (navigator.getUserMedia){

        navigator.getUserMedia({audio:true}, 
            function(stream) {
                start_microphone(stream);
            },
            function(e) {
                alert('Error capturing audio.');
            }
            );

    } else { alert('getUserMedia not supported in this browser.'); }

    // ---

    function show_some_data(given_typed_array, num_row_to_display, label) {

        var size_buffer = given_typed_array.length;
        var index = 0;

        console.log("__________ " + label);

        if (label === "time") {

            for (; index < num_row_to_display && index < size_buffer; index += 1) {

                var curr_value_time = (given_typed_array[index] / 128) - 1.0;

                console.log(curr_value_time);
            }

        } else if (label === "frequency") {

            for (; index < num_row_to_display && index < size_buffer; index += 1) {

                console.log(given_typed_array[index]);
            }

        } else {

            throw new Error("ERROR - must pass time or frequency");
        }
    }

    function process_microphone_buffer(event) {

        var i, N, inp, microphone_output_buffer;

        // not needed for basic feature set
        // microphone_output_buffer = event.inputBuffer.getChannelData(0); // just mono - 1 channel for now
    }

    function start_microphone(stream){

        gain_node = audioContext.createGain();
        gain_node.connect( audioContext.destination );

        microphone_stream = audioContext.createMediaStreamSource(stream);
        microphone_stream.connect(gain_node); 

        script_processor_node = audioContext.createScriptProcessor(BUFF_SIZE_RENDERER, 1, 1);
        script_processor_node.onaudioprocess = process_microphone_buffer;

        microphone_stream.connect(script_processor_node);

        // --- enable volume control for output speakers

        document.getElementById('volume').addEventListener('change', function() {

            var curr_volume = this.value;
            gain_node.gain.value = curr_volume;

            console.log("curr_volume ", curr_volume);
        });

        // --- setup FFT

        script_processor_analysis_node = audioContext.createScriptProcessor(2048, 1, 1);
        script_processor_analysis_node.connect(gain_node);

        analyser_node = audioContext.createAnalyser();
        analyser_node.smoothingTimeConstant = 0;
        analyser_node.fftSize = 2048;

        microphone_stream.connect(analyser_node);

        analyser_node.connect(script_processor_analysis_node);

        var buffer_length = analyser_node.frequencyBinCount;

        var array_freq_domain = new Uint8Array(buffer_length);
        var array_time_domain = new Uint8Array(buffer_length);

        console.log("buffer_length " + buffer_length);

        script_processor_analysis_node.onaudioprocess = function() {

            // get the average for the first channel
            analyser_node.getByteFrequencyData(array_freq_domain);
            analyser_node.getByteTimeDomainData(array_time_domain);

            // draw the spectrogram
            if (microphone_stream.playbackState == microphone_stream.PLAYING_STATE) {

                show_some_data(array_freq_domain, SIZE_SHOW, "frequency");
                show_some_data(array_time_domain, SIZE_SHOW, "time"); // store this to record to aggregate buffer/file
            }
        };
    }

}(); //  webaudio_tooling_obj = function()

</script>

</head>
<body>

    <p>Volume</p>
    <input id="volume" type="range" min="0" max="1" step="0.1" value="0.0"/>

</body>
</html>

Of course no UI widget is necessary as you have programmatic control over the output volume and so to go silent you can either disconnect the gain node or just set it low

score 1 · Accepted Answer · edited May 23 '17 at 12:06

Their example page (example_simple_exportwav.html) states that you should wear headphones or turn down the volume.

Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting feedback!

You could mute or decrease the volume of the speakers during recording:

I also tested a few examples and never experienced feedback with my laptop speakers. Could you post your code so we could test it live?

Record and Export Audio, Video files in browser using Web Audio API with Recorder.js - demo at the bottom
http://webaudiodemos.appspot.com/AudioRecorder/index.html via Web Audio Demos

Is there a way to lower the recording volume of HTML5 recording to prevent feedback?

2 Answers2