Search code examples
htmlaudiotwiliohtml5-audio

HTML5 Audio Tag Plays, but Controls Not Working as Expected

So, the audio tag works and plays audio fine, but the seek/navigation doesn't work. It doesn't travel with the audio and you can't seek/navigate through the player. This is what it looks like for a 1-minute and 23-second audio clip:

enter image description here

Also, when the player is done, the time/duration is off. I don't know how else to explain it. This is what it looks like after:

enter image description here

This is the code for the player:

<audio controls preload="auto">
    <source src="https://third.party.com/file.mp3" type="audio/mpeg">
</audio>

I've never really worked with the <audio> tag before, so maybe there are nuances I'm missing, but it seemed pretty straight-forward. Am I missing something?

Edit - More Details

I've added a JSFiddle. Also, this appears to happen with longer audio clips, so this may be bandwidth related. When a clip is a few seconds (< 10s) it seems to work fine most of the time.

Solution

  • I ran into this too. This is a Twilio mp3. It seems to be a problem with Twilio's mp3 file formats or the response headers. The mp3 is being recognized as a stream. This may also be intentional.

    A simple fix - Just switch to the wav version of the file. Use ".wav" as an extension (or leave it off and it defaults to wav).

    <audio controls preload="auto">
  <source src="https://api.twilio.com/<account>/Recordings/<recording>.wav">
</audio>

    Here's a JSFiddle