html audio player stops running while setting setCurrentTime in onTimeUpdate callback function. How to fix this?

Viewed 15

I'm simply using html audio element which has onTimeUpdate event which triggers when playing position of an audio has changed, this onTimeUpdate event calls any xyz function in that function I'm getting currentTime (current playback position of audio tag/element). Using currentTime of playback I update state to display some text on particualr sec like in 5sec have to display..."you'r Welcome" but the problem is when I setState or update state AudioPlayer stops running. I want to display different messages on different playback positions but audio player gets stop on first setState or update state.

const  audio3 =  require('../../../../../private/100-7626693.wav');

// audio element
<audio id='audioPlayer' controls onTimeUpdate={(event)=>this.handleState(event)}>
  <source src={audio3} type="audio/wav" />
    Your browser does not support the audio element.
</audio>

// function invoked by onTimeUpdate
handleState(event) {
  if(event.target.currentTime == 5){
      this.setState({ displayText: "You'r Welcome" }) 
  }
  if(event.target.currentTime == 8){
      this.setState({ displayText: "You doing well" }) 
  }
  if(event.target.currentTime == 13){
      this.setState({ displayText: "Keep Doing" }) 
  }
}
// as it updates 1st state audio Player stops running. 

*** Please let me know if any other approaches to get playback postions and setState will be not their problem. ***

0 Answers
Related