Search code examples
mobile-safarimp3cloudflare-workers

MP3 file won't load on iOS Safari, works fine on MacOS / Chrome / Edge?


a little stuck on this one.

I am serving .mp3 files from a Cloudflare Worker, unzipping an archive and returning a buffer of the mp3 file. It works fine on Chrome, edge, and also Safari on MacOS and even within iOS simulator. However, fails to load on iOS Safari. Failed to Load Resource, Plugin Handled Load. I got the same error originally on MacOS Safari too before I changed the HTTP response code to 206. Here is the response section of my Cloudflare worker code.

    const mp3ArrayBuffer = await mp3ZipObject.async('arraybuffer');
    
    const total = mp3ArrayBuffer.byteLength;

    const start = 0;
    const end = total - 1;

    const contentRange = `bytes ${start}-${end}/${total}`;

    return new Response(mp3ArrayBuffer, {
        status: 206,
        headers: { 'Content-Type': 'audio/mpeg', 'Content-Range': contentRange, 'Content-Encoding': 'identity' },
    });
}

Here is a link to a mp3 file. MP3 File

and MP3 File 2


Solution

  • I notified Apple about this through their Beta Feedback program and it appears to have now been resolved in iOS 17.4. Unfortunately, they didn't provide a reply to my feedback as to exactly what they have changed.