Как передать живое веб-аудио с микрофона в реальном времени?

Question

Я использую звуковой тональный сдвиг проекта с помощью JavaScript. https://aahedi.github.io/data/PitchShifter/

Аудио источник поступает из загрузки, затем можно установить эффект, нажав кнопку воспроизведения и скользящую кнопку высоты тона.

Тогда как получить источник звука с микрофона в режиме реального времени. Я пытался с некоторым кодом, но он не показывает свой эффект подачи?

if (!navigator.getUserMedia) {

            alert('Your browser does not support the Media Stream API');

        } else {

            navigator.getUserMedia(

                {audio: true, video: false},

                function (stream) {
                    //audioSources[1] = audioContext.createMediaStreamSource(stream);
     //node.connect(context.destination);
     
 window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var audioContext = new AudioContext();

    // Create an AudioNode from the stream.
    var mediaStreamSource = audioContext.createMediaStreamSource( stream );

    // Connect it to the destination to hear yourself (or any other node for processing!)
    mediaStreamSource.connect( audioContext.destination );


                        st = new SoundTouch();
                        st.pitch = ($(".pitch-slider").val() / 100);
                        st.tempo = !$("#maintain-tempo").prop("checked") ? ($(".pitch-slider").val() / 100) : 1;



                       f = new SimpleFilter(source, st);
                       var BUFFER_SIZE = 2048;

                        var node = audioContext.createScriptProcessor ? audioContext.createScriptProcessor(BUFFER_SIZE, 2, 2) : audioContext.createJavaScriptNode(BUFFER_SIZE, 2, 2);

                       var samples = new Float32Array(BUFFER_SIZE * 2);

                       var pos = 0;
                       f.sourcePosition = 0;
        
        node.connect(audioContext.destination);
                },

                function (error) {
                    alert('Unable to get the user media');
                }
            );
        }
  

<link href="https://aahedi.github.io/data/PitchShifter/main.css" rel="stylesheet"/>
<script src="https://aahedi.github.io/data/PitchShifter/jquery.min.js"></script>
<script src="https://aahedi.github.io/data/PitchShifter/jquery.nouislider.min.js"></script>


<div class="pitch-shifter-wrapper">
<div class="pitch-shifter">
 <h2>Load Audio File<br />(mp3 or wav)</h2>
 <input autocomplete="off" id="audio-file" type="file" accept=".wav, .mp3" />

 <p class="clear"></p>

 <script>var is_playing;</script>

 <button id="play-pitchshifter" class="tuningButton">play</button>
 <button id="pause-pitchshifter" class="tuningButton button--pause">pause</button>
 <label for="save-output">
  Save output to downloadable file?
  <input type="checkbox" id='save-output'>
 </label>
 <div class="clear"></div>

 <p id="timing">
  <div class="timing">
   <span id="current-time">0:00</span>
   /
   <span id="total-time">0:00</span>
  </div>
  <span id='loading' style='display:none;'>Loading...</span>
 </p>


 <div id='progress-wrapper'>
  <div id="progress"></div>
 </div>

 <div class="clear"></div>

 <h2>Pitch Shift: <span id="pitch-shift-value">80</span>% of original</h2>
 <div class="pitch-slider"></div>

 <div class="clear"></div>


 <label class="semitone-shift-label">Shifted by <input id='semitones' type="text" value="0"> semitones<br />(shifting by one semitone is equivalent to shifting by 5.946%)</label>

 <label for="maintain-tempo">Maintain Tempo <input id='maintain-tempo' type="checkbox" checked></label>
 
 <div class="js-downloads-section" style='display:none;'>
  <h2>Recordings</h2>
  <ul id="recordingslist"></ul>
  
  <h2>Status Log</h2>
  <pre id="log"></pre>
 </div>
  
<script src="https://aahedi.github.io/data/PitchShifter/recorder.js"></script>
<script src="https://aahedi.github.io/data/PitchShifter/st.min.js"></script>