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

同时播放聊条音频的问题修复

Browse Source
This commit is contained in:
francis_fh
2026-01-24 17:57:25 +08:00
parent cbf8bd7c41
commit 7a7aa33128
2 changed files with 400 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

724
hook/useTTSPlayer.js
View File

@@ -9,77 +9,79 @@ import {
onUnload onUnload
} from '@dcloudio/uni-app' } from '@dcloudio/uni-app'
export function useTTSPlayer(httpUrl) { // 创建单例实例
const isSpeaking = ref(false) let ttsInstance = null
const isPaused = ref(false)
const isComplete = ref(false) // 创建音频播放器类
class TTSPlayer {
constructor(httpUrl) {
this.httpUrl = httpUrl
this.isSpeaking = ref(false)
this.isPaused = ref(false)
this.isComplete = ref(false)
// #ifdef H5 // #ifdef H5
// H5环境，使用 AudioContext this.audioContext = null
// 初始化时不立即创建，而是在需要时创建，确保在用户交互后创建 this.htmlAudioElement = null
let audioContext = null this.abortController = null
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
const audioContext = null // 微信小程序不支持 AudioContext this.backgroundAudioManager = null
let innerAudioContext = null // 微信小程序音频上下文 this.innerAudioContext = null
let backgroundAudioManager = null // 微信小程序背景音频管理器
// #endif // #endif
let currentAudioBuffer = null this.currentAudioBuffer = null
let currentSource = null this.currentSource = null
let playTimeOffset = 0 this.playTimeOffset = 0
this.isProcessingRequest = false
}
// 初始化微信小程序音频上下文 // 初始化微信小程序音频上下文
// #ifdef MP-WEIXIN initAudioManager() {
const initAudioManager = () => {
try { try {
console.log('📱 微信小程序：创建背景音频管理器') console.log('📱 微信小程序：创建背景音频管理器')
backgroundAudioManager = uni.getBackgroundAudioManager() this.backgroundAudioManager = uni.getBackgroundAudioManager()
// 设置默认配置 // 设置默认配置
backgroundAudioManager.title = 'AI语音播报' this.backgroundAudioManager.title = 'AI语音播报'
backgroundAudioManager.singer = 'KS AI' this.backgroundAudioManager.singer = 'KS AI'
backgroundAudioManager.coverImgUrl = '/static/icon/logo.png' this.backgroundAudioManager.coverImgUrl = '/static/icon/logo.png'
backgroundAudioManager.volume = 1.0 this.backgroundAudioManager.volume = 1.0
backgroundAudioManager.onPlay(() => { this.backgroundAudioManager.onPlay(() => {
console.log('🎵 微信小程序背景音频播放开始') console.log('🎵 微信小程序背景音频播放开始')
isSpeaking.value = true this.isSpeaking.value = true
isPaused.value = false this.isPaused.value = false
}) })
backgroundAudioManager.onPause(() => { this.backgroundAudioManager.onPause(() => {
console.log('⏸️ 微信小程序背景音频播放暂停') console.log('⏸️ 微信小程序背景音频播放暂停')
isPaused.value = true this.isPaused.value = true
}) })
backgroundAudioManager.onStop(() => { this.backgroundAudioManager.onStop(() => {
console.log('⏹️ 微信小程序背景音频播放停止') console.log('⏹️ 微信小程序背景音频播放停止')
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = true this.isComplete.value = true
}) })
backgroundAudioManager.onEnded(() => { this.backgroundAudioManager.onEnded(() => {
console.log('🎵 微信小程序背景音频播放结束') console.log('🎵 微信小程序背景音频播放结束')
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = true this.isComplete.value = true
}) })
backgroundAudioManager.onError((res) => { this.backgroundAudioManager.onError((res) => {
console.error('❌ 微信小程序背景音频播放错误:', res.errMsg, '错误码:', res.errCode) console.error('❌ 微信小程序背景音频播放错误:', res.errMsg, '错误码:', res.errCode)
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = false this.isComplete.value = false
}) })
backgroundAudioManager.onCanplay(() => { this.backgroundAudioManager.onCanplay(() => {
console.log('🎵 微信小程序背景音频可以播放了') console.log('🎵 微信小程序背景音频可以播放了')
}) })
backgroundAudioManager.onWaiting(() => {
console.log('⏳ 微信小程序背景音频加载中...')
})
console.log('✅ 微信小程序背景音频管理器初始化成功') console.log('✅ 微信小程序背景音频管理器初始化成功')
return true return true
} catch (e) { } catch (e) {
@@ -87,137 +89,361 @@ export function useTTSPlayer(httpUrl) {
// 降级使用InnerAudioContext // 降级使用InnerAudioContext
console.log('🔄 微信小程序：背景音频不可用，降级使用InnerAudioContext') console.log('🔄 微信小程序：背景音频不可用，降级使用InnerAudioContext')
if (!innerAudioContext) { if (!this.innerAudioContext) {
innerAudioContext = uni.createInnerAudioContext() this.innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = false this.innerAudioContext.autoplay = false
innerAudioContext.obeyMuteSwitch = false this.innerAudioContext.obeyMuteSwitch = false
innerAudioContext.onPlay(() => { this.innerAudioContext.onPlay(() => {
console.log('🎵 微信小程序InnerAudioContext播放开始') console.log('🎵 微信小程序InnerAudioContext播放开始')
isSpeaking.value = true this.isSpeaking.value = true
isPaused.value = false this.isPaused.value = false
}) })
innerAudioContext.onPause(() => { this.innerAudioContext.onPause(() => {
console.log('⏸️ 微信小程序InnerAudioContext播放暂停') console.log('⏸️ 微信小程序InnerAudioContext播放暂停')
isPaused.value = true this.isPaused.value = true
}) })
innerAudioContext.onStop(() => { this.innerAudioContext.onStop(() => {
console.log('⏹️ 微信小程序InnerAudioContext播放停止') console.log('⏹️ 微信小程序InnerAudioContext播放停止')
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = true this.isComplete.value = true
}) })
innerAudioContext.onEnded(() => { this.innerAudioContext.onEnded(() => {
console.log('🎵 微信小程序InnerAudioContext播放结束') console.log('🎵 微信小程序InnerAudioContext播放结束')
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = true this.isComplete.value = true
}) })
innerAudioContext.onError((res) => { this.innerAudioContext.onError((res) => {
console.error('❌ 微信小程序InnerAudioContext错误:', res.errMsg, '错误码:', res.errCode) console.error('❌ 微信小程序InnerAudioContext错误:', res.errMsg, '错误码:', res.errCode)
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = false this.isComplete.value = false
}) })
innerAudioContext.onCanplay(() => { this.innerAudioContext.onCanplay(() => {
console.log('🎵 微信小程序InnerAudioContext可以播放了') console.log('🎵 微信小程序InnerAudioContext可以播放了')
if (isSpeaking.value && !isPaused.value) { if (this.isSpeaking.value && !this.isPaused.value) {
innerAudioContext.play() this.innerAudioContext.play()
} }
}) })
} }
return false return false
} }
} }
// H5环境播放解码后的音频
playDecodedAudio(decoded) {
// #ifdef H5
if (!this.audioContext) return;
// 创建音频源
this.currentSource = this.audioContext.createBufferSource()
this.currentSource.buffer = decoded
this.currentSource.connect(this.audioContext.destination)
// 监听播放结束
this.currentSource.onended = () => {
console.log('🎵 Audio playback completed');
this.isSpeaking.value = false
this.isComplete.value = true
}
// 开始播放
this.currentSource.start()
this.isSpeaking.value = true
this.isPaused.value = false
this.isComplete.value = false
console.log('🎵 Audio playback started');
// #endif
}
// 降级处理：创建一个简单的音频缓冲区
createFallbackAudio(arrayBuffer) {
// #ifdef H5
console.log('🔄 使用降级方案创建音频');
// 创建一个简单的音频缓冲区，生成提示音
const sampleRate = 44100
const duration = 1 // 1秒
const frameCount = sampleRate * duration
const audioBuffer = this.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
}
this.playDecodedAudio(audioBuffer)
// #endif
}
// 暂停播放
pause() {
console.log('⏸️ TTS pause called');
// #ifdef MP-WEIXIN
// 优先使用背景音频管理器
if (this.backgroundAudioManager) {
try {
this.backgroundAudioManager.pause()
console.log('⏸️ 微信小程序背景音频暂停');
return
} catch (e) {
console.error('❌ 微信小程序背景音频暂停失败:', e);
}
}
// 降级使用InnerAudioContext
if (this.innerAudioContext && this.isSpeaking.value && !this.isPaused.value) {
try {
this.innerAudioContext.pause()
console.log('⏸️ 微信小程序InnerAudioContext暂停');
return
} catch (e) {
console.error('❌ 微信小程序InnerAudioContext暂停失败:', e);
}
}
// #endif // #endif
const speak = async (text) => { // #ifdef H5
// 停止当前播放 if (this.audioContext && !this.isSpeaking.value || this.isPaused.value) {
stop() console.warn('⚠️ Cannot pause TTS playback');
return;
}
if (this.audioContext.state === 'running') {
this.audioContext.suspend()
this.isPaused.value = true
// 保存当前播放位置
this.playTimeOffset = this.audioContext.currentTime
console.log('✅ H5 Audio paused successfully');
}
// #endif
}
// 恢复播放
resume() {
console.log('▶️ TTS resume called');
// #ifdef MP-WEIXIN
// 优先使用背景音频管理器
if (this.backgroundAudioManager) {
try {
this.backgroundAudioManager.play()
console.log('▶️ 微信小程序背景音频恢复播放');
return
} catch (e) {
console.error('❌ 微信小程序背景音频恢复失败:', e);
}
}
// 降级使用InnerAudioContext
if (this.innerAudioContext && this.isSpeaking.value && this.isPaused.value) {
try {
this.innerAudioContext.play()
console.log('▶️ 微信小程序InnerAudioContext恢复播放');
return
} catch (e) {
console.error('❌ 微信小程序InnerAudioContext恢复失败:', e);
}
}
// #endif
// #ifdef H5
if (this.audioContext && !this.isSpeaking.value || !this.isPaused.value) {
console.warn('⚠️ Cannot resume TTS playback');
return;
}
if (this.audioContext.state === 'suspended') {
this.audioContext.resume()
this.isPaused.value = false
console.log('✅ H5 Audio resumed successfully');
}
// #endif
}
// 停止播放
stop() {
console.log('⏹️ TTS stop called');
// #ifdef MP-WEIXIN
// 优先使用背景音频管理器
if (this.backgroundAudioManager) {
try {
this.backgroundAudioManager.stop()
console.log('✅ 微信小程序背景音频停止');
} catch (e) {
console.error('❌ 微信小程序背景音频停止失败:', e);
}
}
// 降级使用InnerAudioContext
if (this.innerAudioContext) {
try {
this.innerAudioContext.stop()
console.log('✅ 微信小程序InnerAudioContext停止');
this.innerAudioContext.destroy()
this.innerAudioContext = null
} catch (e) {
console.error('❌ 微信小程序InnerAudioContext停止错误:', e);
}
}
// #endif
// #ifdef H5
// 取消正在进行的fetch请求
if (this.abortController) {
try {
this.abortController.abort();
this.abortController = null;
console.log('✅ H5 fetch request aborted');
} catch (e) {
console.error('❌ Error aborting H5 fetch request:', e);
}
}
if (this.currentSource) {
try {
this.currentSource.stop()
this.currentSource.disconnect()
} catch (e) {
console.error('❌ Error stopping H5 audio source:', e);
}
this.currentSource = null
}
// 停止并清理HTML5 Audio元素
if (this.htmlAudioElement) {
try {
this.htmlAudioElement.pause();
this.htmlAudioElement.src = '';
this.htmlAudioElement = null;
console.log('✅ H5 HTML5 Audio element stopped and cleaned up');
} catch (e) {
console.error('❌ Error stopping H5 HTML5 Audio element:', e);
}
}
if (this.audioContext && this.audioContext.state === 'running') {
try {
this.audioContext.suspend()
} catch (e) {
console.error('❌ Error suspending H5 audio context:', e);
}
}
// #endif
this.isSpeaking.value = false
this.isPaused.value = false
this.isComplete.value = false
this.currentAudioBuffer = null
this.playTimeOffset = 0
this.isProcessingRequest = false
console.log('✅ TTS playback stopped');
}
// 取消音频播放
cancelAudio() {
this.stop()
}
// 合成并播放语音
async speak(text) {
// 停止当前播放和处理中的请求
this.stop()
try { try {
// 标记开始处理请求
this.isProcessingRequest = true
// 提取要合成的文本 // 提取要合成的文本
const speechText = extractSpeechText(text) const speechText = extractSpeechText(text)
console.log('📤 Sending text to TTS server via GET:', speechText.substring(0, 100) + '...'); console.log('📤 Sending text to TTS server via GET:', speechText.substring(0, 100) + '...');
// 构建GET请求URL // 构建GET请求URL
const url = `${httpUrl}?text=${encodeURIComponent(speechText)}` const url = `${this.httpUrl}?text=${encodeURIComponent(speechText)}`
console.log('🔗 Final GET URL:', url); console.log('🔗 Final GET URL:', url);
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 微信小程序环境，使用背景音频管理器 // 微信小程序环境，使用背景音频管理器
const isBackgroundAudioAvailable = initAudioManager() const isBackgroundAudioAvailable = this.initAudioManager()
// 重置音频状态 // 重置音频状态
isSpeaking.value = true this.isSpeaking.value = true
isPaused.value = false this.isPaused.value = false
isComplete.value = false this.isComplete.value = false
if (isBackgroundAudioAvailable && backgroundAudioManager) { if (isBackgroundAudioAvailable && this.backgroundAudioManager) {
console.log('🎵 微信小程序：使用背景音频管理器播放，URL:', url); console.log('🎵 微信小程序：使用背景音频管理器播放，URL:', url);
// 设置背景音频参数 // 设置背景音频参数
backgroundAudioManager.title = 'AI语音播报' this.backgroundAudioManager.title = 'AI语音播报'
backgroundAudioManager.singer = 'KS AI' this.backgroundAudioManager.singer = 'KS AI'
backgroundAudioManager.coverImgUrl = '/static/icon/logo.png' this.backgroundAudioManager.coverImgUrl = '/static/icon/logo.png'
// 直接设置src并播放 // 直接设置src并播放
backgroundAudioManager.src = url this.backgroundAudioManager.src = url
console.log('🎵 微信小程序背景音频开始播放'); console.log('🎵 微信小程序背景音频开始播放');
} else { } else {
// 降级方案：使用InnerAudioContext // 降级方案：使用InnerAudioContext
console.log('🔄 微信小程序：背景音频不可用，降级使用InnerAudioContext'); console.log('🔄 微信小程序：背景音频不可用，降级使用InnerAudioContext');
// 如果已有音频上下文，先销毁再重新创建 // 如果已有音频上下文，先销毁再重新创建
if (innerAudioContext) { if (this.innerAudioContext) {
innerAudioContext.destroy() this.innerAudioContext.destroy()
innerAudioContext = null this.innerAudioContext = null
} }
innerAudioContext = uni.createInnerAudioContext() this.innerAudioContext = uni.createInnerAudioContext()
innerAudioContext.autoplay = false this.innerAudioContext.autoplay = false
innerAudioContext.obeyMuteSwitch = false this.innerAudioContext.obeyMuteSwitch = false
innerAudioContext.volume = 1.0 this.innerAudioContext.volume = 1.0
innerAudioContext.onPlay(() => { this.innerAudioContext.onPlay(() => {
console.log('🎵 微信小程序InnerAudioContext播放开始') console.log('🎵 微信小程序InnerAudioContext播放开始')
isSpeaking.value = true this.isSpeaking.value = true
isPaused.value = false this.isPaused.value = false
}) })
innerAudioContext.onPause(() => { this.innerAudioContext.onPause(() => {
console.log('⏸️ 微信小程序InnerAudioContext播放暂停') console.log('⏸️ 微信小程序InnerAudioContext播放暂停')
isPaused.value = true this.isPaused.value = true
}) })
innerAudioContext.onStop(() => { this.innerAudioContext.onStop(() => {
console.log('⏹️ 微信小程序InnerAudioContext播放停止') console.log('⏹️ 微信小程序InnerAudioContext播放停止')
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = true this.isComplete.value = true
}) })
innerAudioContext.onEnded(() => { this.innerAudioContext.onEnded(() => {
console.log('🎵 微信小程序InnerAudioContext播放结束') console.log('🎵 微信小程序InnerAudioContext播放结束')
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = true this.isComplete.value = true
}) })
innerAudioContext.onError((res) => { this.innerAudioContext.onError((res) => {
console.error('❌ 微信小程序InnerAudioContext错误:', res.errMsg, '错误码:', res.errCode) console.error('❌ 微信小程序InnerAudioContext错误:', res.errMsg, '错误码:', res.errCode)
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = false this.isComplete.value = false
}) })
innerAudioContext.onCanplay(() => { this.innerAudioContext.onCanplay(() => {
console.log('🎵 微信小程序InnerAudioContext可以播放了') console.log('🎵 微信小程序InnerAudioContext可以播放了')
if (isSpeaking.value && !isPaused.value) { if (this.isSpeaking.value && !this.isPaused.value) {
innerAudioContext.play() this.innerAudioContext.play()
} }
}) })
innerAudioContext.src = url this.innerAudioContext.src = url
console.log('🎵 微信小程序InnerAudioContext开始播放'); console.log('🎵 微信小程序InnerAudioContext开始播放');
} }
// #endif // #endif
@@ -225,21 +451,25 @@ export function useTTSPlayer(httpUrl) {
// #ifdef H5 // #ifdef H5
// H5环境，使用 AudioContext // H5环境，使用 AudioContext
try { try {
// 创建新的AbortController，用于取消当前请求
this.abortController = new AbortController();
const signal = this.abortController.signal;
// 确保AudioContext已创建 // 确保AudioContext已创建
if (!audioContext) { if (!this.audioContext) {
console.log('🎵 H5: 创建新的AudioContext'); console.log('🎵 H5: 创建新的AudioContext');
audioContext = new (window.AudioContext || window.webkitAudioContext)(); this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
} }
// 检查并恢复AudioContext状态（浏览器安全策略要求用户交互后才能播放音频） // 检查并恢复AudioContext状态（浏览器安全策略要求用户交互后才能播放音频）
if (audioContext.state === 'suspended') { if (this.audioContext.state === 'suspended') {
console.log('🎵 H5: 恢复挂起的AudioContext'); console.log('🎵 H5: 恢复挂起的AudioContext');
await audioContext.resume(); await this.audioContext.resume();
console.log('✅ H5: AudioContext已恢复，状态:', audioContext.state); console.log('✅ H5: AudioContext已恢复，状态:', this.audioContext.state);
} }
// 发送GET请求获取语音数据 // 发送GET请求获取语音数据，添加signal支持取消
const response = await fetch(url) const response = await fetch(url, { signal })
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`) throw new Error(`HTTP error! status: ${response.status}`)
} }
@@ -250,277 +480,101 @@ export function useTTSPlayer(httpUrl) {
try { try {
// 直接使用 audioContext.decodeAudioData 解码，不依赖外部库 // 直接使用 audioContext.decodeAudioData 解码，不依赖外部库
const decoded = await audioContext.decodeAudioData(arrayBuffer) const decoded = await this.audioContext.decodeAudioData(arrayBuffer)
console.log('✅ H5: Audio decoded, sampleRate:', decoded.sampleRate, 'channels:', decoded.numberOfChannels); console.log('✅ H5: Audio decoded, sampleRate:', decoded.sampleRate, 'channels:', decoded.numberOfChannels);
// 播放音频 // 播放音频
playDecodedAudio(decoded) this.playDecodedAudio(decoded)
} catch (decodeError) { } catch (decodeError) {
console.error('❌ H5: AudioContext decodeAudioData failed:', decodeError); console.error('❌ H5: AudioContext decodeAudioData failed:', decodeError);
// 降级处理：创建一个简单的音频缓冲区 // 降级处理：创建一个简单的音频缓冲区
createFallbackAudio(arrayBuffer) this.createFallbackAudio(arrayBuffer)
} }
} catch (h5Error) { } catch (h5Error) {
// 检查是否是取消请求导致的错误
if (h5Error.name === 'AbortError') {
console.log('✅ H5: Fetch request aborted as requested');
this.isSpeaking.value = false;
this.isComplete.value = false;
return;
}
console.error('❌ H5: Audio playback failed:', h5Error); console.error('❌ H5: Audio playback failed:', h5Error);
// 尝试使用HTML5 Audio元素作为最终降级方案 // 尝试使用HTML5 Audio元素作为最终降级方案
try { try {
console.log('🔄 H5: 尝试使用HTML5 Audio元素播放'); console.log('🔄 H5: 尝试使用HTML5 Audio元素播放');
// 如果已有Audio元素，先停止并销毁
if (this.htmlAudioElement) {
this.htmlAudioElement.pause();
this.htmlAudioElement.src = '';
this.htmlAudioElement = null;
}
const audio = new Audio(url); const audio = new Audio(url);
this.htmlAudioElement = audio;
audio.play(); audio.play();
console.log('✅ H5: HTML5 Audio元素开始播放'); console.log('✅ H5: HTML5 Audio元素开始播放');
// 设置音频状态 // 设置音频状态
isSpeaking.value = true; this.isSpeaking.value = true;
isPaused.value = false; this.isPaused.value = false;
isComplete.value = false; this.isComplete.value = false;
// 监听播放结束 // 监听播放结束
audio.onended = () => { audio.onended = () => {
console.log('🎵 H5: HTML5 Audio播放结束'); console.log('🎵 H5: HTML5 Audio播放结束');
isSpeaking.value = false; this.isSpeaking.value = false;
isComplete.value = true; this.isComplete.value = true;
this.htmlAudioElement = null;
}; };
// 监听播放错误 // 监听播放错误
audio.onerror = (error) => { audio.onerror = (error) => {
console.error('❌ H5: HTML5 Audio播放错误:', error); console.error('❌ H5: HTML5 Audio播放错误:', error);
isSpeaking.value = false; this.isSpeaking.value = false;
isComplete.value = false; this.isComplete.value = false;
this.htmlAudioElement = null;
}; };
} catch (audioError) { } catch (audioError) {
console.error('❌ H5: HTML5 Audio播放也失败了:', audioError); console.error('❌ H5: HTML5 Audio播放也失败了:', audioError);
isSpeaking.value = false; this.isSpeaking.value = false;
isComplete.value = false; this.isComplete.value = false;
this.htmlAudioElement = null;
} }
} finally {
// 清除AbortController，因为请求已经完成（无论成功还是失败）
this.abortController = null;
} }
// #endif // #endif
} catch (error) { } catch (error) {
console.error('❌ TTS synthesis failed:', error); console.error('❌ TTS synthesis failed:', error);
isSpeaking.value = false this.isSpeaking.value = false
isComplete.value = false this.isComplete.value = false
} finally {
// 标记请求处理完成
this.isProcessingRequest = false
}
} }
} }
// #ifdef H5 // 导出单例hook
const playDecodedAudio = (decoded) => { export function useTTSPlayer(httpUrl) {
if (!audioContext) return; // 如果已经有实例，直接返回
if (!ttsInstance) {
// 创建音频源 ttsInstance = new TTSPlayer(httpUrl)
currentSource = audioContext.createBufferSource()
currentSource.buffer = decoded
currentSource.connect(audioContext.destination)
// 监听播放结束
currentSource.onended = () => {
console.log('🎵 Audio playback completed');
isSpeaking.value = false
isComplete.value = true
} }
// 开始播放 // 返回实例的方法和状态
currentSource.start()
isSpeaking.value = true
isPaused.value = false
isComplete.value = false
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 = () => {
console.log('⏸️ TTS pause called');
// #ifdef MP-WEIXIN
// 优先使用背景音频管理器
if (backgroundAudioManager) {
try {
backgroundAudioManager.pause()
console.log('⏸️ 微信小程序背景音频暂停');
return
} catch (e) {
console.error('❌ 微信小程序背景音频暂停失败:', e);
}
}
// 降级使用InnerAudioContext
if (innerAudioContext && isSpeaking.value && !isPaused.value) {
try {
innerAudioContext.pause()
console.log('⏸️ 微信小程序InnerAudioContext暂停');
return
} catch (e) {
console.error('❌ 微信小程序InnerAudioContext暂停失败:', e);
}
}
// #endif
// #ifdef H5
if (audioContext && !isSpeaking.value || isPaused.value) {
console.warn('⚠️ Cannot pause TTS playback');
return;
}
if (audioContext.state === 'running') {
audioContext.suspend()
isPaused.value = true
// 保存当前播放位置
playTimeOffset = audioContext.currentTime
console.log('✅ H5 Audio paused successfully');
}
// #endif
}
const resume = () => {
console.log('▶️ TTS resume called');
// #ifdef MP-WEIXIN
// 优先使用背景音频管理器
if (backgroundAudioManager) {
try {
backgroundAudioManager.play()
console.log('▶️ 微信小程序背景音频恢复播放');
return
} catch (e) {
console.error('❌ 微信小程序背景音频恢复失败:', e);
}
}
// 降级使用InnerAudioContext
if (innerAudioContext && isSpeaking.value && isPaused.value) {
try {
innerAudioContext.play()
console.log('▶️ 微信小程序InnerAudioContext恢复播放');
return
} catch (e) {
console.error('❌ 微信小程序InnerAudioContext恢复失败:', e);
}
}
// #endif
// #ifdef H5
if (audioContext && !isSpeaking.value || !isPaused.value) {
console.warn('⚠️ Cannot resume TTS playback');
return;
}
if (audioContext.state === 'suspended') {
audioContext.resume()
isPaused.value = false
console.log('✅ H5 Audio resumed successfully');
}
// #endif
}
const cancelAudio = () => {
stop()
}
const stop = () => {
console.log('⏹️ TTS stop called');
// #ifdef MP-WEIXIN
// 优先使用背景音频管理器
if (backgroundAudioManager) {
try {
backgroundAudioManager.stop()
console.log('✅ 微信小程序背景音频停止');
} catch (e) {
console.error('❌ 微信小程序背景音频停止失败:', e);
}
}
// 降级使用InnerAudioContext
if (innerAudioContext) {
try {
innerAudioContext.stop()
console.log('✅ 微信小程序InnerAudioContext停止');
innerAudioContext.destroy()
innerAudioContext = null
} catch (e) {
console.error('❌ 微信小程序InnerAudioContext停止错误:', e);
}
}
// #endif
// #ifdef H5
if (currentSource) {
try {
currentSource.stop()
currentSource.disconnect()
} catch (e) {
console.error('❌ Error stopping H5 audio source:', e);
}
currentSource = null
}
if (audioContext && audioContext.state === 'running') {
try {
audioContext.suspend()
} catch (e) {
console.error('❌ Error suspending H5 audio context:', e);
}
}
// #endif
isSpeaking.value = false
isPaused.value = false
isComplete.value = false
currentAudioBuffer = null
playTimeOffset = 0
console.log('✅ TTS playback stopped');
}
onUnmounted(() => {
stop()
})
// 页面刷新/关闭时
onMounted(() => {
if (typeof window !== 'undefined') {
window.addEventListener('beforeunload', cancelAudio)
}
})
onBeforeUnmount(() => {
cancelAudio()
if (typeof window !== 'undefined') {
window.removeEventListener('beforeunload', cancelAudio)
}
})
onHide(cancelAudio)
onUnload(cancelAudio)
return { return {
speak, speak: ttsInstance.speak.bind(ttsInstance),
pause, pause: ttsInstance.pause.bind(ttsInstance),
resume, resume: ttsInstance.resume.bind(ttsInstance),
cancelAudio, cancelAudio: ttsInstance.cancelAudio.bind(ttsInstance),
isSpeaking, isSpeaking: ttsInstance.isSpeaking,
isPaused, isPaused: ttsInstance.isPaused,
isComplete isComplete: ttsInstance.isComplete
} }
} }

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

@@ -794,28 +794,9 @@ function readMarkdown(value, index) {
clearTimeout(ttsDebounceTimer); clearTimeout(ttsDebounceTimer);
} }
// 如果当前正在播放其他消息，先停止 // 总是先停止当前播放，无论是不是同一消息
if (speechIndex.value !== index && speechIndex.value !== 0) { console.log('🛑 Always stopping current speech before starting new one');
console.log('🛑 Stopping current speech and starting new one');
speechIndex.value = index; speechIndex.value = index;
speak(value);
return;
}
speechIndex.value = index;
// 如果当前正在播放且暂停了，直接恢复
if (isPaused.value && isSpeaking.value) {
console.log('▶️ Resuming paused speech');
resume();
return;
}
// 如果当前正在播放且没有暂停，不需要重新开始
if (isSpeaking.value && !isPaused.value) {
console.log('🔊 Already speaking, no need to restart');
return;
}
// 使用防抖，避免频繁调用TTS // 使用防抖，避免频繁调用TTS
ttsDebounceTimer = setTimeout(() => { ttsDebounceTimer = setTimeout(() => {