无法在 iOS 上通过 JavaScript 播放 HTML 音频元素

Question

以下代码是我构建的音频播放器组件的 sn-p。它在所有桌面浏览器（包括最新的 Safari）中都能完美运行，但在 iOS 8 和 9 上失败。我检查了 Safari 调试控制台（链接到 iOS 模拟器），没有错误或警告。 audio.play() 似乎什么也没做。我用谷歌搜索了很多，但运气不好。

如果我通过添加controls 属性使<audio> 可见，我可以在我的音频组件上点击播放，然后在<audio> 元素控件上播放，它可以工作。在那之后，我的音频组件的控件（播放、停止、暂停、搜索）都可以正常工作。有一些关于它被 JavaScript 告知播放失败的问题。

此外，canplaythrough 音频事件永远不会触发。这通常在将audio.src设置为有效的音频文件后触发，并且有机会缓冲。

componentWillReceiveProps(newProps) {
  const audio = this.refs.audio;
  const {command, url, seekTo} = newProps.audioPlayerData;

  switch (command) {
    case 'play':
      if (audio.src !== url) {
        // Doesn't match the URL we're currently streaming
        audio.pause();
        audio.src = url;
        audio.play();
      } else {
        // This track is being played after having been paused
        audio.play();
      }

      break;

    case 'pause':
      audio.pause();
      break;

    case 'stop':
      audio.pause();
      audio.src = '';
      break;

    case 'seek':
      audio.currentTime = seekTo;
      break;
  }
},

render() {
  return <div>
    <audio ref="audio" src="" />
  </div>
}

Answer 1

我记得几年前遇到过同样的问题，还记得这不是错误，而是 iOS 浏览器特意指定的问题。根据 Safari 浏览器的规范，不可能有一些自动播放的东西。您只能提供一个播放按钮，以便用户选择播放。

这是因为他们可能使用数据套餐并为下载音乐而付费。我在source 中找到了这个。

在您的情况下，使用 Flux 触发 JS 函数 play() 会导致 iOS 认为这不是用户触发的操作，而是以编程方式发生的事情（根据他们自己的规范，这是不允许的）。取出 Flux 逻辑并使用用户手势触发播放，将解决此问题。我猜，iOS 还没有为 React 的思维方式做好准备:)