javascript - 一种用于播放和暂停的可触摸不透明度

Question

我想使用一个 TouchableOpacity 来播放和暂停。

我正在使用 Firebase Server 中的音频和 react-native-sound 来播放和暂停音频。这是我的代码：

constructor(props) {
    super(props)
    this.state = {
        isPlaying: true
    }
}
<TouchableOpacity
    onPress= {() => { 
        const { isPlaying } = this.state;
        var sound = new Sound(`${item.sound}`, null, (error)=> {
            if (isPlaying == false) {
                sound.play();
                this.setState({isPlaying:!isPlaying})
                console.warn("Played");

            } else if(isPlaying == true){
                sound.pause();
                this.setState({isPlaying:!isPlaying})
                console.warn("Paused");
            }
        })
    }
}
key={i}>Play</TouchableOpacity>

我可以播放声音但不能暂停。

我是反应原生的新手。提前致谢。

Answer 1

尝试这个：

constructor(props) {
  super(props);
  this.state = {
    isPlaying: false
  }
  this.sound = new Sound();
}

startPlaying = () => {
  this.sound.play();
  this.setState({ isPlaying: true });
  console.warn("Now playing");
}

stopPlaying = () => {
  this.sound.pause();
  this.setState({ isPlaying: false })
  console.warn("Now paused");
}

onPlay(item) {
  const { isPlaying } = this.state;
  if(!isPlaying) {
    this.sound = new Sound(`${item.sound}`, null, this.startPlaying);
  } else {
    this.stopPlaying();
  }
}

<TouchableOpacity
   onPress={() => this.onPlay(item)}
   key={I}
>
   Play
</TouchableOpacity>

Answer 2

问题是您Sound在每个 Press 上创建新实例，因此当您调用时，sound.pause()您是在另一个Sound实例上调用它。

在您的构造函数或您可以访问的地方item.sound，实例化 Sound：

this.sound = new Sound(item.sound)

您的 onPress 回调应如下所示：

    onPress= {() => {
     if(isPlaying) {
      this.sound.pause()
     } else {
      this.sound.play() 
    }
  }}