Playing m3u playlist with html5

Question

I've created a very simple and basic html5 audio player, actually not more than:

<audio src="[url-to-m3u]" controls>

but I am facing two problems, this simple audio tag is working on Chrome, but not in Safari 7 the second is that it is not working on my iPhone iOS7, nor HTC Android 2.3

---

the playlist elements are mp3 with Content Type: audio/mpeg

Answer 1

I guess the support for m3u file format is going to be scattered in HTML5 media compatible browser.

It should play on iOS: try to add mime-type audio/mpegURL or application/x-mpegURL to your server (if not already done) AND our source tag.

<audio controls>
    <source src="[url-to-m3u]" type="audio/mpegURL" />
</audio>

You need to check for browser support both for mp3 and m3u with the canPlayType method - example:

var supportsMp3 = false;
var myAudio = document.createElement('audio');
if (myAudio.canPlayType('audio/mpeg') !== ""){supportsMp3 = true;}

You need to check for audio/mpegURL and application/x-mpegURL and audio/mpeg before going ahead and deliver the m3u file. I would suggest you use a fallback for your case scenario as not all browsers are going to support m3u files.

For example m3u file does not appear in the supported media matrix for Android.

EDIT: you can use JW player that supports m3u files for wider browser coverage. Otherwise try to find an open source/free flash player as a fallback.

Also your m3u file can be parsed using JS to extract the mp3 URLs (m3u files are normally only referencing playlist of items). After that it is just dynamic changing of the src of the audio tag with the correct mp3 URL.