Microphone Plugin don't work with Ionic on iOS

[danielmalmros]

trafficstars

Hi, I'm currently trying to use Wavesurfer in my Ionic setup and everything seems to work fine until I added the Microphone Plugin and I'm having a hard time figuring out why this breaks the below setup when build with Ionic and Xcode.

Wavesurfer.js version(s):

"wavesurfer.js": "^5.2.0"

Browser and operating system version(s):

• Works on Macbook Pro M1 (all browsers)
• Don't work when build with Ionic 6 (Vue 3) and Capacitor V3
  • Xcode Version 13.2.1
  • iOS Version 15.2.1 (real device)

Code needed to reproduce the issue:

<template>
  <div ref="audioWave"></div>
</template>

<script setup lang="ts">
import { RecordingData, VoiceRecorder } from "capacitor-voice-recorder";
import { onMounted, ref } from "vue";
import WaveSurfer from "wavesurfer.js";
import MicrophonePlugin from "wavesurfer.js/src/plugin/microphone";
import { Capacitor } from "@capacitor/core";

const waveSurfer = ref();
const audioWave = ref<HTMLDivElement | any>(null);
const recording = ref<boolean>(false);
const storedRecording = ref<RecordingData>({
  value: {
    recordDataBase64: "",
    msDuration: 0,
    mimeType: "",
  },
});

const loadWaveSurfer = () => {
  let context;
  let processor;

  if (Capacitor.getPlatform() === "ios") {
    let AudioContext = window.AudioContext || window.webkitAudioContext;
    context = new AudioContext();
    processor = context.createScriptProcessor(1024, 1, 1);
  }

  waveSurfer.value = WaveSurfer.create({
    audioContext: context || null,
    audioScriptProcessor: processor || null,
    container: audioWave.value,
    waveColor: "rgba(255, 255, 255, 0.6)",
    barWidth: 4,
    barHeight: 10,
    progressColor: "#fefefe",
    backend: "WebAudio",
    plugins: [MicrophonePlugin.create({})],
  });
};

const toggleRecording = async () => {
  if (!recording.value) {
    recording.value = true;
    await VoiceRecorder.startRecording();
    waveSurfer.value.microphone.start();
  } else {
    recording.value = false;
    storedRecording.value = await VoiceRecorder.stopRecording();
    waveSurfer.value.microphone.stop();
  }
};

onMounted(async () => {
  loadWaveSurfer();
});
</script>

[thijstriemstra]

have you searched wavesurfer.js tickets for other Ionic issues that could be related?

[danielmalmros]

have you searched wavesurfer.js tickets for other Ionic issues that could be related?

@thijstriemstra yes I looked for similar issues, but I did not find anything related to this in the context of Ionic. Correct me if I'm wrong.