Play each audio chunk separately in dataavailable event of MediaRecorder

Question

I'm trying out the MediaRecorder API. I want to play each individual audio chunk captured in the dataavailable event callback of a MediaRecorder instance. There is this strange problem I'm facing and that is that it only plays the first captured audio chuck and the forthcoming chunks are never played. I can't understand the reason.

Here is my code:

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');
        });
    });

Any help in this regard will be highly appreciated. Thanks!