459 lines
14 KiB
JavaScript
459 lines
14 KiB
JavaScript
/**
|
||
* PiperTTS Bundle (SDK + Worker + PCMPlayer)
|
||
* Fix: Smart End Detection that supports Pause/Resume
|
||
*/
|
||
class PCMPlayer {
|
||
constructor(options) {
|
||
this.init(options);
|
||
}
|
||
|
||
init(options) {
|
||
this.option = Object.assign({}, {
|
||
inputCodec: 'Int16',
|
||
channels: 1,
|
||
sampleRate: 16000,
|
||
flushTime: 50,
|
||
fftSize: 2048,
|
||
}, options);
|
||
|
||
this.samples = new Float32Array();
|
||
this.interval = setInterval(this.flush.bind(this), this.option.flushTime);
|
||
this.convertValue = this.getConvertValue();
|
||
this.typedArray = this.getTypedArray();
|
||
|
||
this.initAudioContext();
|
||
this.bindAudioContextEvent();
|
||
}
|
||
|
||
getConvertValue() {
|
||
const map = {
|
||
Int8: 128,
|
||
Int16: 32768,
|
||
Int32: 2147483648,
|
||
Float32: 1
|
||
};
|
||
if (!map[this.option.inputCodec]) throw new Error('Codec Error');
|
||
return map[this.option.inputCodec];
|
||
}
|
||
|
||
getTypedArray() {
|
||
const map = {
|
||
Int8: Int8Array,
|
||
Int16: Int16Array,
|
||
Int32: Int32Array,
|
||
Float32: Float32Array
|
||
};
|
||
if (!map[this.option.inputCodec]) throw new Error('Codec Error');
|
||
return map[this.option.inputCodec];
|
||
}
|
||
|
||
initAudioContext() {
|
||
this.audioCtx = new(window.AudioContext || window.webkitAudioContext)();
|
||
this.gainNode = this.audioCtx.createGain();
|
||
this.gainNode.gain.value = 1.0;
|
||
this.gainNode.connect(this.audioCtx.destination);
|
||
this.startTime = this.audioCtx.currentTime;
|
||
this.analyserNode = this.audioCtx.createAnalyser();
|
||
this.analyserNode.fftSize = this.option.fftSize;
|
||
}
|
||
|
||
static isTypedArray(data) {
|
||
return (data.byteLength && data.buffer && data.buffer.constructor == ArrayBuffer) || data.constructor ==
|
||
ArrayBuffer;
|
||
}
|
||
|
||
isSupported(data) {
|
||
if (!PCMPlayer.isTypedArray(data)) throw new Error('Data must be ArrayBuffer or TypedArray');
|
||
return true;
|
||
}
|
||
|
||
feed(data) {
|
||
this.isSupported(data);
|
||
data = this.getFormattedValue(data);
|
||
const tmp = new Float32Array(this.samples.length + data.length);
|
||
tmp.set(this.samples, 0);
|
||
tmp.set(data, this.samples.length);
|
||
this.samples = tmp;
|
||
}
|
||
|
||
getFormattedValue(data) {
|
||
data = data.constructor == ArrayBuffer ? new this.typedArray(data) : new this.typedArray(data.buffer);
|
||
let float32 = new Float32Array(data.length);
|
||
for (let i = 0; i < data.length; i++) {
|
||
float32[i] = data[i] / this.convertValue;
|
||
}
|
||
return float32;
|
||
}
|
||
|
||
volume(val) {
|
||
this.gainNode.gain.value = val;
|
||
}
|
||
|
||
destroy() {
|
||
if (this.interval) clearInterval(this.interval);
|
||
this.samples = null;
|
||
if (this.audioCtx) {
|
||
this.audioCtx.close();
|
||
this.audioCtx = null;
|
||
}
|
||
}
|
||
|
||
flush() {
|
||
if (!this.samples.length) return;
|
||
|
||
const bufferSource = this.audioCtx.createBufferSource();
|
||
if (typeof this.option.onended === 'function') {
|
||
bufferSource.onended = (e) => this.option.onended(this, e);
|
||
}
|
||
|
||
const length = this.samples.length / this.option.channels;
|
||
const audioBuffer = this.audioCtx.createBuffer(this.option.channels, length, this.option.sampleRate);
|
||
|
||
for (let channel = 0; channel < this.option.channels; channel++) {
|
||
const audioData = audioBuffer.getChannelData(channel);
|
||
let offset = channel;
|
||
let decrement = 50;
|
||
for (let i = 0; i < length; i++) {
|
||
audioData[i] = this.samples[offset];
|
||
if (i < 50) audioData[i] = (audioData[i] * i) / 50;
|
||
if (i >= length - 51) audioData[i] = (audioData[i] * decrement--) / 50;
|
||
offset += this.option.channels;
|
||
}
|
||
}
|
||
|
||
if (this.startTime < this.audioCtx.currentTime) {
|
||
this.startTime = this.audioCtx.currentTime;
|
||
}
|
||
|
||
bufferSource.buffer = audioBuffer;
|
||
bufferSource.connect(this.gainNode);
|
||
bufferSource.connect(this.analyserNode);
|
||
bufferSource.start(this.startTime);
|
||
|
||
this.startTime += audioBuffer.duration;
|
||
this.samples = new Float32Array();
|
||
}
|
||
|
||
async pause() {
|
||
await this.audioCtx.suspend();
|
||
}
|
||
async continue () {
|
||
await this.audioCtx.resume();
|
||
}
|
||
|
||
bindAudioContextEvent() {
|
||
if (typeof this.option.onstatechange === 'function') {
|
||
this.audioCtx.onstatechange = (e) => {
|
||
this.option.onstatechange(this, e, this.audioCtx.state);
|
||
};
|
||
}
|
||
}
|
||
}
|
||
|
||
// ==========================================
|
||
// Worker 源码
|
||
// ==========================================
|
||
const WORKER_SOURCE = `
|
||
let globalWs = null;
|
||
|
||
self.onmessage = function (e) {
|
||
const { type, data } = e.data;
|
||
switch (type) {
|
||
case 'connect': connectWebSocket(data); break;
|
||
case 'stop': closeWs(); break;
|
||
}
|
||
};
|
||
|
||
function closeWs() {
|
||
if (globalWs) {
|
||
globalWs.onerror = null;
|
||
globalWs.onclose = null;
|
||
globalWs.onmessage = null;
|
||
try { globalWs.close(1000, 'User stopped'); } catch (e) {}
|
||
globalWs = null;
|
||
}
|
||
}
|
||
|
||
function connectWebSocket(config) {
|
||
closeWs();
|
||
|
||
const { url, text, options } = config;
|
||
self.postMessage({ type: 'status', data: 'ws_connecting' });
|
||
|
||
try {
|
||
const currentWs = new WebSocket(url);
|
||
currentWs.binaryType = 'arraybuffer';
|
||
globalWs = currentWs;
|
||
|
||
currentWs.onopen = () => {
|
||
if (globalWs !== currentWs) return;
|
||
self.postMessage({ type: 'status', data: 'ws_connected' });
|
||
currentWs.send(JSON.stringify({
|
||
text: text,
|
||
speaker_id: options.speakerId || 0,
|
||
length_scale: options.lengthScale || 1.0,
|
||
noise_scale: options.noiseScale || 0.667,
|
||
}));
|
||
self.postMessage({ type: 'status', data: 'generating' });
|
||
};
|
||
|
||
currentWs.onmessage = (event) => {
|
||
if (globalWs !== currentWs) return;
|
||
|
||
if (typeof event.data === 'string' && event.data === 'END') {
|
||
const wsToClose = currentWs;
|
||
globalWs = null;
|
||
|
||
wsToClose.onmessage = null;
|
||
wsToClose.onerror = null;
|
||
wsToClose.onclose = null;
|
||
|
||
try { wsToClose.close(1000, 'Done'); } catch(e) {}
|
||
|
||
self.postMessage({ type: 'end' });
|
||
} else {
|
||
self.postMessage({ type: 'audio-data', buffer: event.data }, [event.data]);
|
||
}
|
||
};
|
||
|
||
currentWs.onclose = (e) => {
|
||
if (globalWs === currentWs) {
|
||
self.postMessage({ type: 'end' });
|
||
globalWs = null;
|
||
}
|
||
};
|
||
|
||
currentWs.onerror = () => {
|
||
if (globalWs === currentWs) {
|
||
self.postMessage({ type: 'error', data: 'WebSocket error' });
|
||
}
|
||
};
|
||
|
||
} catch (e) {
|
||
self.postMessage({ type: 'error', data: e.message });
|
||
}
|
||
}
|
||
`;
|
||
|
||
// ==========================================
|
||
// PiperTTS SDK
|
||
// ==========================================
|
||
class PiperTTS {
|
||
constructor(config = {}) {
|
||
this.baseUrl = config.baseUrl || 'http://localhost:5001';
|
||
this.onStatus = config.onStatus || console.log;
|
||
this.onStart = config.onStart || (() => {});
|
||
this.onEnd = config.onEnd || (() => {});
|
||
this.sampleRate = config.sampleRate || 16000;
|
||
|
||
this.player = null;
|
||
this.worker = null;
|
||
this.recordedChunks = [];
|
||
this.isRecording = false;
|
||
|
||
// 新增：检测音频结束的定时器 ID
|
||
this.endCheckInterval = null;
|
||
|
||
this._initWorker();
|
||
}
|
||
|
||
_initWorker() {
|
||
const blob = new Blob([WORKER_SOURCE], {
|
||
type: 'application/javascript'
|
||
});
|
||
this.worker = new Worker(URL.createObjectURL(blob));
|
||
|
||
this.worker.onmessage = (e) => {
|
||
const {
|
||
type,
|
||
data,
|
||
buffer
|
||
} = e.data;
|
||
switch (type) {
|
||
case 'status':
|
||
const map = {
|
||
ws_connecting: '正在连接...',
|
||
ws_connected: '已连接',
|
||
generating: '流式接收中...'
|
||
};
|
||
this.onStatus(map[data] || data, 'processing');
|
||
break;
|
||
case 'error':
|
||
if (this.recordedChunks.length > 0) {
|
||
this.onStatus('数据接收完毕', 'success');
|
||
this._triggerEndWithDelay();
|
||
} else {
|
||
this.onStatus(`错误: ${data}`, 'error');
|
||
this.stop();
|
||
}
|
||
break;
|
||
case 'audio-data':
|
||
this._handleAudio(buffer);
|
||
break;
|
||
case 'end':
|
||
this.onStatus('数据接收完毕', 'success');
|
||
this._triggerEndWithDelay();
|
||
break;
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 【核心修改】智能轮询检测
|
||
* 只有当 AudioContext 处于 running 状态且时间走完时，才触发 onEnd
|
||
*/
|
||
_triggerEndWithDelay() {
|
||
// 先清除可能存在的旧定时器
|
||
if (this.endCheckInterval) clearInterval(this.endCheckInterval);
|
||
|
||
// 每 200ms 检查一次
|
||
this.endCheckInterval = setInterval(() => {
|
||
// 1. 如果播放器没了，直接结束
|
||
if (!this.player || !this.player.audioCtx) {
|
||
this._finishEndCheck();
|
||
return;
|
||
}
|
||
|
||
// 2. 如果处于暂停状态 (suspended)，什么都不做，继续等
|
||
if (this.player.audioCtx.state === 'suspended') {
|
||
return;
|
||
}
|
||
|
||
// 3. 计算剩余时间
|
||
// startTime 是缓冲区结束的绝对时间，currentTime 是当前时间
|
||
const remainingTime = this.player.startTime - this.player.audioCtx.currentTime;
|
||
|
||
// 4. 如果剩余时间小于 0.1秒（留点冗余），说明播完了
|
||
if (remainingTime <= 0.1) {
|
||
this._finishEndCheck();
|
||
}
|
||
}, 200);
|
||
}
|
||
|
||
_finishEndCheck() {
|
||
if (this.endCheckInterval) {
|
||
clearInterval(this.endCheckInterval);
|
||
this.endCheckInterval = null;
|
||
}
|
||
this.onEnd();
|
||
}
|
||
|
||
_initPlayer() {
|
||
if (this.player) {
|
||
this.player.destroy();
|
||
}
|
||
|
||
this.player = new PCMPlayer({
|
||
inputCodec: 'Int16',
|
||
channels: 1,
|
||
sampleRate: this.sampleRate,
|
||
flushTime: 50,
|
||
});
|
||
}
|
||
|
||
async speak(text, options = {}) {
|
||
if (!text) return;
|
||
this.stop();
|
||
|
||
this._initPlayer();
|
||
if (this.player) {
|
||
await this.player.continue();
|
||
}
|
||
|
||
this.recordedChunks = [];
|
||
this.isRecording = true;
|
||
this.onStart();
|
||
|
||
const wsUrl = this.baseUrl.replace(/^http/, 'ws') + '/ws/synthesize';
|
||
this.worker.postMessage({
|
||
type: 'connect',
|
||
data: {
|
||
url: wsUrl,
|
||
text,
|
||
options
|
||
},
|
||
});
|
||
}
|
||
|
||
stop() {
|
||
// 停止时必须清除轮询检测
|
||
if (this.endCheckInterval) {
|
||
clearInterval(this.endCheckInterval);
|
||
this.endCheckInterval = null;
|
||
}
|
||
|
||
this.worker.postMessage({
|
||
type: 'stop'
|
||
});
|
||
if (this.player) {
|
||
this.player.destroy();
|
||
this.player = null;
|
||
}
|
||
this.onStatus('已停止', 'default');
|
||
}
|
||
|
||
_handleAudio(arrayBuffer) {
|
||
if (this.isRecording) {
|
||
this.recordedChunks.push(arrayBuffer);
|
||
}
|
||
if (this.player) {
|
||
this.player.feed(arrayBuffer);
|
||
}
|
||
}
|
||
|
||
getAnalyserNode() {
|
||
return this.player ? this.player.analyserNode : null;
|
||
}
|
||
|
||
downloadAudio(filename = 'tts_output.wav') {
|
||
if (this.recordedChunks.length === 0) return;
|
||
let totalLen = 0;
|
||
for (let chunk of this.recordedChunks) totalLen += chunk.byteLength;
|
||
const tmp = new Uint8Array(totalLen);
|
||
let offset = 0;
|
||
for (let chunk of this.recordedChunks) {
|
||
tmp.set(new Uint8Array(chunk), offset);
|
||
offset += chunk.byteLength;
|
||
}
|
||
const wavBuffer = this._encodeWAV(new Int16Array(tmp.buffer), this.sampleRate);
|
||
const blob = new Blob([wavBuffer], {
|
||
type: 'audio/wav'
|
||
});
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.style = 'display: none';
|
||
a.href = url;
|
||
a.download = filename;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
window.URL.revokeObjectURL(url);
|
||
}
|
||
|
||
_encodeWAV(samples, sampleRate) {
|
||
const buffer = new ArrayBuffer(44 + samples.length * 2);
|
||
const view = new DataView(buffer);
|
||
const writeString = (view, offset, string) => {
|
||
for (let i = 0; i < string.length; i++) view.setUint8(offset + i, string.charCodeAt(i));
|
||
};
|
||
writeString(view, 0, 'RIFF');
|
||
view.setUint32(4, 36 + samples.length * 2, true);
|
||
writeString(view, 8, 'WAVE');
|
||
writeString(view, 12, 'fmt ');
|
||
view.setUint32(16, 16, true);
|
||
view.setUint16(20, 1, true);
|
||
view.setUint16(22, 1, true);
|
||
view.setUint32(24, sampleRate, true);
|
||
view.setUint32(28, sampleRate * 2, true);
|
||
view.setUint16(32, 2, true);
|
||
view.setUint16(34, 16, true);
|
||
writeString(view, 36, 'data');
|
||
view.setUint32(40, samples.length * 2, true);
|
||
let offset = 44;
|
||
for (let i = 0; i < samples.length; i++) {
|
||
view.setInt16(offset, samples[i], true);
|
||
offset += 2;
|
||
}
|
||
return view;
|
||
}
|
||
}
|
||
export default PiperTTS; |