5

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

Abu Romaïssae
  • 3,841
  • 5
  • 37
  • 59

1 Answers1

4

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.

Community
  • 1
  • 1
Arnaud Leyder
  • 6,674
  • 5
  • 31
  • 43
  • Thanks for the clarification, I'll give it a try, but why it is not working in Safari? also can you please suggest me a fallback? one more thing, is that I am not able to change anything in the server side, as I play a stream that is not mine – Abu Romaïssae Apr 14 '14 at 13:10
  • it didn't work even after adding `type="audio/mpegURL"` on iOS and safari 7 – Abu Romaïssae Apr 14 '14 at 13:25
  • I have updated the answer with more info --- for iOS it is probably that MIME types are not rightly tuned on the server. It is clearly stated on Apple web site it should work if you have the server correctly set up with the MIME types – Arnaud Leyder Apr 14 '14 at 13:30
  • I've tried the parser thing, but I couldn't get the file from the server, something to do with the cross domains policy, perhaps I should talk to the owners of the m3u playlist – Abu Romaïssae Apr 14 '14 at 13:46
  • Yes you can try that. If you are parsing in JS you will need CORS - cross-origin resource sharing - to be enabled on the server where the m3u files are hosted: http://enable-cors.org/ – Arnaud Leyder Apr 14 '14 at 13:56
  • yeah, thanks for the support, I'll try that, just out of curiousness do you know if it is possible to hack it with PHP, I don't mean anything bad, just retransmit things using a php script – Abu Romaïssae Apr 14 '14 at 13:58
  • What you are referring to is having a PHP proxy to by-pass the CORS requirement. Have a look here: http://benalman.com/projects/php-simple-proxy/ – Arnaud Leyder Apr 14 '14 at 14:07
  • I'll have a look at it, I've already seen the website long time ago :) thanks for the help and support – Abu Romaïssae Apr 14 '14 at 14:13