HTML5 AudioElement 在IOS 11设备的Safari浏览器上无法播放mp3直播流

Question

我是一名广播公司的Web开发者。自IOS 11发布以来，我们收到了几个用户的投诉，称我们的音频直播流在IOS 11设备上无法播放。为了嵌入网站中的流，我们使用HTML5 AudioElement。当在IOS 11的iPhone上调试javascript时，我们发现调用音频元素的play()方法会导致一个错误码为4（MEDIA_ERR_SRC_NOT_SUPPORTED）的MediaError。所有其他设备（Android、Windows和IOS 10及以下版本）都可以毫无问题地播放流。 我创建了一个小的codepen示例。

    <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 是一个通过AudioTag创建AudioElement并将其中一个流媒体URL指定给source标签的示例。

在iOS 10及以下版本以及当前的Android或Windows设备上，可以播放这些流媒体。然而，在运行iOS 11.0.1的设备上，无法播放这些流媒体。我找不到任何关于为什么不能再次播放它们的信息。是否有人知道我们的流媒体为什么无法再次工作，并能给我们建议以使其重新工作？

- ampersand83

Answer 1

像这样添加一个简单的音频控件

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

这个不起作用。

而这个可以：

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

我能发现的唯一区别是，在MP3上失败，而M3U播放列表可以正常工作。 在iOS 10及以下版本以及当前macOS Safari上，两者都可以正常工作。 另外，iOS 11上的Chrome失败（同样是Webkit引擎？！）

- Daniel

Answer 2

这个问题是由于最新的iOS版本中Apple WebKit的更改所致。对于运行KH Icecast的用户，很快就可以期待修复（希望如此！）https://github.com/karlheyes/icecast-kh/issues/172

- DaneStreeter

Answer 3

当我尝试在UIWebView中加载一个带有音频控件的本地HTML文件时，我遇到了同样的问题。然而，我的文件是一个.m4a音频文件。我发现只需要移除type即可解决问题。所以我的HTML代码看起来像这样：

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

我使用了type=audio/mp4，这也对我起作用了。所以我猜测这是一种不兼容的MIME类型，只需移除type将是最佳选择。

希望这可以帮助到你。

- FromTheStix