playing Audio getting overlapped on multiple ajax request

Question

I am trying to play audio file whenever my chatbot gives a response.I have created an API where my audio file is getting saved and calling it in an ajax call on each bot response.its working fine when single bot response is coming. but problem arise with multiple response, audio gets overlapped means 1st audio is not finished we get the second response and it is also getting played giving mix of both audios.I somehow want to separate this audio and wanted to play it sequentially one after another.

React code :

export default class App extends React.Component { 

state = {
 audio : new Audio
}

if (replyType.username === "bot" )  
  {

        axios.get("https://alpha.com/call_tts/?message="+replyType.message.text)
       .then(res => {
        const posts = res;       
        console.log("ajax response success")
        this.setState({
                    audio :  new Audio("https://alpha.com/media/final_x.wav")
                  });
        this.state.audio.play()

       });

      }
  }
}

Answer 1

It doesn't describe the problem statement completely but looking at the code, the behaviour is expected. You have to add the code to que the audio instead of playing it immediately.

So, create a que and store the loaded audio in que. Instead of playing it immediately, check if any audio is already playing, if so, wait for it to finish (need to add listeners). Once that finishes, pop it from que and play the next qued item. More code and details on the problem statement will help better.