播放音频在多个ajax请求上重叠

Question

每当我的聊天机器人做出响应时，我都试图播放音频文件。我创建了一个API，我的音频文件被保存下来并在每个机器人响应中的ajax调用中对其进行调用。当单个机器人响应即将到来时，它可以正常工作。但是出现多个响应问题，音频重叠，这意味着第一个音频未完成，我们得到了第二个响应，同时还同时播放了两种音频。我不知何故想要分离此音频，并想要依次播放。

反应代码：

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

它没有完全描述问题说明，但是看一下代码，行为是可以预期的。 您必须添加代码来查询音频，而不是立即播放。

因此，创建一个que并将加载的音频存储在que中。而不是立即播放，请检查是否已在播放任何音频，如果正在播放，请等待其结束（需要添加侦听器）。完成后，将其从que弹出并播放下一个qued项。 有关问题陈述的更多代码和详细信息将更好地帮助您。