// somewhere in your frontend
// <button id="start">Start</button>
// <button id="stop">Stop</button>
if (navigator.mediaDevices) {
    let accessLevel = { audio: true };
    let voiceInputData = [];

    // use a button or use an even to trigger listening
    let record = document.getElementById('start');
    let stopRecord = document.getElementById('stop');

    navigator.mediaDevices.getUserMedia(accessLevel)
      .then(function (stream) {
        let mediaRecorder = new MediaRecorder(stream);

        // could be done programmatically using background event listeners or triggers
        record.addEventListener('click', () => {
          mediaRecorder.start();
          /* debug > get current state */
          console.log(mediaRecorder.state);

          /* push data to dataArray when available */
          mediaRecorder.ondataavailable = (e) => {
            voiceInputData.push(e.data);
          }
        });

        stopRecord.addEventListener('click', () => {
          mediaRecorder.stop();
          console.log(mediaRecorder.state);
        });

        mediaRecorder.onstop = () => {

          // create blob from recorded data
          let blob = new Blob(voiceInputData, { 'type': 'audio/wav; codecs=opus' });

          // encode to base64
          let reader = new window.FileReader();
          reader.readAsDataURL(blob);
          reader.onloadend = () => {
            let base64Audio = reader.result.split(',')[1];

            /* debug > print out the current base64 string */
            console.log(base64Audio);
            // return base64Audio or send backend
          }
        }
      }).catch(error => {
          console.log(error.message);
        });
  } else {
    console.log('not supported')
}