reactjs - React - refs - 音频播放 - iOS 上未处理的拒绝(NotSupportedError)

Question

我构建了一个 React 应用程序，可以在桌面网络浏览器上播放/暂停当前选定的音频:

playPreview() {
    if (!this.state.isPlaying) {
      this.setState({ isPlaying: true });
      this.refs.audioRef.play();
    } else {
      this.setState({ isPlaying: false });
      this.refs.audioRef.pause();
    }
  }

在 iOS 移动浏览器(safari 和 chrome mobile)上，我收到未处理的拒绝(NotSupprted 错误):不支持该操作。

我知道在 iOS 上音频必须通过用户手势播放的问题，但我用 onClick 触发了我的方法:

{!props.isPlaying 
  ? (<MdPlayCircleOutline className="play-btn" onClick={() => 
    props.playPreview()} />) 
  : (<MdPauseCircleOutline className="play-btn" onClick={() => 
    props.playPreview()} />)
}

我在父应用程序组件中有一个隐藏元素:

<audio ref="audioRef" src={this.state.currentSongUrl} style={{ display: 'none' }} />

所以我假设它不起作用，因为 onClick 不是直接的音频元素？如果是这样的话，我知道如何结合这两个要求。

1 - 动态改变音频源2 - 交替播放和暂停

预先感谢任何见解和帮助!

-托德

Answer 1

发生这种情况可能是因为您使用了已弃用的 ref 语法。你应该尝试这样的事情:

<audio ref={(input) => {this.audioRef = input}} src={this.state.currentSongUrl} style={{ display: 'none' }} />

和

playPreview() {
  if (!this.state.isPlaying) {
    this.setState({ isPlaying: true });
    this.audioRef.play();
  } else {
    this.setState({ isPlaying: false });
    this.audioRef.pause();
  }
}

如需引用，请访问:Refs and the DOM