播放音频在多个 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 项目。 更多关于问题陈述的代码和细节会有所帮助。