Question: playback track and record audio concurrently

[Macdonny]

We're using the wavesurfer.js v6. library and its Microphone plugin for a vuejs project to record vocal recordings over tracks. We're using the Microphone plugin to create a voice recording while the playback of a track is playing, but the recorded audio is having issues recording clearly.

The issue we're having is that the playbacked track seems to be causing the microphone recording to cut out or sound muffled at certain points of the recording. Do you know if there is a fix for this issue?

There are two main components here MicWaveSurfer which records the vocals and DefaultWaveSurfer which plays the track. Each component has its own instance of Wavesurfer.

VocalUserInterface.vue //Parent of Playback component and Microphone component

<template>
  <div slot="expanded">
    <mic-wave-surfer
      :audioUrl="selectedVocalBlobUrl"
      @recording-finished="handleVocalRecordingFinished"
      @audio-url="handleAudioUrl"
      ref="MicWaveSurfer"
    ></mic-wave-surfer>

    <default-wave-surfer
      ref="DefaultWaveSurfer"
      :audioUrl="songOriginalTrack"
    ></default-wave-surfer>
  </div>
</template>

<script>
import MicWaveSurfer from "@/components/MicWaveSurfer";
import DefaultWaveSurfer from "@/components/DefaultWaveSurfer";
import { getFileBlob } from "@/utils";

export default {
  name: "VocalUserInterface",

  components: {
    MicWaveSurfer
    DefaultWaveSurfer
  },

  data: () => ({
    songId: null,
    originalVocalBlobUrl: null,
    audioFileName: null,
    step: "starting", // Tracks state default = starting
  }),

  mounted() {
    this.songId = this.$route.params.songId;
  },

  computed: {
    song() {
      return this.$store.getters["song/getSongById"](this.songId);
    },

    songOriginalTrack() {
      // We don't want the playback wavesurfer to show after the recording is finished
      if (this.song && this.song.mp3File && this.step === "recording") {
        const pattern = /^((http|https|):\/\/)/;
        if (!pattern.test(this.song.mp3File)) {
          return process.env.VUE_APP_SONG_URL_PREFIX + this.song.mp3File;
        } else {
          return this.song.mp3File;
        }
      } else {
        return null;
      }
    },
  },

  methods: {
    reset() {
      Object.assign(this.$data, {
        originalVocalBlobUrl: null,
        selectedVocalBlobUrl: null,
        audioFileName: null,
        step: "starting",
        vocalLoader: null
      });
    },

    startVocalRecording() {
      this.$refs.MicWaveSurfer.startRecording();
      this.$refs.DefaultWaveSurfer.play();
    },

    stopVocalRecording() {
      this.$refs.MicWaveSurfer.stopRecording();
      this.$refs.DefaultWaveSurfer.stop();
    },

    cancelVocalRecording() {
      this.$refs.MicWaveSurfer.cancelRecording();
      this.$refs.DefaultWaveSurfer.stop();
    },

    uploadAudioFile() {
      // Upload .wav or recorded vocal to Storage
      this.step = "uploading";

      this.$refs.MicWaveSurfer.stop();

      getFileBlob(this.selectedVocalBlobUrl, blob => {
        // Capture the uploadController so we can cancel the upload if needed
        this.uploadController = Storage.uploadAudio(
          blob,
          this.vocalMetadata,
          this.audioFileName ||
            `Recorded Vocal ${Math.floor(Math.random() * 1000)}`,
          this.refreshListAndLaunchProcessing
        );

        // Kicks of tracking of vocals
        this.pendingFilename = this.uploadController.snapshot.ref.name;
      });
    },

    // MicWaveSurfer Event Handlers

    handleVocalRecordingFinished({ url }) {
      this.originalVocalBlobUrl = url;
      this.selectedVocalBlobUrl = this.originalVocalBlobUrl;
    },

    handleAudioUrl({ url }) {
      // The audo file returned by the MicWaveSurfer after recording is done
      this.originalBlobUrl = url;
    }
  }
};
</script>

<style lang="scss" scoped></style>

DefaultWaveSurfer.vue

<template>
  <div v-show="false" :id="containerId"></div>
</template>

<script>
import uuidv4 from "uuid/v4";
import WaveSurfer from "wavesurfer.js";
import { formatDuration, absoluteResourceURL } from "@/utils";

const AudioContext = window.AudioContext || window.webkitAudioContext;

