反应-参考-音频播放-iOS上的未处理拒绝(NotSupportedError) [英] React - refs - audio playback - Unhandled Rejection (NotSupportedError) on iOS

问题描述

我构建了一个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移动版)上，我收到未处理的拒绝(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();
  }
}

作为参考，请访问:参考和DOM

I built a react app that plays/pauses the currently selected audio just fine on desktop web browser:

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

On iOS mobile browsers (safari and chrome mobile) I get an unhandled rejection (NotSupprted Error): The operation is not supported.

I'm aware of the issue that on iOS the audio must play from a user's gesture but I'm firing off my method with an onClick:

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

I have an hidden element in the parent app component:

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

So I'm assuming that it doesn't work because the onClick isn't directly audio element? If that's the case I'm sure how to combine these two requirements.

1 - Dynamically changing audio source 2 - Alternate playback and pause

Thanks in advance to any insight and help!

-Todd

解决方案

This might be happening because you are using deprecated syntax for ref. You should try something like this:

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

and

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

For reference, visit: Refs and the DOM

这篇关于反应-参考-音频播放-iOS上的未处理拒绝(NotSupportedError)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！