flat: 添加语音识别sdk+ 文件检测
This commit is contained in:
Apcallover
@@ -1,217 +1,205 @@
|
||||
import {
|
||||
ref,
|
||||
onUnmounted,
|
||||
onBeforeUnmount,
|
||||
onMounted
|
||||
onUnmounted
|
||||
} from 'vue'
|
||||
import {
|
||||
onHide,
|
||||
onUnload
|
||||
} from '@dcloudio/uni-app'
|
||||
import WavDecoder from '@/lib/wav-decoder@1.3.0.js'
|
||||
import config from '@/config'
|
||||
import PiperTTS from './piper-bundle.js'
|
||||
|
||||
export function useTTSPlayer() {
|
||||
const isSpeaking = ref(false)
|
||||
const isPaused = ref(false)
|
||||
const isComplete = ref(false)
|
||||
// UI 状态
|
||||
const isSpeaking = ref(false) // 是否正在交互（含播放、暂停、加载）
|
||||
const isPaused = ref(false) // 是否处于暂停状态
|
||||
const isLoading = ref(false) // 是否正在加载/连接
|
||||
|
||||
const audioContext = new(window.AudioContext || window.webkitAudioContext)()
|
||||
let playTime = audioContext.currentTime
|
||||
let sourceNodes = []
|
||||
let socket = null
|
||||
let sampleRate = 16000
|
||||
let numChannels = 1
|
||||
let isHeaderDecoded = false
|
||||
let pendingText = null
|
||||
// 单例 Piper 实例
|
||||
let piper = null
|
||||
|
||||
let currentPlayId = 0
|
||||
let activePlayId = 0
|
||||
/**
|
||||
* 获取或创建 SDK 实例
|
||||
*/
|
||||
const getPiperInstance = () => {
|
||||
if (!piper) {
|
||||
let baseUrl = config.speechSynthesis2 || ''
|
||||
baseUrl = baseUrl.replace(/\/$/, '')
|
||||
|
||||
const speak = (text) => {
|
||||
currentPlayId++
|
||||
const myPlayId = currentPlayId
|
||||
reset()
|
||||
pendingText = text
|
||||
activePlayId = myPlayId
|
||||
}
|
||||
|
||||
const pause = () => {
|
||||
if (audioContext.state === 'running') {
|
||||
audioContext.suspend()
|
||||
isPaused.value = true
|
||||
isSpeaking.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resume = () => {
|
||||
if (audioContext.state === 'suspended') {
|
||||
audioContext.resume()
|
||||
isPaused.value = false
|
||||
isSpeaking.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const cancelAudio = () => {
|
||||
stop()
|
||||
}
|
||||
|
||||
const stop = () => {
|
||||
isSpeaking.value = false
|
||||
isPaused.value = false
|
||||
isComplete.value = false
|
||||
playTime = audioContext.currentTime
|
||||
|
||||
sourceNodes.forEach(node => {
|
||||
try {
|
||||
node.stop()
|
||||
node.disconnect()
|
||||
} catch (e) {}
|
||||
})
|
||||
sourceNodes = []
|
||||
|
||||
if (socket) {
|
||||
socket.close()
|
||||
socket = null
|
||||
}
|
||||
|
||||
isHeaderDecoded = false
|
||||
pendingText = null
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
stop()
|
||||
isSpeaking.value = false
|
||||
isPaused.value = false
|
||||
isComplete.value = false
|
||||
playTime = audioContext.currentTime
|
||||
initWebSocket()
|
||||
}
|
||||
|
||||
const initWebSocket = () => {
|
||||
const thisPlayId = currentPlayId
|
||||
socket = new WebSocket(config.speechSynthesis)
|
||||
socket.binaryType = 'arraybuffer'
|
||||
|
||||
socket.onopen = () => {
|
||||
if (pendingText && thisPlayId === activePlayId) {
|
||||
const seepdText = extractSpeechText(pendingText)
|
||||
console.log(seepdText)
|
||||
socket.send(seepdText)
|
||||
pendingText = null
|
||||
}
|
||||
}
|
||||
|
||||
socket.onmessage = async (e) => {
|
||||
if (thisPlayId !== activePlayId) return // 忽略旧播放的消息
|
||||
|
||||
if (typeof e.data === 'string') {
|
||||
try {
|
||||
const msg = JSON.parse(e.data)
|
||||
if (msg.status === 'complete') {
|
||||
isComplete.value = true
|
||||
setTimeout(() => {
|
||||
if (thisPlayId === activePlayId) {
|
||||
isSpeaking.value = false
|
||||
}
|
||||
}, (playTime - audioContext.currentTime) * 1000)
|
||||
piper = new PiperTTS({
|
||||
baseUrl: baseUrl,
|
||||
sampleRate: 16000,
|
||||
onStatus: (msg, type) => {
|
||||
if (type === 'error') {
|
||||
console.error('[TTS Error]', msg)
|
||||
resetState()
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('[TTSPlayer] 文本消息:', e.data)
|
||||
},
|
||||
onStart: () => {
|
||||
isLoading.value = false
|
||||
isSpeaking.value = true
|
||||
isPaused.value = false
|
||||
},
|
||||
onEnd: () => {
|
||||
// 只有非暂停状态下的结束，才重置所有状态
|
||||
// 如果是用户手动暂停导致的中断，不应视为自然播放结束
|
||||
isSpeaking.value = false
|
||||
isLoading.value = false
|
||||
isPaused.value = false
|
||||
}
|
||||
} else if (e.data instanceof ArrayBuffer) {
|
||||
if (!isHeaderDecoded) {
|
||||
try {
|
||||
const decoded = await WavDecoder.decode(e.data)
|
||||
sampleRate = decoded.sampleRate
|
||||
numChannels = decoded.channelData.length
|
||||
decoded.channelData.forEach((channel, i) => {
|
||||
const audioBuffer = audioContext.createBuffer(1, channel.length,
|
||||
sampleRate)
|
||||
audioBuffer.copyToChannel(channel, 0)
|
||||
playBuffer(audioBuffer)
|
||||
})
|
||||
isHeaderDecoded = true
|
||||
} catch (err) {
|
||||
console.error('WAV 解码失败:', err)
|
||||
}
|
||||
} else {
|
||||
const pcm = new Int16Array(e.data)
|
||||
const audioBuffer = pcmToAudioBuffer(pcm, sampleRate, numChannels)
|
||||
playBuffer(audioBuffer)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
return piper
|
||||
}
|
||||
|
||||
const pcmToAudioBuffer = (pcm, sampleRate, numChannels) => {
|
||||
const length = pcm.length / numChannels
|
||||
const audioBuffer = audioContext.createBuffer(numChannels, length, sampleRate)
|
||||
for (let ch = 0; ch < numChannels; ch++) {
|
||||
const channelData = audioBuffer.getChannelData(ch)
|
||||
for (let i = 0; i < length; i++) {
|
||||
const sample = pcm[i * numChannels + ch]
|
||||
channelData[i] = sample / 32768
|
||||
}
|
||||
}
|
||||
return audioBuffer
|
||||
}
|
||||
/**
|
||||
* 核心朗读方法
|
||||
*/
|
||||
const speak = async (text) => {
|
||||
if (!text) return
|
||||
|
||||
const playBuffer = (audioBuffer) => {
|
||||
if (!isSpeaking.value) {
|
||||
playTime = audioContext.currentTime
|
||||
}
|
||||
const source = audioContext.createBufferSource()
|
||||
source.buffer = audioBuffer
|
||||
source.connect(audioContext.destination)
|
||||
source.start(playTime)
|
||||
sourceNodes.push(source)
|
||||
playTime += audioBuffer.duration
|
||||
const processedText = extractSpeechText(text)
|
||||
if (!processedText) return
|
||||
|
||||
const instance = getPiperInstance()
|
||||
|
||||
// 重置状态
|
||||
isLoading.value = true
|
||||
isPaused.value = false
|
||||
isSpeaking.value = true
|
||||
|
||||
try {
|
||||
// 直接调用 speak，SDK 内部会自动处理 init 和 stop
|
||||
await instance.speak(processedText, {
|
||||
speakerId: 0,
|
||||
noiseScale: 0.667,
|
||||
lengthScale: 1.0
|
||||
})
|
||||
} catch (e) {
|
||||
console.error('TTS Speak Error:', e)
|
||||
resetState()
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
stop()
|
||||
})
|
||||
/**
|
||||
* 暂停
|
||||
*/
|
||||
const pause = async () => {
|
||||
// 1. 只有正在播放且未暂停时，才执行暂停
|
||||
if (!isSpeaking.value || isPaused.value) return
|
||||
|
||||
// 页面刷新/关闭时
|
||||
onMounted(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('beforeunload', cancelAudio)
|
||||
// 2. 检查播放器实例是否存在
|
||||
if (piper && piper.player) {
|
||||
try {
|
||||
// 执行音频挂起
|
||||
await piper.player.pause()
|
||||
// 3. 成功后更新 UI
|
||||
isPaused.value = true
|
||||
} catch (e) {
|
||||
console.error("Pause failed:", e)
|
||||
// 即使报错，如果不是致命错误，也可以尝试强制更新 UI
|
||||
// isPaused.value = true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cancelAudio()
|
||||
if (typeof window !== 'undefined') {
|
||||
window.removeEventListener('beforeunload', cancelAudio)
|
||||
/**
|
||||
* 恢复 (继续播放)
|
||||
*/
|
||||
const resume = async () => {
|
||||
// 1. 只有处于暂停状态时，才执行恢复
|
||||
if (!isPaused.value) return
|
||||
|
||||
if (piper && piper.player) {
|
||||
try {
|
||||
await piper.player.continue()
|
||||
// 2. 成功后更新 UI
|
||||
isPaused.value = false
|
||||
isSpeaking.value = true
|
||||
} catch (e) {
|
||||
console.error("Resume failed:", e)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onHide(cancelAudio)
|
||||
onUnload(cancelAudio)
|
||||
/**
|
||||
* 切换 播放/暂停 (方便按钮绑定)
|
||||
*/
|
||||
const togglePlay = () => {
|
||||
if (isPaused.value) {
|
||||
resume()
|
||||
} else {
|
||||
pause()
|
||||
}
|
||||
}
|
||||
|
||||
initWebSocket()
|
||||
/**
|
||||
* 停止 (中断)
|
||||
*/
|
||||
const stop = () => {
|
||||
if (piper) {
|
||||
piper.stop()
|
||||
}
|
||||
resetState()
|
||||
}
|
||||
|
||||
/**
|
||||
* 彻底销毁
|
||||
*/
|
||||
const destroy = () => {
|
||||
if (piper) {
|
||||
piper.stop()
|
||||
piper = null
|
||||
}
|
||||
resetState()
|
||||
}
|
||||
|
||||
const resetState = () => {
|
||||
isSpeaking.value = false
|
||||
isPaused.value = false
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
// === 生命周期管理 ===
|
||||
|
||||
onUnmounted(destroy)
|
||||
|
||||
if (typeof onHide === 'function') {
|
||||
onHide(() => {
|
||||
togglePlay()
|
||||
// stop()
|
||||
})
|
||||
}
|
||||
|
||||
if (typeof onUnload === 'function') {
|
||||
onUnload(destroy)
|
||||
}
|
||||
|
||||
return {
|
||||
speak,
|
||||
pause,
|
||||
resume,
|
||||
cancelAudio,
|
||||
togglePlay, // 新增：单按钮切换功能
|
||||
stop,
|
||||
cancelAudio: stop,
|
||||
isSpeaking,
|
||||
isPaused,
|
||||
isComplete
|
||||
isLoading
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 文本提取工具函数 (保持原样)
|
||||
*/
|
||||
function extractSpeechText(markdown) {
|
||||
if (!markdown || markdown.indexOf('job-json') === -1) {
|
||||
return markdown;
|
||||
}
|
||||
const jobRegex = /``` job-json\s*({[\s\S]*?})\s*```/g;
|
||||
const jobs = [];
|
||||
let match;
|
||||
let lastJobEndIndex = 0;
|
||||
let firstJobStartIndex = -1;
|
||||
|
||||
// 提取岗位 json 数据及前后位置
|
||||
while ((match = jobRegex.exec(markdown)) !== null) {
|
||||
const jobStr = match[1];
|
||||
try {
|
||||
@@ -225,27 +213,16 @@ function extractSpeechText(markdown) {
|
||||
console.warn('JSON 解析失败', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 提取引导语（第一个 job-json 之前的文字）
|
||||
const guideText = firstJobStartIndex > 0 ?
|
||||
markdown.slice(0, firstJobStartIndex).trim() :
|
||||
'';
|
||||
|
||||
// 提取结束语（最后一个 job-json 之后的文字）
|
||||
markdown.slice(0, firstJobStartIndex).trim() : '';
|
||||
const endingText = lastJobEndIndex < markdown.length ?
|
||||
markdown.slice(lastJobEndIndex).trim() :
|
||||
'';
|
||||
|
||||
// 岗位信息格式化为语音文本
|
||||
markdown.slice(lastJobEndIndex).trim() : '';
|
||||
const jobTexts = jobs.map((job, index) => {
|
||||
return `第 ${index + 1} 个岗位，岗位名称是：${job.jobTitle}，公司是：${job.companyName}，薪资：${job.salary}，地点：${job.location}，学历要求：${job.education}，经验要求：${job.experience}。`;
|
||||
});
|
||||
|
||||
// 拼接总语音内容
|
||||
const finalTextParts = [];
|
||||
if (guideText) finalTextParts.push(guideText);
|
||||
finalTextParts.push(...jobTexts);
|
||||
if (endingText) finalTextParts.push(endingText);
|
||||
|
||||
return finalTextParts.join('\n');
|
||||
}
|
||||
Reference in New Issue
Block a user