214 lines
7.5 KiB
JavaScript
214 lines
7.5 KiB
JavaScript
|
/**
|
|||
|
|
* PiperTTS SDK - 兼容移动端的流式语音合成客户端
|
|||
|
|
* 特性：
|
|||
|
|
* 1. Web Audio API 实时调度，解决移动端不支持 MSE 的问题
|
|||
|
|
* 2. 头部注入 (Header Injection) 技术，解决分片解码错误
|
|||
|
|
* 3. 自动状态管理与事件回调
|
|||
|
|
*/
|
|||
|
|
export class PiperTTS {
|
|||
|
|
constructor(config = {}) {
|
|||
|
|
this.baseUrl = config.baseUrl || 'http://localhost:5001';
|
|||
|
|
this.audioCtx = config.audioCtx || new(window.AudioContext || window.webkitAudioContext)();
|
|||
|
|
this.onStatus = config.onStatus || ((msg, type) => console.log(`[Piper] ${msg}`));
|
|||
|
|
this.onStart = config.onStart || (() => {});
|
|||
|
|
this.onEnd = config.onEnd || (() => {});
|
|||
|
|
|
|||
|
|
// 内部状态
|
|||
|
|
this.ws = null;
|
|||
|
|
this.nextTime = 0; // 下一段音频的预定播放时间
|
|||
|
|
this.audioHeader = null; // 保存WAV/MP3头部
|
|||
|
|
this.chunkQueue = []; // 数据缓冲队列
|
|||
|
|
this.queueSize = 0; // 当前缓冲区字节数
|
|||
|
|
this.analyser = null; // 可视化分析器节点
|
|||
|
|
|
|||
|
|
// 配置参数
|
|||
|
|
this.flushThreshold = 8 * 1024; // 8KB 阈值
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* [重要] 初始化音频引擎
|
|||
|
|
* 必须在用户点击事件（click/touch）中调用一次，否则手机上没声音
|
|||
|
|
*/
|
|||
|
|
async init() {
|
|||
|
|
if (this.audioCtx.state === 'suspended') {
|
|||
|
|
await this.audioCtx.resume();
|
|||
|
|
this.onStatus('音频引擎已激活', 'success');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 绑定可视化分析器
|
|||
|
|
* @param {AnalyserNode} analyserNode - Web Audio Analyser节点
|
|||
|
|
*/
|
|||
|
|
attachVisualizer(analyserNode) {
|
|||
|
|
this.analyser = analyserNode;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 开始合成并播放
|
|||
|
|
* @param {string} text - 要合成的文本
|
|||
|
|
* @param {object} options - 可选参数 {speaker_id, noise_scale, etc.}
|
|||
|
|
*/
|
|||
|
|
speak(text, options = {}) {
|
|||
|
|
if (!text) return;
|
|||
|
|
|
|||
|
|
this.stop(); // 清理上一次播放
|
|||
|
|
this.onStatus('正在建立连接...', 'processing');
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const wsUrl = this.baseUrl.replace(/^http/, 'ws') + '/ws/synthesize';
|
|||
|
|
this.ws = new WebSocket(wsUrl);
|
|||
|
|
this.ws.binaryType = 'arraybuffer';
|
|||
|
|
|
|||
|
|
this.ws.onopen = () => {
|
|||
|
|
this.onStatus('连接成功，请求生成...', 'processing');
|
|||
|
|
// 初始化时间轴：当前时间 + 缓冲延迟
|
|||
|
|
this.nextTime = this.audioCtx.currentTime + 0.1;
|
|||
|
|
this.onStart();
|
|||
|
|
|
|||
|
|
this.ws.send(
|
|||
|
|
JSON.stringify({
|
|||
|
|
text: text,
|
|||
|
|
speaker_id: options.speakerId || null,
|
|||
|
|
length_scale: options.lengthScale || 1.0,
|
|||
|
|
noise_scale: options.noiseScale || 0.667,
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.ws.onmessage = (event) => this._handleMessage(event);
|
|||
|
|
|
|||
|
|
this.ws.onclose = async () => {
|
|||
|
|
// 处理剩余残余数据
|
|||
|
|
if (this.chunkQueue.length > 0) {
|
|||
|
|
await this._processQueue(true);
|
|||
|
|
}
|
|||
|
|
this.onStatus('播放结束', 'success');
|
|||
|
|
this.onEnd();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
this.ws.onerror = (err) => {
|
|||
|
|
console.error(err);
|
|||
|
|
this.onStatus('连接发生错误', 'error');
|
|||
|
|
};
|
|||
|
|
} catch (e) {
|
|||
|
|
this.onStatus(`启动失败: ${e.message}`, 'error');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 停止播放并重置状态
|
|||
|
|
*/
|
|||
|
|
stop() {
|
|||
|
|
if (this.ws) {
|
|||
|
|
this.ws.close();
|
|||
|
|
this.ws = null;
|
|||
|
|
}
|
|||
|
|
// 重置缓冲
|
|||
|
|
this.chunkQueue = [];
|
|||
|
|
this.queueSize = 0;
|
|||
|
|
this.audioHeader = null;
|
|||
|
|
// 注意：Web Audio API 很难"立即停止"已经在 flight 中的 node，
|
|||
|
|
// 除非我们追踪所有的 sourceNode 并调用 .stop()。
|
|||
|
|
// 简单实现：suspend 再 resume 或者关闭 context (不推荐频繁关闭)。
|
|||
|
|
// 这里的 stop 主要停止数据接收。
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- 内部私有方法 ---
|
|||
|
|
|
|||
|
|
async _handleMessage(event) {
|
|||
|
|
if (!(event.data instanceof ArrayBuffer)) return;
|
|||
|
|
|
|||
|
|
const chunk = event.data;
|
|||
|
|
|
|||
|
|
// 1. 捕获头部 (Header Injection 核心)
|
|||
|
|
if (!this.audioHeader) {
|
|||
|
|
// 截取前100字节作为通用头
|
|||
|
|
this.audioHeader = chunk.slice(0, 100);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 2. 入队
|
|||
|
|
this.chunkQueue.push(chunk);
|
|||
|
|
this.queueSize += chunk.byteLength;
|
|||
|
|
|
|||
|
|
// 3. 达到阈值则解码播放
|
|||
|
|
if (this.queueSize >= this.flushThreshold) {
|
|||
|
|
await this._processQueue();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async _processQueue(isLast = false) {
|
|||
|
|
if (this.chunkQueue.length === 0) return;
|
|||
|
|
|
|||
|
|
// 1. 合并 Buffer
|
|||
|
|
const rawData = new Uint8Array(this.queueSize);
|
|||
|
|
let offset = 0;
|
|||
|
|
for (const chunk of this.chunkQueue) {
|
|||
|
|
rawData.set(new Uint8Array(chunk), offset);
|
|||
|
|
offset += chunk.byteLength;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清空队列
|
|||
|
|
this.chunkQueue = [];
|
|||
|
|
this.queueSize = 0;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 2. 构造带头部的 Buffer
|
|||
|
|
let decodeTarget;
|
|||
|
|
// 简单的头部检测逻辑，如果没有头，就拼上去
|
|||
|
|
if (this.audioHeader && !this._hasHeader(rawData)) {
|
|||
|
|
const newBuffer = new Uint8Array(this.audioHeader.byteLength + rawData.byteLength);
|
|||
|
|
newBuffer.set(new Uint8Array(this.audioHeader), 0);
|
|||
|
|
newBuffer.set(rawData, this.audioHeader.byteLength);
|
|||
|
|
decodeTarget = newBuffer.buffer;
|
|||
|
|
} else {
|
|||
|
|
decodeTarget = rawData.buffer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3. 解码
|
|||
|
|
const decodedBuffer = await this.audioCtx.decodeAudioData(decodeTarget);
|
|||
|
|
|
|||
|
|
// 4. 播放调度
|
|||
|
|
this._scheduleBuffer(decodedBuffer);
|
|||
|
|
} catch (err) {
|
|||
|
|
// 解码失败处理：如果是中间数据，放回队列头部等待拼接
|
|||
|
|
if (!isLast) {
|
|||
|
|
this.chunkQueue.unshift(rawData);
|
|||
|
|
this.queueSize += rawData.byteLength;
|
|||
|
|
} else {
|
|||
|
|
console.warn('最后一段数据解码失败，丢弃', err);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
_scheduleBuffer(decodedBuffer) {
|
|||
|
|
const source = this.audioCtx.createBufferSource();
|
|||
|
|
source.buffer = decodedBuffer;
|
|||
|
|
|
|||
|
|
// 连接可视化
|
|||
|
|
if (this.analyser) {
|
|||
|
|
source.connect(this.analyser);
|
|||
|
|
this.analyser.connect(this.audioCtx.destination);
|
|||
|
|
} else {
|
|||
|
|
source.connect(this.audioCtx.destination);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算播放时间：如果发生卡顿，立即播放；否则无缝衔接
|
|||
|
|
const scheduleTime = Math.max(this.audioCtx.currentTime, this.nextTime);
|
|||
|
|
source.start(scheduleTime);
|
|||
|
|
|
|||
|
|
// 更新下一段的开始时间
|
|||
|
|
this.nextTime = scheduleTime + decodedBuffer.duration;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
_hasHeader(uint8Arr) {
|
|||
|
|
if (uint8Arr.byteLength < 4) return false;
|
|||
|
|
// Check "RIFF" (WAV)
|
|||
|
|
if (uint8Arr[0] === 82 && uint8Arr[1] === 73 && uint8Arr[2] === 70) return true;
|
|||
|
|
// Check "ID3" (MP3)
|
|||
|
|
if (uint8Arr[0] === 73 && uint8Arr[1] === 68 && uint8Arr[2] === 51) return true;
|
|||
|
|
// Check MP3 Sync Word (Simplify)
|
|||
|
|
if (uint8Arr[0] === 0xff && (uint8Arr[1] & 0xe0) === 0xe0) return true;
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|