我对javaScript非常陌生，我知道一些基础知识，但还没有完全理解它背后的完整逻辑（到目前为止我只使用过Python和一点点VBA）
对于uni，我必须建立一个浏览器接口来录制音频并将其传输到运行声转文应用程序的服务器上。我在这里找到了一些开源代码（https://github.com/mdn/dom-examples/blob/main/media/web-dictaphone/scripts/app.js），我想使用这些代码，但缺少websocket部分。现在我不知道该在哪里插入这些代码。到目前为止，我有以下代码：
网络录音机的代码：

// set up basic variables for app

const record = document.querySelector('.record');
const stop = document.querySelector('.stop');
const soundClips = document.querySelector('.sound-clips');
const canvas = document.querySelector('.visualizer');
const mainSection = document.querySelector('.main-controls');

// disable stop button while not recording

stop.disabled = true;

// visualiser setup - create web audio api context and canvas

let audioCtx;
const canvasCtx = canvas.getContext("2d");

//main block for doing the audio recording

if (navigator.mediaDevices.getUserMedia) {
  console.log('getUserMedia supported.');

  const constraints = { audio: true };
  let chunks = [];

  let onSuccess = function(stream) {
    const mediaRecorder = new MediaRecorder(stream);

    visualize(stream);

    record.onclick = function() {
      mediaRecorder.start();
      console.log(mediaRecorder.state);
      console.log("recorder started");
      record.style.background = "red";

      stop.disabled = false;
      record.disabled = true;
    }

    stop.onclick = function() {
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
      console.log("recorder stopped");
      record.style.background = "";
      record.style.color = "";
      // mediaRecorder.requestData();

      stop.disabled = true;
      record.disabled = false;
    }

    mediaRecorder.onstop = function(e) {
      console.log("data available after MediaRecorder.stop() called.");

      const clipName = prompt('Enter a name for your sound clip?','My unnamed clip');

      const clipContainer = document.createElement('article');
      const clipLabel = document.createElement('p');
      const audio = document.createElement('audio');
      const deleteButton = document.createElement('button');

      clipContainer.classList.add('clip');
      audio.setAttribute('controls', '');
      deleteButton.textContent = 'Delete';
      deleteButton.className = 'delete';

      if(clipName === null) {
        clipLabel.textContent = 'My unnamed clip';
      } else {
        clipLabel.textContent = clipName;
      }

      clipContainer.appendChild(audio);
      clipContainer.appendChild(clipLabel);
      clipContainer.appendChild(deleteButton);
      soundClips.appendChild(clipContainer);

      audio.controls = true;
      const blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      chunks = [];
      const audioURL = window.URL.createObjectURL(blob);
      audio.src = audioURL;
      console.log("recorder stopped");

      deleteButton.onclick = function(e) {
        e.target.closest(".clip").remove();
      }

      clipLabel.onclick = function() {
        const existingName = clipLabel.textContent;
        const newClipName = prompt('Enter a new name for your sound clip?');
        if(newClipName === null) {
          clipLabel.textContent = existingName;
        } else {
          clipLabel.textContent = newClipName;
        }
      }
    }

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
  }

  let onError = function(err) {
    console.log('The following error occured: ' + err);
  }

  navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);

} else {
   console.log('getUserMedia not supported on your browser!');
}

websocket部分（客户端）：

window.addEventListener("DOMContentLoaded", () => {
  // Open the WebSocket connection and register event handlers.
  console.log('DOMContentLoaded done');
  const ws = new WebSocket("ws://localhost:8001/"); // temp moved to mediarecorder.onstop
  dataToBeSent = function (data) { 
    ws.send(data);
  };
  console.log('ws is defined');
  

})

现在我只是把两个部分堆叠在一起，但是这并不起作用，因为，正如我发现的，你只能在一个块中定义和使用变量（比如ws），这导致了一个错误，即当我在if语句中调用sending函数时，ws i not defined。
我已经试着寻找了几个小时的教程，但没有一个包含这个主题。我还试着将Web套接字部分移到if语句中，但那也成功了-不出所料，至少不是以我尝试的方式。
我觉得我的问题在于理解如何定义websocket，这样我就可以在if语句中调用它，或者找到一种方法，以某种方式在ws被认为是定义的地方获得音频。不幸的是，我只是没有得到它的背后，已经投入了几天，这真的很令人沮丧。
我很感激任何帮助。如果你有任何想法，我可以改变或移动的代码或也许只是知道任何教程，可以帮助，我真的很感激。
先谢了!