摘要

本文将介绍如何在前端实现流式播放文本到语音（TTS）的语音，并加入确保语音播放不重叠的改进方案。我们将探讨使用Web Audio API和WebSocket进行实时语音播放的技术细节，并提供相应的代码示例。

一、引言

在之前的讨论中，我们了解了如何实现前端流式播放TTS语音。然而，为了进一步提升用户体验，我们需要确保语音播放不会重叠。本文将介绍一种基于状态管理和播放队列的改进方案。

二、技术细节

2.1 Web Audio API

Web Audio API提供了强大的音频处理功能，包括创建音频上下文、加载和播放音频、以及音频的实时处理。

2.2 WebSocket

WebSocket允许在用户和服务器之间建立持久的全双工通信渠道，非常适合实时的TTS语音流式传输。

三、改进方案

3.1 维护音频播放状态

通过增加一个状态变量<code>isPlaying，我们可以跟踪当前是否有音频正在播放。

3.2 音频播放队列

创建一个audioQueue数组，用于存储待播放的音频数据。

3.3 播放队列管理

在当前音频播放结束后，自动从队列中取出下一个音频进行播放。

四、代码示例

4.1 Vue组件数据

data() { -- -->

return {

// ... 其他属性

isPlaying: false, // 标记音频是否正在播放

audioQueue: [], // 存储待播放的音频数据

audioContext: null,

source: null,

};

},

4.2 WebSocket连接与文本请求

// WebSocket连接代码保持不变

// ...

function sendTextToTTS(text) {

socket.send(text);

}

4.3 处理音频数据并加入队列

handleAudioData(audioData) {

// 创建FileReader读取音频数据

const reader = new FileReader();

reader.onload = async () => {

const arrayBuffer = reader.result;

const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);

this.audioQueue.push(audioBuffer); // 将新音频数据加入队列

if (!this.isPlaying) {

this.playNextInQueue(); // 如果当前没有音频在播放，则开始播放队列中的第一段音频

}

};

reader.readAsArrayBuffer(audioData);

},

4.4 播放队列管理

methods: {

// 初始化音频上下文

initAudioContext() {

if (!this.audioContext) {

this.audioContext = new (window.AudioContext || window.webkitAudioContext)();

}

},

// 播放队列中的下一个音频

playNextInQueue() {

this.initAudioContext(); // 确保音频上下文已初始化

if (this.audioQueue.length > 0) {

this.isPlaying = true; // 设置播放状态为true

const nextAudio = this.audioQueue.shift(); // 从队列中取出下一个音频

const source = this.audioContext.createBufferSource();

source.buffer = nextAudio;

source.connect(this.audioContext.destination);

source.onended = () => {

this.isPlaying = false; // 当音频播放结束时，设置播放状态为false

this.playNextInQueue(); // 检查队列，播放下一音频

};

source.start();

}

},

// ... 其他方法保持不变

}

4.5 HTML界面

<!-- HTML界面保持不变 -->

五、总结

通过引入播放状态和音频播放队列，我们能够确保前端流式播放TTS语音时，音频播放不会重叠，从而提供更加流畅和自然的用户体验。

六、参考文献

Web Audio API 规范MDN Web Docs - WebSocket

七、作者信息

作者：[(^_)lin]

链接：[https://blog.csdn.net/weixin_62428445]

授权：本文采用相应许可证进行授权。