Как записать голосовое сообщение?

Question

[Andre548]

Не могу настроить скрипт. Дефакто он работает, но есть нюансы.
1. Запускаем запись, все ок, но после того как ставим на паузу, браузер показывает, что микрофон все еще включен
2. Если записывать сообщение с телефона, то воспроизвести его не получается

<script setup>
import {ref} from 'vue';
const props = defineProps(['form']);
let showModal = ref(false);
const isRecording = ref(false);
const mediaRecorder = ref(null);
const chunks = ref([]);
const audioURL = ref('');
const recordingSeconds = ref(0);
let recordingInterval = null;
const startRecording = () => {
  navigator.mediaDevices.getUserMedia({audio: true})
      .then(stream => {
        isRecording.value = true;
        chunks.value = [];
        mediaRecorder.value = new MediaRecorder(stream);
        mediaRecorder.value.addEventListener('dataavailable', event => {
          chunks.value.push(event.data);
        });
        mediaRecorder.value.addEventListener('stop', () => {
          clearInterval(recordingInterval);
          const audioBlob = new Blob(chunks.value, {type: 'audio/webm'});
          audioURL.value = URL.createObjectURL(audioBlob);
          recordingSeconds.value = 0;
        });
        mediaRecorder.value.start();
        startRecordingTimer();
      })
      .catch(error => {
        console.error('Ошибка при получении доступа к микрофону:', error);
      });
};
const stopRecording = () => {
  isRecording.value = false;
  mediaRecorder.value.stop();
};
const startRecordingTimer = () => {
  recordingInterval = setInterval(() => {
    recordingSeconds.value++;
  }, 1000);
};
const deleteMessage = () => {
  audioURL.value = '';
  chunks.value = [];
  showModal.value = false
};
const saveMessage = () => {
  if (audioURL.value) {
    props.form.voice = chunks.value[0];
    showModal.value = false
  }
};
</script>

Answer 1

[Stalker_RED]

Почему type: 'audio/webm'? В разных браузерах и разных операционнках кодек по умолчанию отличается.

Answer 2

[Aetae]

На второй вопрос вам ответил Stalker_RED, ответ же на первый вопрос:
потому что, даже после того как вы остановили MediaRecorder, сам аудио-поток(stream) у вас всё ещё захвачен и вы можете слушать его дальше.
Чтобы остановить поток - надо остановить все трэки в нём, примерно так:

function stopStream(stream) {
  stream.getTracks().forEach(
    (track) => track.readyState === 'live' && track.stop()
  );
}

P.S. К Vue вопрос отношения не имеет.