Audio recording bug on Firefox (desktop)

[visualight]

Hello,

I've created a messaging system where users can leave an audio message.

To guarantee cross browsing of recorded messages, I had to rely on the ffmpeg library on the server side to convert and upload audio messages in MP4 format (m4a not being read by Safari).

Everything works perfectly on Safari and Google Chrome (mobile and desktop).

However, Firefox (Desktop: v.115.0.2 - macOS) displays the following message when I activate the microphone: "Uncaught (in promise) DOMException: AudioContext.createMediaStreamSource: Connecting AudioNodes from AudioContexts with different sample-rate is currently not supported."

Firefox on iOS v.115.0 (32242) on the other hand works perfectly.

After reading on the internet I deactivated and reactivated: "resistFingerprinting to False" in about:config of Firefox Desktop and I reset the Firefox factory settings. Unfortunately, nothing has changed.

Do you have any ideas or suggestions for solving this problem?

Thanks

export default {
  data() {
    return {
      isMicrophoneLoading: false,
      isSubmitLoading: false,
      isMobile: false,
      isMessagerie: false,
      isRecording: false,
      audioUrl: '',
      messageText: '',
      message:null,
      wavesurfer: null,
      access:(this.isMobile?'denied':'granted'),
      maxMinutes: 5,
      orangeTimer: 3,
      redTimer: 4,
      timer: 0,
      timerInterval: null
    };
  },
  components: {
    Messaging,
  },
  mounted() {
    this.checkScreenSize();
    window.addEventListener('resize', this.checkScreenSize);

    if(!this.isMobile)
    {
      this.$moment.locale('fr');
      window.addEventListener('beforeunload', (event) => {
        if (this.isMessagerie) {
          event.preventDefault();
          event.returnValue = '';
        }
      });

      this.initializeWaveSurfer();
    }
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.checkScreenSize);
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 1200;

      const windowHeight = window.innerHeight;
      const navbarHeight = this.$navbarHeight;
      let padding = parseInt(navbarHeight +181);

      const messageListHeight = windowHeight - padding;
      this.$refs.messagingComponent.$refs.messageList.style.height = messageListHeight + 'px';
    },
    showMessagerie() {
      this.isMessagerie = true;
      this.$refs.messagingComponent.scrollToBottom();
    },
    checkMicrophoneAccess() {
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

        return navigator.mediaDevices.getUserMedia({audio: true})
            .then(function (stream) {
              stream.getTracks().forEach(function (track) {
                track.stop();
              });
              return true;
            })
            .catch(function (error) {
              console.error('Erreur lors de la demande d\'accès au microphone:', error);
              return false;
            });
      } else {
        console.error('getUserMedia n\'est pas supporté par votre navigateur.');
        return false;
      }
    },
    initializeWaveSurfer() {
      this.wavesurfer = this.$wavesurfer.create({
        container: '#visualizer',
        barWidth: 3,
        barHeight: 1.5,
        height: 46,
        responsive: true,
        waveColor: 'rgba(108,115,202,0.3)',
        progressColor: 'rgba(108,115,202,1)',
        cursorColor: 'transparent'
      });

      this.record = this.wavesurfer.registerPlugin(this.$recordPlugin.create());
    },
    startRecording() {
      const _this = this;
      this.isMicrophoneLoading = true;

      setTimeout(() =>
      {
        _this.checkMicrophoneAccess().then(function (accessible)
        {
          if (accessible) {
            _this.record.startRecording();

            _this.record.once('startRecording', () => {
              _this.isMicrophoneLoading = false;
              _this.isRecording = true;
              _this.updateChildMessage( 'server', 'Allez-y ! Vous pouvez enregistrer votre message audio maintenant. La durée maximale autorisée pour votre enregistrement est de 5 minutes.', 'text', '', 'Message automatique');
              _this.startTimer();
            });
          } else {
            _this.isRecording = false;
            _this.isMicrophoneLoading = false;
            _this.$swal.fire({
              title: 'Microphone non détecté',
              html: '<p>Le microphone de votre appareil est inaccessible ou l\'accès a été refusé.</p><p>Merci de vérifier les paramètres de votre navigateur afin de vérifier les autorisations de votre microphone.</p>',
              footer: '<a href="/contact">Vous avez besoin d\'aide ?</a>',
            });
          }
        });
      }, 100);
    },
    stopRecording() {
      this.stopTimer();
      this.isRecording = false;
      this.isSubmitLoading = true;
      this.record.stopRecording();

      this.record.once('stopRecording', () => {
        const blobUrl = this.record.getRecordedUrl();
        fetch(blobUrl).then(response => response.blob()).then(blob => {
          this.uploadAudio(blob);
        });
      });
    },
    startTimer() {
      this.timerInterval = setInterval(() => {
        this.timer++;
        if (this.timer === this.maxMinutes * 60) {
          this.stopRecording();
        }
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timerInterval);
      this.timer = 0;
    },
    formatTimer() {
      const minutes = Math.floor(this.timer / 60);
      const seconds = this.timer % 60;
      const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
      const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
      return `${formattedMinutes}:${formattedSeconds}`;
    },
    uploadAudio(blob)
    {
      const format = blob.type === 'audio/webm' ? 'webm' : 'mp4';

      const formData = new FormData();
      formData.append('audio_blob', blob, `audio.${format}`);

      axios.post('/backoffice/encode-audio', formData)
          .then(response => {
            //const s3Path = response.data.s3_path;
            const currentDate = this.$moment();
            const timestamp = currentDate.format('dddd DD MMMM YYYY HH:mm');

            this.updateChildMessage( 'client', '', 'audio', blob, timestamp);
            this.isSubmitLoading = false;
          })
          .catch(error => {
            console.error('Error uploading audio:', error);
            this.isSubmitLoading = false;
          });
    },
    sendMessage() {
      this.isSubmitLoading = true;
      if (this.messageText.trim() !== '') {
        const emmet = 'client';
        const text = this.escapeHTML(this.messageText)
            .replace(/\n/g, '<br>');

        const currentDate = this.$moment();
        const timestamp = currentDate.format('dddd DD MMMM YYYY HH:mm');

        this.$nextTick(() => {
          this.messageText = '';

          const textarea = document.getElementById('messageTextarea');
          if (textarea) {
            textarea.scrollTop = 0;
            textarea.scrollLeft = 0;
          }
        });

        this.updateChildMessage(emmet, text, 'text', '', timestamp);
        this.isSubmitLoading = false;
      }
    },
    escapeHTML(text) {
      const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;',
        "`": '&#x60;',
        "/": '&#x2F;'
      };
      return text.replace(/[&<>"'`/]/g, (match) => map[match]);
    },
    updateChildMessage(emmet, text, type, blob, timestamp) {
      const newMessage = {
        id: this.$refs.messagingComponent.lastMessageId + 1,
        emmet: emmet,
        text: text,
        type: type,
        blob: blob,
        timestamp: timestamp
      };

      this.$refs.messagingComponent.updateMessages(newMessage);
    }
  },
};

[katspaugh]

It probably doesn't like the sample rate on the audiocontext used for the real-time waveform. I've removed it here.