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

Question

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

如果我做<audio>通过添加controls可见属性，我可以在我的音频组件上点击播放，然后在 <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 的思维方式:)