Воспроизведение аудио перекрывается на несколько запросов AJAX

Question

Я пытаюсь воспроизвести аудиофайл всякий раз, когда мой чат-бот дает ответ. Я создал API, в котором мой аудиофайл сохраняется, и вызываю его при вызове ajax при каждом ответе бота. Он работает нормально, когда приходит ответ одного бота.,но проблема возникает с многократным ответом, звук перекрывается, значит, 1-й звук не закончен, мы получаем второй ответ, и он также воспроизводится с микшированием обоих аудио. Я как-то хотел разделить этот звук и хотел воспроизводить его последовательно один за другим.

Код реакции:

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

Это не полностью описывает постановку задачи, но, глядя на код, поведение ожидается.Вы должны добавить код, чтобы поставить аудио в очередь, а не воспроизводить его сразу.

Итак, создайте очередь и сохраните загруженный звук в очереди.Вместо немедленного воспроизведения, проверьте, воспроизводится ли какой-либо звук, если это так, подождите, пока он не закончится (нужно добавить слушателей).Как только это закончится, вытолкните его из очереди и играйте следующий элемент qued.Больше кода и деталей по постановке проблемы помогут лучше.