在反应组件中停止声音

Question

我的应用正在根据各种触发器播放一些音频。我希望用户能够在他决定时停止声音。

这就是我所做的，基于此 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

Answer 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;
    }
  }

在反应组件中停止声音

Stop sound in a react component

javascript

html5-audio

reactjs