Is it possible to apply .m3u in Safari loaded as data URL

user_325987 0
Viewed 592

So basically I have a snippet which I mean to load a .m3u playlist into the audio element. The playlist is encoded as base64, loaded with data URI. However, it does not work.

<audio autostart="true" loop="false">
    <source type="audio/mpegURL"
            src="data:text/plain;base64,aHR0cDovL3ZpZXRjaHJpc3RpYW4uY29tL2F1L3RjLzAwMS5tcDMNCmh0dHA6Ly92aWV0Y2hyaXN0aWFuLmNvbS9hdS90Yy8wMDIubXAz">
</audio>

However, loading the same playlist with the traditional URL /playlist.m3u works in iOS. It does not work in Chrome, which is fine by me now.

<audio autostart="true" loop="false">
    <source type="audio/mpegURL"
            src="/playlist.m3u">
</audio>

The content of playlist.m3u:

http://vietchristian.com/au/tc/001.mp3
http://vietchristian.com/au/tc/002.mp3

The questions are:

  • Is it possible to apply .m3u in Safari loaded as data URL
  • Bonus: How can I achieve this in Chrome also?
google-chrome audio html ios
1 Answers

I think the problem is in the MIME type of the data URL:

src="data:text/plain;base64,aHR0cDovL3ZpZXRjaHJp....

It should be data:application/x-mpegurl;base64,aHR..., but I have also noticed that on Apple devices the type needs to be another, resulting in data:application/vnd.apple.mpegurl;base64,aHR...

user_2704200
Related