HowlerJS: Audio skipping back on itself on Safari and iOS devices

Question

I am developing a web player of sorts, I'm using the php framework Laravel to handle the data of the playlist. I create an array of the playlist with all the necessary information. With this array I make a howl instance of the playlist object when it needs to be played.

This works fluidly on Firefox & Chrome, both on desktop as on mobile. However I'm encountering issues when testing on Safari or iOS browsers.

What happens: The audio plays normally however at around 1-2 minutes into the song it loops back on itself to about 20-45secs ago. This creates a really annoying song where it's just repeating the same part of the song until it ends. Which it does. Because despite this looping back the app still continues ticking up the seconds of the song. (sound.seek() keeps ticking up.)

Looking at the network tab I've noticed something odd, whereas the other browsers only fetch the audio source once, Safari does this multiple times. This is about the only tangible change I've noticed.

Since I don't have 10 rep image goes here: https://i.sstatic.net/N8xjG.jpg

What the oddest part is that a locally hosted version doesn't have issues either. So is this a webserver issue? Browser? I'm at a loss.

The onloaderror and onplayerror events also don't fire either, so no issues there as far as I know.

Instancing the howl:

sound = data.howl = new Howl({
                src: ['./get-audio' + data.file],
                html5: true, 
//After this I instance all onX functions (onplay, onend, etc)

...

sound.play()

Then whenever I need the next song I unload this howl instance and create the next one. Most of my code is adjusted from the HowlerJS example of their 'player' in case you'd like to delve deeper in the code itself.

How the audio gets served:

    public function getAudio($map, $name)
    {
        $fileName = $map.'/'.$name;
        $file = Storage::disk('local')->get($fileName);
        $filesize = Storage::disk('local')->size($fileName);
        $size   = $filesize;
        $length = $size;
        $start  = 0;
        $end    = $size - 1;

        return response($file)
            ->withHeaders([
                'Accept-Ranges' => "bytes",
                'Accept-Encoding' => "gzip, deflate",
                'Pragma' => 'public',
                'Expires' => '0',
                'Cache-Control' => 'must-revalidate',
                'Content-Transfer-Encoding' => 'binary',
                'Content-Disposition' => ' inline; filename='.$name,
                'Content-Length' => $filesize,
                'Content-Type' => "audio/mpeg",
                'Connection' => "Keep-Alive",
                'Content-Range' => 'bytes 0-'.$end .'/'.$size,
                'X-Pad' => 'avoid browser bug',
                'Etag' => $name,
            ]);
    }

So I'm not sure why Safari/iOS has an issue with the hosted version whilst locally it does work.

This is my first question on this site, so if you'd like some more information let me know.

Answer 1

I found out the issue.

Namely Safari thought I was serving an audio stream rather than just an mp3 file, causing it to continuously send requests. I solved this by serving my audio like this:

$path = storage_path().DIRECTORY_SEPARATOR."app".DIRECTORY_SEPARATOR."songs".DIRECTORY_SEPARATOR.$name;
$response = new BinaryFileResponse($path);
BinaryFileResponse::trustXSendfileTypeHeader();
return $response;