Web Audio API Delayed Buffer Playback

this is my first interaction in this portal. I have learnt that this portal is made by developers and for developers.

I have a very peculiar problem which I was trying to solve since last 1 month. But unfortunately, I couldn’t find the exact solution.
The problem is,
I have a music streaming website from which users will listen songs online. I don’t have a web music player for my website yet, so was developing one.

Recently I implemented Web Audio API into my website for streaming. Which works very well but it does not start playing the stream buffer immediately when it receives from server.

I am handling the requests dynamically at server which does not provide the direct link to the resource, whereas I am reading the file in php and streaming for example readfile() or fopen() and fread() etc.

I am receiving the content very well but problem is the api does not start playing the buffer immediately but it plays the stream when the whole content is received.

If the song is 5mb, audio api buffers all 5mb and later on starts to play. I want it to play immediately after some stream received.

My javascript is as below

if(a.status==true&&b=='success'){
                (processView.audioCtx)?processView.audioCtx.close():'';
                processView.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                processView.songSrc = processView.audioCtx.createBufferSource();
                var request = new XMLHttpRequest();
                request.open('GET', processView.playSong.mp3, true);
                request.responseType = 'arraybuffer';
                request.onload = function(a) {
                    var audioData = request.response;
                    processView.audioCtx.decodeAudioData(audioData, function(buffer) {
                        processView.songSrc.buffer = buffer;
                        //processView.songbuffer = processView.songSrc.buffer;
                        processView.songSrc.connect(processView.audioCtx.destination);
                        processView.songSrc.loop = true;
                        processView.songSrc.start(0);
                        $('#togglePlayerBtn').attr('state','playing').html('<span class="fa fa-pause"></span>').css('background','transparent');
                        //processView.audioCtx.onstatechange = processView.handlePlayer();
                    },
                    function(e){ console.log("Error with decoding audio data" + e.err); });
                }
                request.send();

My php file at server side is as below

$mime_type = "audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3";
        if(file_exists($path)){
            header('Content-type: {$mime_type}');
            header('Content-length: ' . filesize($path));
            header('Content-Disposition: filename="' . $fileName);
            header('X-Pad: avoid browser bug');
            header('Cache-Control: no-cache');
            readfile($path);
            exit;
        }
        else
        {
            header('Error: Unknown Source',true,401);
            echo 'File not found !';
        }

I am really thankful to this portal where I could get the solutions to my problems.

Thank You,
— HKSM