HTML5 音频元素不会在 IOS 11 设备上的 safari 中播放 mp3 直播答案

【问题标题】：HTML 5 AudioElement won't play mp3 Livestreams in safari on IOS 11 devicesHTML5 音频元素不会在 IOS 11 设备上的 safari 中播放 mp3 直播
【发布时间】：2018-03-11 05:02:54
【问题描述】：

我是一家电台的网络开发人员。自 IOS 11 发布以来，我们收到了一些用户投诉，称我们的音频直播流无法再在 IOS 11 设备上播放。为了在我们的网站中嵌入流，我们使用 HTML5 AudioElement。在使用 IOS 11 的 iPhone 上调试 javascript 时，我们认识到调用音频元素 play() 方法会导致 MediaError 错误代码 4 (MEDIA_ERR_SRC_NOT_SUPPORTED)。所有其他设备（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 之一。

运行 IOS 10 及更低版本的设备可以毫无问题地播放流，以及当前的 android 或 windows 设备。但是，运行 IOS 11.0.1 的设备无法播放该流。我找不到任何关于为什么这不再可能的信息。有没有人知道为什么我们的流不再工作，并且可以给我们建议，我们可以做些什么来让它们再次工作？

【问题讨论】：

标签： javascript html mobile-safari html5-audio ios11

【解决方案1】：

此问题归结为 Apple WebKit 在最新 iOS 版本中的更改。对于运行 KH Icecast 的用户，预计很快就会修复（希望如此！）https://github.com/karlheyes/icecast-kh/issues/172

【讨论】：

【解决方案2】：

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

<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 引擎？！）

【讨论】：

【解决方案3】：

在尝试将带有音频控件的本地 HTML 文件加载到 UIWebView 时，我看到了同样的问题。但是，我的文件是一个 .m4a 音频文件。我发现只需删除 type 就可以了。所以我的 HTML 看起来像这样：

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

使用type=audio/mp4 也对我有用。所以我猜它是一个不兼容的 mime 类型，只是删除类型是最好的选择。

希望这会有所帮助。

【讨论】：