MediaRecorder - 是否可以同时录制和播放？

Question

我正在尝试构建一个简单的录音机，使用 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 录制的音频）。

问题：这是否可能或唯一的选择是停止录音机然后获取录制的部分（代码中的 'chunks'）？

Note: A yes/no answer would be more than enough for me. Thanks.

代码解释：

当您运行代码时，您的浏览器会询问您是否允许访问您的麦克风：

如果你点击允许，即使你没有点击开始按钮，你也会听到你的声音，这是因为音频元素的源设置为整个流。

我想要的是只听到录制的部分，在录制时（按下开始按钮），换句话说，将录制的部分转换为流。

我在找什么：

Answer 1

只需从您的音频元素中删除 autoplay，然后执行

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

和

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

然后麦克风的音频将仅在录制期间听到。

您不需要将录制的部分转换为流。如果这样做，只会引入延迟。

OTOH，如果您想回放已经录制的内容，请参阅。

Answer 2

答案是否定的。使用 stream 作为 audio.srcObject 不提供限制 audio.duration[=19= 的必要灵活性].您必须使用 Blob 块来实现此目的。

MediaRecorder 以块的形式工作（即使您没有在 mediaRecorder.start() 中设置块持续时间，因此无法可靠地生成音频确切的持续时间。

MediaRecorder - 是否可以同时录制和播放？

MediaRecorder - Is it possible to record and play at the same time?

javascript

html5-audio

webrtc