export default {
  name: "DefaultWaveSurfer",

  data: () => ({
    WaveSurfer: WaveSurfer,
    isPlayingBack: false,
    instance: null,
    hidden: true,
    duration: 0,
    ac: null,
    options: {
      waveColor: "rgba(26, 22, 50, 0.6)",
      backgroundColor: "#4d2f8d",
      progressColor: "#21ECD8",
      cursorColor: "#21ECD8",
      height: 80,
      responsive: true,
      barWidth: 4,
      barMinHeight: 5,
      barGap: 4,
      barRadius: 4,
      cursorWidth: 0,
      audioContext: null,
      interact: true,
      container: `#wave-surfer-${uuidv4()}`,
      ready: false
    }
  }),

  props: {
    audioUrl: {
      type: String,
      required: false,
      default: undefined
    },

    volume: {
      type: Number,
      required: false,
      default: 1,
      max: 1,
      min: 0
    },

    cursor: {
      type: [String, Number],
      required: false,
      default: 0
    }
  },

  watch: {
    audioUrl: {
      handler(value) {
        this.reset();
        this.loadAudioUrl(value);
      }
    },

    volume: {
      handler(value) {
        this.instance.setVolume(value);
      }
    },

    cursor: {
      handler(value) {
        this.instance.seekTo(value);
      }
    }
  },

  mounted() {
    this.load();
  },

  beforeDestroy() {
    this.instance.unAll();
    this.instance.stop();

    if (this.ac) {
      this.ac.close();
    }

    delete this.instance.backend.buffer;
    this.instance.destroy();
  },

  computed: {
    containerId() {
      return this.options.container.substring(1);
    }
  },

  methods: {
    load() {
      this.ac = new AudioContext() || null;
      this.instance = WaveSurfer.create(this.options);
      this.instance.on("error", this.handleError);
      this.instance.on("ready", this.handlePlayBackReady);
      this.instance.on("finish", this.stop);
      this.instance.on("pause", this.handlePlayBackPaused);
      this.instance.on("seek", this.handleSeek);
      this.instance.on("audioprocess", this.handleProgress);
      this.instance.on("volume", this.handleVolume);
      this.instance.on("play", this.handlePlay);

      this.loadAudioUrl();
    },

    loadAudioUrl(url) {
      url = url || this.audioUrl;
      if (url) {
        this.hidden = false;
        this.instance.load(absoluteResourceURL(url));
      }
    },

    reset() {
      this.hidden = true;
      this.duration = 0;
      this.isPlayingBack = false;
    },

    play(start = 0) {
      this.instance.play(start);
      this.isPlayingBack = true;
    },

    pause() {
      this.instance.pause();
      this.isPlayingBack = false;
      this.$emit("playback-paused");
    },

    stop() {
      this.instance.stop();
      this.isPlayingBack = false;
      this.$emit("playback-finished");
    },

    playBack(force = false) {
      if (this.isPlayingBack) {
        this.isPlayingBack = false;
        this.$emit("playback-paused");
      } else {
        this.isPlayingBack = true;
      }

      this.instance.playPause();
    },

    handleError(e) {
      this.$emit("error", e.message);
    },

    handlePlayBackReady() {
      this.duration = this.instance.getDuration();
      this.ready = true;
    },

    handlePlayBackPaused() {
      this.isPlayingBack = false;
      this.$emit("playback-paused");
    },

    handleSeek(progress) {
      this.$emit("cursor", {
        progress: progress,
        time: this.duration * progress
      });
    },

    handlePlay() {
      this.instance.setVolume(this.volume);
    },

    handleProgress(time) {
        this.$emit("progress", {
          progress: time / this.duration,
          time: time
        });
    },

    handleVolume(volume) {
      this.$emit("volume", volume);
    }
};
</script>

<style scoped></style>

MicWaveSurfer.vue

<template>
 <div :id="containerId" class="mx-5"></div>
</template>

<script>
import MicrophonePlugin from "wavesurfer.js/dist/plugin/wavesurfer.microphone.min";
import AudioRecorder from "audio-recorder-polyfill";
import { trimBuffer } from "@/utils";
import WaveSurferWithEmphasis from "@/components/WaveSurferWithEmphasis";

window.MediaRecorder = AudioRecorder;

export default {
  extends: WaveSurferWithEmphasis,

  name: "MicWaveSurfer",

  data: () => ({
    recorder: null,
    isRecording: false,
    recording: null,
    hasRecordingBeenCanceled: false
  }),

  methods: {
    load() {
      const options = Object.assign(this.options, {
        plugins: [MicrophonePlugin.create()]
      });
      this.instance = this.WaveSurfer.create(options);
      this.instance.on("ready", this.handlePlayBackReady);
      this.instance.on("finish", this.handlePlayBackFinished);
      this.instance.on("pause", this.handlePlayBackPaused);
      this.instance.microphone.on("deviceReady", this.handleMicRecordingStart);
      this.instance.microphone.on("deviceError", this.handleMicRecordingError);
    },

    reset() {
      this.recorder = null;
      this.isRecording = false;
      this.recording = null;
      this.duration = 0;
      this.hasRecordingBeenCanceled = false;
      this.isPlayingBack = false;
    },

    handlePlayBackReady() {
      if (this.isRecording) return;

      this.duration = this.instance.getDuration();
      if (this.duration === 0) return;
    },

    startRecording() {
      this.reset();
      this.instance.microphone.start();
    },

    stopRecording() {
      if (this.recorder) {
        this.recorder.stop();
        this.recorder.stream.getTracks().forEach(i => i.stop());
      }
      this.instance.microphone.stopDevice();
      this.isRecording = false;
    },

    cancelRecording() {
      this.hasRecordingBeenCanceled = true;
      this.stopRecording();
      this.$emit("recording-canceled");
    },

    handleMicRecordingStart(stream) {
      this.recorder = new MediaRecorder(stream);
      this.recorder.addEventListener("dataavailable", e => {
        this.recording = (URL || webkitURL).createObjectURL(e.data);
        if (!this.hasRecordingBeenCanceled) {
          this.$emit("recording-finished", { url: this.recording });
        }
      });
      this.recorder.start();
      this.isRecording = true;
    },

    handleMicRecordingError(code) {
      this.$emit("recording-error", code);
    }
  }
};
</script>

<style scoped></style>