Question

以下代码是我构建的音频播放器组件的片段。它适用于所有桌面浏览器（包括最新的Safari），但在iOS 8和9上失败。我检查了Safari调试控制台（链接到iOS模拟器）并且没有错误或警告。 audio.play()似乎没有做任何事情。我已经搜索了很多，没有运气。

如果我通过添加<audio>属性使controls可见，我可以点击我的音频组件播放，然后在<audio>元素控件上播放，它可以正常工作。在那之后，我的音频组件＆＃39;控制（播放，停止，暂停，搜寻）都完美无缺。有一些关于被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

我记得几年前遇到同样的问题，并且还记得这不是一个bug，而是iOS浏览器故意指定的内容。根据规范，在Safari浏览器中无法进行自动播放。您只能提供播放按钮，以便用户可以选择播放。

这是因为他们可能正在制定数据计划并因下载音乐而收取费用。我在source中找到了这个。

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

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

1 个答案: