IOS html 5 audio repeats and skips

Question

I have a site where I post my own audio. I am using the standard html 5 audio tag. It works fine on all platforms except IOS.

When playing in IOS (unless it's a short song under 2/3 minutes) it will stop after a portion of the song, and start replaying from the beginning. Each time it restarts, is is a shorter duration. I don't want it to repeat at all, it is not supposed to. The audio is standard mp3

How do I just get it to play through the whole song and stop?

Example:

http://player.compdj.com/Track/Play/rick-oshea-pour-some-sugar-on-me

Here is my code

       <audio id="player-rick-oshea-pour-some-sugar-on-me" class="HTML5AudioPlayer" preload="auto" width="480" controls data-controls-time="true" onplay="void(0);" data-controls-duration="true" data-controls-volume="true">
            <source src="/Upload/Stream/rick-oshea-pour-some-sugar-on-me" type="audio/mp3" />
        </audio>

Answer 1

First, audio/mp3 isn't a valid MIME type. You need to use audio/mpeg instead. Secondly, your server needs to support byte range requests for Safari and iOS support. See here for more information on the subject.

Example Request:

GET /Upload/Stream/rick-oshea-pour-some-sugar-on-me HTTP/1.1
Range: bytes=5210604-5275910

Expected Response:

HTTP/1.1 206 Partial Content
Accept-Ranges: bytes
Content-length: 65307
Content-Range: bytes 5210604-5275910/5275911
Content-Type: audio/mpeg

Answer 2

I know this is old, but if you searched for this recently and can't implement this fix like me, this is what I had to do. I moved all my mp3 files to azure blob storage and it works. I use an azure cdn url to access the files but I don't think that is required.