将Web音频上下文事件绑定回以响应组件

时间:2018-10-26 22:32:02

标签: reactjs web-audio

我正在使用Web Audio API在响应中构建一个小型音频播放器。

我有一个播放按钮,根据内容是播放还是停止显示不同的样式。

但是我不确定如何将音频上下文的事件绑定回组件,以便我可以设置按钮的状态。

 play = () => {
     if(audioCtx.state === 'running' && this.state.started) {
      audioCtx.suspend().then(function() {

        //HERE IS WHERE I WANT TO SET STATE buttonOn
       //but the "this" is not recognized

      });
    } else if(audioCtx.state === 'suspended') {
      audioCtx.resume().then(function() {
        this.setState({buttonOn = true});  <== "this" not recognized
      });
    } else {
      this.playNext(0);
      this.setState({started: true});
      buttonOn = true;
    }
  }

如何从这些事件中返回组件的“ this”?

1 个答案:

答案 0 :(得分:0)

认为此方法在您的类组件中。

将回调函数更改为箭头函数

 play = () => {
     if(audioCtx.state === 'running' && this.state.started) {
      audioCtx.suspend().then(() => {

      });
    } else if(audioCtx.state === 'suspended') {
      audioCtx.resume().then(() => {
        this.setState({buttonOn: true});
      });
    } else {
      this.playNext(0);
      this.setState({started: true});
      buttonOn = true;
    }
  }