在MediaRecorder的dataavailable事件中分别播放每个音频块

Question

我正在尝试MediaRecorder API。我想播放在MediaRecorder实例的 dataavailable 事件回调中捕获的每个音频块。我面临着一个奇怪的问题，那就是它只会播放第一个捕获的音频卡盘，而永远不会播放即将到来的块。我不明白原因。

这是我的代码：

navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {

        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start(3000);

        mediaRecorder.addEventListener("dataavailable", event => {
            var audioBlob = new Blob([event.data]);
            var audioUrl = URL.createObjectURL(audioBlob);
            var audio = new Audio();
            audio.autoplay = true;
            audio.src = audioUrl;
        });

        mediaRecorder.addEventListener("stop", () => {
            console.log('stop');
        });
    });

在这方面的任何帮助将不胜感激。谢谢！