停止反应组件中的声音

时间:2018-11-05 21:00:27

标签: javascript reactjs html5-audio

我的应用程序正在播放一些音频,具体取决于各种触发器。我希望用户在决定声音时能够停止声音。

这是我根据post所做的事情:

  audioPlayer(sound){
      const audioGetReady = new Audio("...mp3")
      const audioTenSec = new Audio("...mp3");
      const audioNext = new AudioAudio("...mp3");
      const audioRest = new AudioAudio("...mp3")
      const audioCongrats = new AudioAudio("...mp3")

      if(sound == 'getReady'){
        audioGetReady.play()
      }
      if(sound == 'tenSeconds'){
        audioTenSec.play()
      }
      if(sound == 'next'){
        audioNext.play()
      }
      if(sound == 'rest'){
        audioRest.play()
      }
      if(sound == 'congrats'){
        audioCongrats.play()
      }
      if(sound == 'stop'){
        audioGetReady.pause();
        audioGetReady.currentTime = 0;
        audioTenSec.pause();
        audioTenSec.currentTime = 0;
        audioNext.pause();
        audioNext.currentTime = 0;
        audioRest.pause();
        audioRest.currentTime = 0;
        audioCongrats.pause();
        audioCongrats.currentTime = 0;
      }
    }

它不起作用,我也尝试使用“ .muted = true;”如图here

1 个答案:

答案 0 :(得分:1)

我认为您的代码应如下所示。在您的代码中,每次调用audioPlayer函数时,都会创建一个新的Audio对象,这意味着您启动和暂停的音频是不同的。

  audioGetReady = new Audio("...mp3");
  audioTenSec = new Audio("...mp3");
  audioNext = new AudioAudio("...mp3");
  audioRest = new AudioAudio("...mp3");
  audioCongrats = new AudioAudio("...mp3");

  audioPlayer(sound){
    if(sound == 'getReady'){
      this.audioGetReady.play()
    }
    if(sound == 'tenSeconds'){
      this.audioTenSec.play()
    }
    if(sound == 'next'){
      this.audioNext.play()
    }
    if(sound == 'rest'){
      this.audioRest.play()
    }
    if(sound == 'congrats'){
      this.audioCongrats.play()
    }
    if(sound == 'stop'){
      this.audioGetReady.pause();
      this.audioGetReady.currentTime = 0;
      this.audioTenSec.pause();
      this.audioTenSec.currentTime = 0;
      this.audioNext.pause();
      this.audioNext.currentTime = 0;
      this.audioRest.pause();
      this.audioRest.currentTime = 0;
      this.audioCongrats.pause();
      this.audioCongrats.currentTime = 0;
    }
  }