MediaRecorder - можно ли одновременно записывать и воспроизводить? - PullRequest
0 голосов
/ 05 мая 2018

Я пытаюсь создать простой аудио-рекордер, который записывает и воспроизводит голос пользователя одновременно (синхронно), используя WebRTC и MediaRecorder. Итак, вот что я сделал до сих пор:

Полный HTML-код

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Audio Recorder</title>
    <style>
        audio{
            display: block;
        }
    </style>
</head>
<body>
    <audio id="audio" controls autoplay></audio>
    <button type="button" onclick="mediaRecorder.start(1000)">Start</button>
    <button type="button" onclick="mediaRecorder.stop()">Stop</button>


    <script type="text/javascript">
        var mediaRecorder = null,
            chunks = [],
            audio = document.getElementById('audio');

        function onSuccess( stream ) {

            mediaRecorder = new MediaRecorder( stream );

            audio.srcObject  = stream ;


            mediaRecorder.ondataavailable = function( event ) {
                chunks.push( event.data );
            }
        }

        var onError = function(err) {
            console.log('Error: ' + err);
        }

        navigator.mediaDevices.getUserMedia({ audio: true }).then(onSuccess, onError);
    </script>
</body>
</html>

Проблема с этим кодом заключается в том, что он воспроизводит весь поток, и мне нужна только записанная часть (звук, записанный MediaRecorder).

Вопрос: Возможно ли это, или единственный вариант - остановить рекордер и затем получить записанную часть («куски» в коде)?

Примечание: Ответа да / нет будет более чем достаточно для меня. Спасибо.

Объяснение кода:

Когда вы запускаете код, ваш браузер запрашивает разрешение на доступ к вашему микрофону:

enter image description here

В случае, если вы нажмете «разрешить», вы услышите свой голос, даже если вы не нажали кнопку «Пуск», и это потому, что источником аудиоэлемента является весь поток.

enter image description here

enter image description here

Мне нужно только услышать записанную партию, при записи (нажав кнопку пуска), другими словами, преобразовать записанную партию в поток .

Что я ищу:

enter image description here

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Ответ отрицательный. Использование stream в качестве audio.srcObject не обеспечивает необходимой гибкости для ограничения audio.duration . Вы должны использовать Blob кусков, чтобы достичь этого.

MediaRecorder работает в чанках (даже если вы не установили длительность чанка в mediaRecorder.start () , следовательно, нет способа надежно создать аудио точной продолжительности.

0 голосов
/ 08 мая 2018

Просто удалите autoplay из вашего аудиоэлемента и сделайте

mediaRecorder.start(1000);
audio.play();

и

mediaRecorder.stop();
audio.pause();

Тогда звук с микрофона будет слышен только во время записи.

Вам не нужно преобразовывать записанную часть в поток. Если бы вы это сделали, это просто привело бы к задержке.

OTOH, если вы пытаетесь воспроизвести то, что уже записали, см. мой ответ на другой вопрос .

...