HTML 5 AudioElement won't play mp3 Livestreams in safari on IOS 11 devices

user_8694659 0
Viewed 4159

I'm a web developer at a radio broadcaster. Since the release of IOS 11, we received several user complaints that our audio live streams can't be played on IOS 11 devices anymore. To embed the streams in our websites we use the HTML5 AudioElement. When debugging the javascript on an iPhone whit IOS 11 we recognized that calling the audio elements play() method resulted in a MediaError of ErrorCode 4 (MEDIA_ERR_SRC_NOT_SUPPORTED). All other devices (Android, Windows and IOS 10 and below) play the streams without any problem. I created a little codepen example 

    <audio controls>
      <source src="http://hr-hrinfo-
      live.cast.addradio.de/hr/hrinfo/live/mp3/128/stream.mp3" 
      type="audio/mpeg;codecs="mp3"">
      Your browser does not support the audio element.
    </audio>

https://codepen.io/ampersand83/pen/pWwgKm in which I just create an AudioElement via the AudioTag and hand the source Tag one of our stream URLs.

Devices running IOS 10 and below play the streams without any problem as well as current android or windows devices. However, a device running IOS 11.0.1 can't play the stream. I can't find any information on why this wouldn't be possible anymore. Does anybody have an idea why our streams won't work anymore and can give us advice on what we can do to make them work again?

ios11 html5-audio mobile-safari html javascript
3 Answers
user_87102440

Adding a simple audio control like this

<audio controls>
  <source src="https://swr-swr3-live.sslcast.addradio.de/swr/swr3/live/mp3/128/stream.mp3" type="audio/mpeg;codecs="mp3"">
</audio>

…does not play.

While this one does:

<audio controls>
  <source src="http://mp3-live.swr3.de/swr3_m.m3u">
</audio>

The only difference I can spot is that on an MP3 it fails while a M3U playlist works. On iOS 10 and below as well as on current macOS Safari, it works both. Also Chrome on iOS 11 fails (same Webkit engine?!)

user_87157520
Related