Web Audio API delay in playback when using socket.io to receive ArrayBuffer from server

Question

Let me start with the fact that I am fairly new to the web-development game and have hardly used socket.io for over a week or two. I attempted playing audio from the ArrayBuffer received from socket.io corresponding to an MP3 file transfer using Web Audio API. The ArrayBuffer gets successfully decoded by WebAudio but the only issue I am having is that it takes about 10 seconds after receiving the initial chunk of the ArrayBuffer to start playing this song.

My understanding is that it waits for the entire file to get streamed and then starts the playback ?? Is there a better way of playing the track as soon as the first set of chunks arrive ?

This is how I am using it currently :

socket.on('browser:buffer', function(data) {
            console.log(data.buffer);
            source = audioContext.createBufferSource();
            audioContext.decodeAudioData(data.buffer, function(decodedData) {
                source.buffer = decodedData;
                source.connect(audioContext.destination);
                source.loop = true;
                source.connect(audioContext.destination);
                source.start(0);
            });
        }, function(error) {
            console.error("decodeAudioData error", error);
        });

Answer 1

Yes, you can you the <audio> and the createMediaElementSource(audio). This has benefits of self-dealing with the downloading :)

var audio = new Audio("shoot.mp3");
var context = new AudioContext();
var source = context.createMediaElementSource(audio);
audio.loop = true;
source.connect(context.destination);
audio.play();

https://jsfiddle.net/u8j4h4L4/1/

Other option is just the simplest if you actually don't need WebAudio:

var sound = new Audio("myaudio.mp3");
sound.play()