我构建了一个 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 - 交替播放和暂停
预先感谢任何见解和帮助!
-托德
最佳答案
发生这种情况可能是因为您使用了已弃用的 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
关于reactjs - React - refs - 音频播放 - iOS 上未处理的拒绝(NotSupportedError),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48748063/