sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

音频bug修复

Browse Source
This commit is contained in:
francis_fh
2026-01-23 12:12:51 +08:00
parent 5bf94a6223
commit 134c900946
3 changed files with 236 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
hook/useTTSPlayer.js
View File

@@ -8,7 +8,6 @@ import {
onHide,
onUnload
} from '@dcloudio/uni-app'
import WavDecoder from '@/lib/wav-decoder@1.3.0.js'
export function useTTSPlayer(httpUrl) {
const isSpeaking = ref(false)
@@ -23,22 +22,55 @@ export function useTTSPlayer(httpUrl) {
// #ifdef MP-WEIXIN
const audioContext = null // 微信小程序不支持 AudioContext
let innerAudioContext = null // 微信小程序音频上下文
// #endif
let currentAudioBuffer = null
let currentSource = null
let playTimeOffset = 0
const speak = async (text) => {
if (!audioContext) {
console.warn('⚠️ TTS not supported in current environment');
return;
// 初始化微信小程序音频上下文
// #ifdef MP-WEIXIN
const initInnerAudioContext = () => {
if (!innerAudioContext) {
innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = false
innerAudioContext.onPlay(() => {
console.log('🎵 微信小程序音频播放开始')
isSpeaking.value = true
isPaused.value = false
})
innerAudioContext.onPause(() => {
console.log('⏸️ 微信小程序音频播放暂停')
isPaused.value = true
})
innerAudioContext.onStop(() => {
console.log('⏹️ 微信小程序音频播放停止')
isSpeaking.value = false
isComplete.value = true
})
innerAudioContext.onEnded(() => {
console.log('🎵 微信小程序音频播放结束')
isSpeaking.value = false
isComplete.value = true
})
innerAudioContext.onError((res) => {
console.error('❌ 微信小程序音频播放错误:', res.errMsg)
isSpeaking.value = false
isComplete.value = false
})
innerAudioContext.onCanplay(() => {
console.log('🎵 微信小程序音频可以播放了')
// 只有在需要播放且未播放状态下才调用play
if (isSpeaking.value && !isPaused.value) {
innerAudioContext.play()
}
})
}
console.log('🎤 TTS speak function called');
console.log('📝 Text to synthesize:', text ? text.substring(0, 100) + '...' : 'No text');
console.log('🔗 HTTP URL:', httpUrl);
}
// #endif
const speak = async (text) => {
// 停止当前播放
stop()
@@ -51,22 +83,46 @@ export function useTTSPlayer(httpUrl) {
const url = `${httpUrl}?text=${encodeURIComponent(speechText)}`
console.log('🔗 Final GET URL:', url);
// 发送GET请求获取语音数据
const response = await fetch(url)
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
// #ifdef MP-WEIXIN
// 微信小程序环境，使用微信音频API
initInnerAudioContext()
console.log('🎵 微信小程序：设置音频 src 为:', url);
// 重置音频状态
isSpeaking.value = true
isPaused.value = false
isComplete.value = false
// 设置src，等待onCanplay事件触发后再播放
innerAudioContext.src = url
// #endif
// #ifdef H5
// H5环境，使用 AudioContext
if (audioContext) {
// 发送GET请求获取语音数据
const response = await fetch(url)
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
// 获取二进制数据
const arrayBuffer = await response.arrayBuffer()
console.log('✅ Received audio data, size:', arrayBuffer.byteLength + ' bytes');
try {
// 直接使用 audioContext.decodeAudioData 解码，不依赖外部库
const decoded = await audioContext.decodeAudioData(arrayBuffer)
console.log('✅ Audio decoded, sampleRate:', decoded.sampleRate, 'channels:', decoded.numberOfChannels);
// 播放音频
playDecodedAudio(decoded)
} catch (decodeError) {
console.error('❌ AudioContext decodeAudioData failed:', decodeError);
// 降级处理：创建一个简单的音频缓冲区
createFallbackAudio(arrayBuffer)
}
}
// #endif
// 获取二进制数据
const arrayBuffer = await response.arrayBuffer()
console.log('✅ Received audio data, size:', arrayBuffer.byteLength + ' bytes');
// 解码音频数据
const decoded = await WavDecoder.decode(arrayBuffer)
console.log('✅ Audio decoded, sampleRate:', decoded.sampleRate, 'channels:', decoded.channelData.length);
// 播放音频
playDecodedAudio(decoded)
} catch (error) {
console.error('❌ TTS synthesis failed:', error);
isSpeaking.value = false
@@ -74,18 +130,13 @@ export function useTTSPlayer(httpUrl) {
}
}
// #ifdef H5
const playDecodedAudio = (decoded) => {
if (!audioContext) return;
// 使用第一个声道的数据
const audioBuffer = audioContext.createBuffer(1, decoded.channelData[0].length, decoded.sampleRate)
audioBuffer.copyToChannel(decoded.channelData[0], 0)
currentAudioBuffer = audioBuffer
// 创建音频源
currentSource = audioContext.createBufferSource()
currentSource.buffer = audioBuffer
currentSource.buffer = decoded
currentSource.connect(audioContext.destination)
// 监听播放结束
@@ -100,11 +151,42 @@ export function useTTSPlayer(httpUrl) {
isSpeaking.value = true
isPaused.value = false
isComplete.value = false
console.log('<EFBFBD> Audio playback started');
console.log('🎵 Audio playback started');
}
// 降级处理：创建一个简单的音频缓冲区
const createFallbackAudio = (arrayBuffer) => {
console.log('🔄 使用降级方案创建音频');
// 创建一个简单的音频缓冲区，生成提示音
const sampleRate = 44100
const duration = 1 // 1秒
const frameCount = sampleRate * duration
const audioBuffer = audioContext.createBuffer(1, frameCount, sampleRate)
const channelData = audioBuffer.getChannelData(0)
// 生成一个简单的提示音（正弦波）
for (let i = 0; i < frameCount; i++) {
const t = i / sampleRate
channelData[i] = Math.sin(2 * Math.PI * 440 * t) * 0.1 // 440Hz正弦波，音量0.1
}
playDecodedAudio(audioBuffer)
}
// #endif
const pause = () => {
if (!audioContext || !isSpeaking.value || isPaused.value) {
// #ifdef MP-WEIXIN
if (innerAudioContext && isSpeaking.value && !isPaused.value) {
console.log('⏸️ 微信小程序音频暂停');
innerAudioContext.pause()
return
}
// #endif
// #ifdef H5
if (audioContext && !isSpeaking.value || isPaused.value) {
console.warn('⚠️ Cannot pause TTS playback');
return;
}
@@ -118,10 +200,20 @@ export function useTTSPlayer(httpUrl) {
playTimeOffset = audioContext.currentTime
console.log('✅ Audio paused successfully');
}
// #endif
}
const resume = () => {
if (!audioContext || !isSpeaking.value || !isPaused.value) {
// #ifdef MP-WEIXIN
if (innerAudioContext && isSpeaking.value && isPaused.value) {
console.log('▶️ 微信小程序音频恢复播放');
innerAudioContext.play()
return
}
// #endif
// #ifdef H5
if (audioContext && !isSpeaking.value || !isPaused.value) {
console.warn('⚠️ Cannot resume TTS playback');
return;
}
@@ -133,6 +225,7 @@ export function useTTSPlayer(httpUrl) {
isPaused.value = false
console.log('✅ Audio resumed successfully');
}
// #endif
}
const cancelAudio = () => {
@@ -142,6 +235,18 @@ export function useTTSPlayer(httpUrl) {
const stop = () => {
console.log('⏹️ TTS stop called');
// #ifdef MP-WEIXIN
if (innerAudioContext) {
try {
innerAudioContext.stop()
console.log('✅ 微信小程序音频停止');
} catch (e) {
console.error('❌ 微信小程序音频停止错误:', e);
}
}
// #endif
// #ifdef H5
if (currentSource) {
try {
currentSource.stop()
@@ -159,6 +264,7 @@ export function useTTSPlayer(httpUrl) {
console.error('❌ Error suspending audio context:', e);
}
}
// #endif
isSpeaking.value = false
isPaused.value = false

2
pages/chat/components/ai-paging.vue
View File

@@ -283,7 +283,7 @@ import {
getCurrentInstance,
} from 'vue';
import { storeToRefs } from 'pinia';
// import config from '@/config.js';
// 移除重复导入，使用从globalFunction注入的config
import useChatGroupDBStore from '@/stores/userChatGroupStore';
import MdRender from '@/components/md-render/md-render.vue';
import CollapseTransition from '@/components/CollapseTransition/CollapseTransition.vue';

190
utils/streamRequest.js
View File

@@ -51,101 +51,101 @@ function StreamRequestMiniProgram(url, data = {}, onDataReceived, onError, onCom
}
});
// UTF-8解码函数，用于微信小程序真机环境
function utf8Decode(uint8Array) {
let result = '';
let i = 0;
const len = uint8Array.length;
while (i < len) {
const byte1 = uint8Array[i];
// 1字节字符 (0xxxxxxx)
if (byte1 < 0x80) {
result += String.fromCharCode(byte1);
i++;
}
// 2字节字符 (110xxxxx 10xxxxxx)
else if (byte1 >= 0xC0 && byte1 < 0xE0) {
if (i + 1 < len) {
const byte2 = uint8Array[i + 1];
if (byte2 >= 0x80 && byte2 < 0xC0) {
const codePoint = ((byte1 & 0x1F) << 6) | (byte2 & 0x3F);
result += String.fromCharCode(codePoint);
i += 2;
continue;
}
}
// 无效的UTF-8序列，跳过
result += '<27>';
i++;
}
// 3字节字符 (1110xxxx 10xxxxxx 10xxxxxx)
else if (byte1 >= 0xE0 && byte1 < 0xF0) {
if (i + 2 < len) {
const byte2 = uint8Array[i + 1];
const byte3 = uint8Array[i + 2];
if ((byte2 >= 0x80 && byte2 < 0xC0) && (byte3 >= 0x80 && byte3 < 0xC0)) {
const codePoint = ((byte1 & 0x0F) << 12) | ((byte2 & 0x3F) << 6) | (byte3 & 0x3F);
result += String.fromCharCode(codePoint);
i += 3;
continue;
}
}
// 无效的UTF-8序列，跳过
result += '<27>';
i++;
}
// 4字节字符 (11110xxx 10xxxxxx 10xxxxxx 10xxxxxx)
else if (byte1 >= 0xF0 && byte1 < 0xF8) {
if (i + 3 < len) {
const byte2 = uint8Array[i + 1];
const byte3 = uint8Array[i + 2];
const byte4 = uint8Array[i + 3];
if ((byte2 >= 0x80 && byte2 < 0xC0) && (byte3 >= 0x80 && byte3 < 0xC0) && (byte4 >= 0x80 && byte4 < 0xC0)) {
let codePoint = ((byte1 & 0x07) << 18) | ((byte2 & 0x3F) << 12) | ((byte3 & 0x3F) << 6) | (byte4 & 0x3F);
// 处理UTF-16代理对
if (codePoint >= 0x10000) {
codePoint -= 0x10000;
const highSurrogate = (codePoint >> 10) + 0xD800;
const lowSurrogate = (codePoint & 0x3FF) + 0xDC00;
result += String.fromCharCode(highSurrogate, lowSurrogate);
} else {
result += String.fromCharCode(codePoint);
}
i += 4;
continue;
}
}
// 无效的UTF-8序列，跳过
result += '<27>';
i++;
}
// 无效的UTF-8序列，跳过
else {
result += '<27>';
i++;
}
}
return result;
}
// 监听分块数据
requestTask.onChunkReceived((res) => {
try {
// 微信小程序兼容处理：微信小程序不支持TextDecoder，使用自定义UTF-8解码
let chunk = '';
if (typeof TextDecoder !== 'undefined') {
// 支持TextDecoder的环境（如开发者工具）
const decoder = new TextDecoder('utf-8');
chunk = decoder.decode(new Uint8Array(res.data));
} else {
// 微信小程序真机环境，使用自定义UTF-8解码函数
const uint8Array = new Uint8Array(res.data);
chunk = utf8Decode(uint8Array);
}
console.log('📦 收到分块数据:', chunk);
// UTF-8解码函数，用于微信小程序真机环境
function utf8Decode(uint8Array) {
let result = '';
let i = 0;
const len = uint8Array.length;
while (i < len) {
const byte1 = uint8Array[i];
// 1字节字符 (0xxxxxxx)
if (byte1 < 0x80) {
result += String.fromCharCode(byte1);
i++;
}
// 2字节字符 (110xxxxx 10xxxxxx)
else if (byte1 >= 0xC0 && byte1 < 0xE0) {
if (i + 1 < len) {
const byte2 = uint8Array[i + 1];
if (byte2 >= 0x80 && byte2 < 0xC0) {
const codePoint = ((byte1 & 0x1F) << 6) | (byte2 & 0x3F);
result += String.fromCharCode(codePoint);
i += 2;
continue;
}
}
// 无效的UTF-8序列，跳过
result += '<27>';
i++;
}
// 3字节字符 (1110xxxx 10xxxxxx 10xxxxxx)
else if (byte1 >= 0xE0 && byte1 < 0xF0) {
if (i + 2 < len) {
const byte2 = uint8Array[i + 1];
const byte3 = uint8Array[i + 2];
if ((byte2 >= 0x80 && byte2 < 0xC0) && (byte3 >= 0x80 && byte3 < 0xC0)) {
const codePoint = ((byte1 & 0x0F) << 12) | ((byte2 & 0x3F) << 6) | (byte3 & 0x3F);
result += String.fromCharCode(codePoint);
i += 3;
continue;
}
}
// 无效的UTF-8序列，跳过
result += '<27>';
i++;
}
// 4字节字符 (11110xxx 10xxxxxx 10xxxxxx 10xxxxxx)
else if (byte1 >= 0xF0 && byte1 < 0xF8) {
if (i + 3 < len) {
const byte2 = uint8Array[i + 1];
const byte3 = uint8Array[i + 2];
const byte4 = uint8Array[i + 3];
if ((byte2 >= 0x80 && byte2 < 0xC0) && (byte3 >= 0x80 && byte3 < 0xC0) && (byte4 >= 0x80 && byte4 < 0xC0)) {
let codePoint = ((byte1 & 0x07) << 18) | ((byte2 & 0x3F) << 12) | ((byte3 & 0x3F) << 6) | (byte4 & 0x3F);
// 处理UTF-16代理对
if (codePoint >= 0x10000) {
codePoint -= 0x10000;
const highSurrogate = (codePoint >> 10) + 0xD800;
const lowSurrogate = (codePoint & 0x3FF) + 0xDC00;
result += String.fromCharCode(highSurrogate, lowSurrogate);
} else {
result += String.fromCharCode(codePoint);
}
i += 4;
continue;
}
}
// 无效的UTF-8序列，跳过
result += '<27>';
i++;
}
// 无效的UTF-8序列，跳过
else {
result += '<27>';
i++;
}
}
return result;
}
// 监听分块数据
requestTask.onChunkReceived((res) => {
try {
// 微信小程序兼容处理：微信小程序不支持TextDecoder，使用自定义UTF-8解码
let chunk = '';
if (typeof TextDecoder !== 'undefined') {
// 支持TextDecoder的环境（如开发者工具）
const decoder = new TextDecoder('utf-8');
chunk = decoder.decode(new Uint8Array(res.data));
} else {
// 微信小程序真机环境，使用自定义UTF-8解码函数
const uint8Array = new Uint8Array(res.data);
chunk = utf8Decode(uint8Array);
}
console.log('📦 收到分块数据:', chunk);
buffer += chunk;
let lines = buffer.split("\n");