HTML5 audio streaming from PHP with the content length header causes an error: Failed to load resource: The network connection was lost on IOS

Question

For some reason when streaming an audio file from PHP with the content length header set the IOS devices give me an error on the console: Failed to load resource: The network connection was lost.

I've tried different solution but nothing seems to work, everything works fine on other devices...

The content length header must be set in order for Howler JS library to provide duration and seek information. I've been battling with it for a long time now.

The file must be served from php and an alternative media server cant be used. Any ideas?

Here's my php:

$random_filename = 'gi-' . uniqid();
$audio_size = filesize($audio_path);

header('Content-Description: File Transfer');
header('Content-Type: ' . $audio_post->post_mime_type);
header('Content-Disposition: attachment; filename=' . $random_filename . '.' . pathinfo($audio_path, PATHINFO_EXTENSION));
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Accept-Ranges: bytes');
header('Content-Length: ' . $audio_size);

$handle = fopen($audio_path, 'rb');

while (!feof($handle)) {
    echo fread($handle, 1024 * 8); // Adjust the chunk size as needed
    ob_flush();
    flush();
}

fclose($handle);

And here's the js

player[id] = new Howl({
                src: [gi.ajaxurl+'?nonce='+gi.nonce+'&action=gi_audio&id='+id],
                format: [type],
                preload: true,
                html5: true,
                onpause: function(){
                    $(this).parent().removeClass('playing').addClass('paused');
                    $('.pause').parent().find('.pause').hide();
                    $('.pause').parent().find('.play').show();
                },
                onloaderror: function(id,error){
                    console.log([id,error]);
                }
            });

            currentPlayer = player[id];

            player[id].on('load', function(){

                if($('.player-sm .length')) {
                    $('.player-sm .length').text(secondsToTime(this.duration()));
                }

                if(sessionStorage.getItem('saved-seconds-'+window.location.href)){
                    const width = (sessionStorage.getItem('saved-seconds-'+window.location.href) / currentPlayer.duration()) * 100;
                    currentPlayer.seek(sessionStorage.getItem('saved-seconds-'+window.location.href));
                    $('.player-sm .duration .position').css('width', width+'%');
                    $('.player-sm .time').text(secondsToTime(sessionStorage.getItem('saved-seconds-'+window.location.href)));
                }

            });

It only happens when the HTML5 option is enabled on howler. I've already look through a bunch of stackoverflow posts and no solution yet, i've seen something about an SSL encrypt issue causing this and also server configuration. I'm using apache as my server, is there some configuration that i'm missing?