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录制的音频）。

问题：这是可能的还是唯一的选择是停止录音机然后获取录音部分（代码中的“块”）？

注意：对我来说，是/否回答是绰绰有余的。感谢。

代码说明：

运行代码时，您的浏览器会要求您获得访问麦克风的权限：

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

我想要的是仅在录制（按下开始按钮），，然后将录制的部分转换为流时听到录制的声部。

我在寻找什么：

Answer 1

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

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

和

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

然后，只能在录制过程中听到麦克风发出的声音。

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

OTOH，如果您尝试播放已录制的内容，请参阅my answer to another question。

Answer 2

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

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

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

2 个答案: