HTML5 audio tag cannot play audio file in ios chrome and safari

Question

I'm struggling to get simple audio playback. I've got a list of tracks, each at unique url's that I would like to play when a user presses the associated play button. I've attempted soundmanager2 and jplayer but couldn't get it to work for my use case (desktop browser and ios). I have fallen back to straight up html5 with the code as follows

<audio controls>
      <source src="/path/to/file" type="audio/wav">
    Your browser does not support the audio element.
</audio>

This works perfectly in desktop chrome and desktop safari. In ios chrome and ios safari (latest) the player isn't presented, but instead a message within a grey box saying "Cannot play audio file" is presented.

Am I using this tag correctly? How can I overcome these errors?

Update 1

I am sending the wav file from google appengine (as a blob). I have found that safari cannot play unless I add .wav to the end of the src - despite the src just being an indirect link to the file. The actual file returned does end in .wav but Safari isn't smart enough to recognise this.

Update 2

The following works in all browsers (mentioned above) - so it is not specific to wav files.

<audio controls preload="metadata">
      <source src="http://www-mmsp.ece.mcgill.ca/Documents/AudioFormats/WAVE/Samples/AFsp/M1F1-Alaw-AFsp.wav" type="audio/wav">
    Your browser does not support the audio element.
</audio>

I've sent the file from google app engine as both a MIME attachment and a raw response but it makes no difference.

Update 3

I've swapped in a longer wav file (http://www.villagegeek.com/downloads/webwavs/ever_again.wav) and this too is unable to play (on ios). It isn't clear if it's because of the length, size or some other variable.

Update 4

I've ruled out size being the issue because this 24s wav file works

<audio controls preload="auto">
      <source src="http://www.dailywav.com/sites/default/files/wavs/dontlikelaughing.wav" type="audio/wav">
    Your browser does not support the audio element.
</audio>

Update 5

So I'm serving the file from a google cloud storage bucket. When saving the file I'm not specifying the MIME type and as a result it is being returned as binary/octet-stream. The desktop browsers are smart enough to overcome this, but the mobile browsers are not.

user714852 user714852 · Accepted Answer · 2014-05-10T21:58:20

So I'm serving the file from a google cloud storage bucket. When saving the file I'm not specifying the MIME type and as a result it is being returned as binary/octet-stream. The desktop browsers are smart enough to overcome this, but the mobile browsers are not. The answer to the above question is therefore to set the MIME type for the relevant file upon writing to GCS.