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

问题

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?

回答1:

This issue is down to Apple WebKit changing in the latest iOS release. For users running KH Icecast a fix can be expected soon (hopefully!) https://github.com/karlheyes/icecast-kh/issues/172

回答2:

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?!)

回答3:

I saw this same issue when trying to load a local HTML file with audio controls into a UIWebView. However, my file was an .m4a audio file. I found that just removing type did the trick. So my HTML looked like this:

<div class="audio"><audio controls><source src="my_local_audio_file.m4a"></audio></div>

Using type=audio/mp4 also worked for me. So I'm guessing it's an incompatible mime type and just removing the type would be the best option.

Hope this helps.

来源：https://stackoverflow.com/questions/46486307/html-5-audioelement-wont-play-mp3-livestreams-in-safari-on-ios-11-devices