用于播放和暂停的可触摸不透明度

Question

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

我正在使用来自 Firebase 服务器的音频和 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>

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

我是 react-native 的新手。提前致谢。

Answer 1

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

在您的构造函数中或您有权访问 item.sound 的地方，实例化声音：

this.sound = new Sound(item.sound)

您的 onPress 回调应该如下所示：

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

Answer 2

试试这个：

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>

用于播放和暂停的可触摸不透明度

One Touchable Opacity for Play and Pause

javascript

react-native

react-native-sound