同时播放聊条音频的问题修复
This commit is contained in:
francis_fh
@@ -9,77 +9,79 @@ import {
|
||||
onUnload
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
export function useTTSPlayer(httpUrl) {
|
||||
const isSpeaking = ref(false)
|
||||
const isPaused = ref(false)
|
||||
const isComplete = ref(false)
|
||||
// 创建单例实例
|
||||
let ttsInstance = null
|
||||
|
||||
// #ifdef H5
|
||||
// H5环境，使用 AudioContext
|
||||
// 初始化时不立即创建，而是在需要时创建，确保在用户交互后创建
|
||||
let audioContext = null
|
||||
// #endif
|
||||
// 创建音频播放器类
|
||||
class TTSPlayer {
|
||||
constructor(httpUrl) {
|
||||
this.httpUrl = httpUrl
|
||||
this.isSpeaking = ref(false)
|
||||
this.isPaused = ref(false)
|
||||
this.isComplete = ref(false)
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const audioContext = null // 微信小程序不支持 AudioContext
|
||||
let innerAudioContext = null // 微信小程序音频上下文
|
||||
let backgroundAudioManager = null // 微信小程序背景音频管理器
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
this.audioContext = null
|
||||
this.htmlAudioElement = null
|
||||
this.abortController = null
|
||||
// #endif
|
||||
|
||||
let currentAudioBuffer = null
|
||||
let currentSource = null
|
||||
let playTimeOffset = 0
|
||||
// #ifdef MP-WEIXIN
|
||||
this.backgroundAudioManager = null
|
||||
this.innerAudioContext = null
|
||||
// #endif
|
||||
|
||||
this.currentAudioBuffer = null
|
||||
this.currentSource = null
|
||||
this.playTimeOffset = 0
|
||||
this.isProcessingRequest = false
|
||||
}
|
||||
|
||||
// 初始化微信小程序音频上下文
|
||||
// #ifdef MP-WEIXIN
|
||||
const initAudioManager = () => {
|
||||
initAudioManager() {
|
||||
try {
|
||||
console.log('📱 微信小程序：创建背景音频管理器')
|
||||
backgroundAudioManager = uni.getBackgroundAudioManager()
|
||||
this.backgroundAudioManager = uni.getBackgroundAudioManager()
|
||||
|
||||
// 设置默认配置
|
||||
backgroundAudioManager.title = 'AI语音播报'
|
||||
backgroundAudioManager.singer = 'KS AI'
|
||||
backgroundAudioManager.coverImgUrl = '/static/icon/logo.png'
|
||||
backgroundAudioManager.volume = 1.0
|
||||
this.backgroundAudioManager.title = 'AI语音播报'
|
||||
this.backgroundAudioManager.singer = 'KS AI'
|
||||
this.backgroundAudioManager.coverImgUrl = '/static/icon/logo.png'
|
||||
this.backgroundAudioManager.volume = 1.0
|
||||
|
||||
backgroundAudioManager.onPlay(() => {
|
||||
this.backgroundAudioManager.onPlay(() => {
|
||||
console.log('🎵 微信小程序背景音频播放开始')
|
||||
isSpeaking.value = true
|
||||
isPaused.value = false
|
||||
this.isSpeaking.value = true
|
||||
this.isPaused.value = false
|
||||
})
|
||||
|
||||
backgroundAudioManager.onPause(() => {
|
||||
this.backgroundAudioManager.onPause(() => {
|
||||
console.log('⏸️ 微信小程序背景音频播放暂停')
|
||||
isPaused.value = true
|
||||
this.isPaused.value = true
|
||||
})
|
||||
|
||||
backgroundAudioManager.onStop(() => {
|
||||
this.backgroundAudioManager.onStop(() => {
|
||||
console.log('⏹️ 微信小程序背景音频播放停止')
|
||||
isSpeaking.value = false
|
||||
isComplete.value = true
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = true
|
||||
})
|
||||
|
||||
backgroundAudioManager.onEnded(() => {
|
||||
this.backgroundAudioManager.onEnded(() => {
|
||||
console.log('🎵 微信小程序背景音频播放结束')
|
||||
isSpeaking.value = false
|
||||
isComplete.value = true
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = true
|
||||
})
|
||||
|
||||
backgroundAudioManager.onError((res) => {
|
||||
this.backgroundAudioManager.onError((res) => {
|
||||
console.error('❌ 微信小程序背景音频播放错误:', res.errMsg, '错误码:', res.errCode)
|
||||
isSpeaking.value = false
|
||||
isComplete.value = false
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = false
|
||||
})
|
||||
|
||||
backgroundAudioManager.onCanplay(() => {
|
||||
this.backgroundAudioManager.onCanplay(() => {
|
||||
console.log('🎵 微信小程序背景音频可以播放了')
|
||||
})
|
||||
|
||||
backgroundAudioManager.onWaiting(() => {
|
||||
console.log('⏳ 微信小程序背景音频加载中...')
|
||||
})
|
||||
|
||||
console.log('✅ 微信小程序背景音频管理器初始化成功')
|
||||
return true
|
||||
} catch (e) {
|
||||
@@ -87,137 +89,361 @@ export function useTTSPlayer(httpUrl) {
|
||||
// 降级使用InnerAudioContext
|
||||
console.log('🔄 微信小程序：背景音频不可用，降级使用InnerAudioContext')
|
||||
|
||||
if (!innerAudioContext) {
|
||||
innerAudioContext = uni.createInnerAudioContext()
|
||||
innerAudioContext.autoplay = false
|
||||
innerAudioContext.obeyMuteSwitch = false
|
||||
if (!this.innerAudioContext) {
|
||||
this.innerAudioContext = uni.createInnerAudioContext()
|
||||
this.innerAudioContext.autoplay = false
|
||||
this.innerAudioContext.obeyMuteSwitch = false
|
||||
|
||||
innerAudioContext.onPlay(() => {
|
||||
this.innerAudioContext.onPlay(() => {
|
||||
console.log('🎵 微信小程序InnerAudioContext播放开始')
|
||||
isSpeaking.value = true
|
||||
isPaused.value = false
|
||||
this.isSpeaking.value = true
|
||||
this.isPaused.value = false
|
||||
})
|
||||
|
||||
innerAudioContext.onPause(() => {
|
||||
this.innerAudioContext.onPause(() => {
|
||||
console.log('⏸️ 微信小程序InnerAudioContext播放暂停')
|
||||
isPaused.value = true
|
||||
this.isPaused.value = true
|
||||
})
|
||||
|
||||
innerAudioContext.onStop(() => {
|
||||
this.innerAudioContext.onStop(() => {
|
||||
console.log('⏹️ 微信小程序InnerAudioContext播放停止')
|
||||
isSpeaking.value = false
|
||||
isComplete.value = true
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = true
|
||||
})
|
||||
|
||||
innerAudioContext.onEnded(() => {
|
||||
this.innerAudioContext.onEnded(() => {
|
||||
console.log('🎵 微信小程序InnerAudioContext播放结束')
|
||||
isSpeaking.value = false
|
||||
isComplete.value = true
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = true
|
||||
})
|
||||
|
||||
innerAudioContext.onError((res) => {
|
||||
this.innerAudioContext.onError((res) => {
|
||||
console.error('❌ 微信小程序InnerAudioContext错误:', res.errMsg, '错误码:', res.errCode)
|
||||
isSpeaking.value = false
|
||||
isComplete.value = false
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = false
|
||||
})
|
||||
|
||||
innerAudioContext.onCanplay(() => {
|
||||
this.innerAudioContext.onCanplay(() => {
|
||||
console.log('🎵 微信小程序InnerAudioContext可以播放了')
|
||||
if (isSpeaking.value && !isPaused.value) {
|
||||
innerAudioContext.play()
|
||||
if (this.isSpeaking.value && !this.isPaused.value) {
|
||||
this.innerAudioContext.play()
|
||||
}
|
||||
})
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
const speak = async (text) => {
|
||||
// 停止当前播放
|
||||
stop()
|
||||
// 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
|
||||
|
||||
// #ifdef H5
|
||||
if (this.audioContext && !this.isSpeaking.value || this.isPaused.value) {
|
||||
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 {
|
||||
// 标记开始处理请求
|
||||
this.isProcessingRequest = true
|
||||
|
||||
// 提取要合成的文本
|
||||
const speechText = extractSpeechText(text)
|
||||
console.log('📤 Sending text to TTS server via GET:', speechText.substring(0, 100) + '...');
|
||||
|
||||
// 构建GET请求URL
|
||||
const url = `${httpUrl}?text=${encodeURIComponent(speechText)}`
|
||||
const url = `${this.httpUrl}?text=${encodeURIComponent(speechText)}`
|
||||
console.log('🔗 Final GET URL:', url);
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序环境，使用背景音频管理器
|
||||
const isBackgroundAudioAvailable = initAudioManager()
|
||||
const isBackgroundAudioAvailable = this.initAudioManager()
|
||||
|
||||
// 重置音频状态
|
||||
isSpeaking.value = true
|
||||
isPaused.value = false
|
||||
isComplete.value = false
|
||||
this.isSpeaking.value = true
|
||||
this.isPaused.value = false
|
||||
this.isComplete.value = false
|
||||
|
||||
if (isBackgroundAudioAvailable && backgroundAudioManager) {
|
||||
if (isBackgroundAudioAvailable && this.backgroundAudioManager) {
|
||||
console.log('🎵 微信小程序：使用背景音频管理器播放，URL:', url);
|
||||
|
||||
// 设置背景音频参数
|
||||
backgroundAudioManager.title = 'AI语音播报'
|
||||
backgroundAudioManager.singer = 'KS AI'
|
||||
backgroundAudioManager.coverImgUrl = '/static/icon/logo.png'
|
||||
this.backgroundAudioManager.title = 'AI语音播报'
|
||||
this.backgroundAudioManager.singer = 'KS AI'
|
||||
this.backgroundAudioManager.coverImgUrl = '/static/icon/logo.png'
|
||||
|
||||
// 直接设置src并播放
|
||||
backgroundAudioManager.src = url
|
||||
this.backgroundAudioManager.src = url
|
||||
console.log('🎵 微信小程序背景音频开始播放');
|
||||
} else {
|
||||
// 降级方案：使用InnerAudioContext
|
||||
console.log('🔄 微信小程序：背景音频不可用，降级使用InnerAudioContext');
|
||||
|
||||
// 如果已有音频上下文，先销毁再重新创建
|
||||
if (innerAudioContext) {
|
||||
innerAudioContext.destroy()
|
||||
innerAudioContext = null
|
||||
if (this.innerAudioContext) {
|
||||
this.innerAudioContext.destroy()
|
||||
this.innerAudioContext = null
|
||||
}
|
||||
|
||||
innerAudioContext = uni.createInnerAudioContext()
|
||||
innerAudioContext.autoplay = false
|
||||
innerAudioContext.obeyMuteSwitch = false
|
||||
innerAudioContext.volume = 1.0
|
||||
this.innerAudioContext = uni.createInnerAudioContext()
|
||||
this.innerAudioContext.autoplay = false
|
||||
this.innerAudioContext.obeyMuteSwitch = false
|
||||
this.innerAudioContext.volume = 1.0
|
||||
|
||||
innerAudioContext.onPlay(() => {
|
||||
this.innerAudioContext.onPlay(() => {
|
||||
console.log('🎵 微信小程序InnerAudioContext播放开始')
|
||||
isSpeaking.value = true
|
||||
isPaused.value = false
|
||||
this.isSpeaking.value = true
|
||||
this.isPaused.value = false
|
||||
})
|
||||
|
||||
innerAudioContext.onPause(() => {
|
||||
this.innerAudioContext.onPause(() => {
|
||||
console.log('⏸️ 微信小程序InnerAudioContext播放暂停')
|
||||
isPaused.value = true
|
||||
this.isPaused.value = true
|
||||
})
|
||||
|
||||
innerAudioContext.onStop(() => {
|
||||
this.innerAudioContext.onStop(() => {
|
||||
console.log('⏹️ 微信小程序InnerAudioContext播放停止')
|
||||
isSpeaking.value = false
|
||||
isComplete.value = true
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = true
|
||||
})
|
||||
|
||||
innerAudioContext.onEnded(() => {
|
||||
this.innerAudioContext.onEnded(() => {
|
||||
console.log('🎵 微信小程序InnerAudioContext播放结束')
|
||||
isSpeaking.value = false
|
||||
isComplete.value = true
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = true
|
||||
})
|
||||
|
||||
innerAudioContext.onError((res) => {
|
||||
this.innerAudioContext.onError((res) => {
|
||||
console.error('❌ 微信小程序InnerAudioContext错误:', res.errMsg, '错误码:', res.errCode)
|
||||
isSpeaking.value = false
|
||||
isComplete.value = false
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = false
|
||||
})
|
||||
|
||||
innerAudioContext.onCanplay(() => {
|
||||
this.innerAudioContext.onCanplay(() => {
|
||||
console.log('🎵 微信小程序InnerAudioContext可以播放了')
|
||||
if (isSpeaking.value && !isPaused.value) {
|
||||
innerAudioContext.play()
|
||||
if (this.isSpeaking.value && !this.isPaused.value) {
|
||||
this.innerAudioContext.play()
|
||||
}
|
||||
})
|
||||
|
||||
innerAudioContext.src = url
|
||||
this.innerAudioContext.src = url
|
||||
console.log('🎵 微信小程序InnerAudioContext开始播放');
|
||||
}
|
||||
// #endif
|
||||
@@ -225,21 +451,25 @@ export function useTTSPlayer(httpUrl) {
|
||||
// #ifdef H5
|
||||
// H5环境，使用 AudioContext
|
||||
try {
|
||||
// 创建新的AbortController，用于取消当前请求
|
||||
this.abortController = new AbortController();
|
||||
const signal = this.abortController.signal;
|
||||
|
||||
// 确保AudioContext已创建
|
||||
if (!audioContext) {
|
||||
if (!this.audioContext) {
|
||||
console.log('🎵 H5: 创建新的AudioContext');
|
||||
audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
||||
}
|
||||
|
||||
// 检查并恢复AudioContext状态（浏览器安全策略要求用户交互后才能播放音频）
|
||||
if (audioContext.state === 'suspended') {
|
||||
if (this.audioContext.state === 'suspended') {
|
||||
console.log('🎵 H5: 恢复挂起的AudioContext');
|
||||
await audioContext.resume();
|
||||
console.log('✅ H5: AudioContext已恢复，状态:', audioContext.state);
|
||||
await this.audioContext.resume();
|
||||
console.log('✅ H5: AudioContext已恢复，状态:', this.audioContext.state);
|
||||
}
|
||||
|
||||
// 发送GET请求获取语音数据
|
||||
const response = await fetch(url)
|
||||
// 发送GET请求获取语音数据，添加signal支持取消
|
||||
const response = await fetch(url, { signal })
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
@@ -250,277 +480,101 @@ export function useTTSPlayer(httpUrl) {
|
||||
|
||||
try {
|
||||
// 直接使用 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);
|
||||
|
||||
// 播放音频
|
||||
playDecodedAudio(decoded)
|
||||
this.playDecodedAudio(decoded)
|
||||
} catch (decodeError) {
|
||||
console.error('❌ H5: AudioContext decodeAudioData failed:', decodeError);
|
||||
// 降级处理：创建一个简单的音频缓冲区
|
||||
createFallbackAudio(arrayBuffer)
|
||||
this.createFallbackAudio(arrayBuffer)
|
||||
}
|
||||
} 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);
|
||||
// 尝试使用HTML5 Audio元素作为最终降级方案
|
||||
try {
|
||||
console.log('🔄 H5: 尝试使用HTML5 Audio元素播放');
|
||||
|
||||
// 如果已有Audio元素，先停止并销毁
|
||||
if (this.htmlAudioElement) {
|
||||
this.htmlAudioElement.pause();
|
||||
this.htmlAudioElement.src = '';
|
||||
this.htmlAudioElement = null;
|
||||
}
|
||||
|
||||
const audio = new Audio(url);
|
||||
this.htmlAudioElement = audio;
|
||||
audio.play();
|
||||
console.log('✅ H5: HTML5 Audio元素开始播放');
|
||||
|
||||
// 设置音频状态
|
||||
isSpeaking.value = true;
|
||||
isPaused.value = false;
|
||||
isComplete.value = false;
|
||||
this.isSpeaking.value = true;
|
||||
this.isPaused.value = false;
|
||||
this.isComplete.value = false;
|
||||
|
||||
// 监听播放结束
|
||||
audio.onended = () => {
|
||||
console.log('🎵 H5: HTML5 Audio播放结束');
|
||||
isSpeaking.value = false;
|
||||
isComplete.value = true;
|
||||
this.isSpeaking.value = false;
|
||||
this.isComplete.value = true;
|
||||
this.htmlAudioElement = null;
|
||||
};
|
||||
|
||||
// 监听播放错误
|
||||
audio.onerror = (error) => {
|
||||
console.error('❌ H5: HTML5 Audio播放错误:', error);
|
||||
isSpeaking.value = false;
|
||||
isComplete.value = false;
|
||||
this.isSpeaking.value = false;
|
||||
this.isComplete.value = false;
|
||||
this.htmlAudioElement = null;
|
||||
};
|
||||
} catch (audioError) {
|
||||
console.error('❌ H5: HTML5 Audio播放也失败了:', audioError);
|
||||
isSpeaking.value = false;
|
||||
isComplete.value = false;
|
||||
this.isSpeaking.value = false;
|
||||
this.isComplete.value = false;
|
||||
this.htmlAudioElement = null;
|
||||
}
|
||||
} finally {
|
||||
// 清除AbortController，因为请求已经完成（无论成功还是失败）
|
||||
this.abortController = null;
|
||||
}
|
||||
// #endif
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ TTS synthesis failed:', error);
|
||||
isSpeaking.value = false
|
||||
isComplete.value = false
|
||||
this.isSpeaking.value = false
|
||||
this.isComplete.value = false
|
||||
} finally {
|
||||
// 标记请求处理完成
|
||||
this.isProcessingRequest = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #ifdef H5
|
||||
const playDecodedAudio = (decoded) => {
|
||||
if (!audioContext) return;
|
||||
|
||||
// 创建音频源
|
||||
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');
|
||||
// 导出单例hook
|
||||
export function useTTSPlayer(httpUrl) {
|
||||
// 如果已经有实例，直接返回
|
||||
if (!ttsInstance) {
|
||||
ttsInstance = new TTSPlayer(httpUrl)
|
||||
}
|
||||
|
||||
// 降级处理：创建一个简单的音频缓冲区
|
||||
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 {
|
||||
speak,
|
||||
pause,
|
||||
resume,
|
||||
cancelAudio,
|
||||
isSpeaking,
|
||||
isPaused,
|
||||
isComplete
|
||||
speak: ttsInstance.speak.bind(ttsInstance),
|
||||
pause: ttsInstance.pause.bind(ttsInstance),
|
||||
resume: ttsInstance.resume.bind(ttsInstance),
|
||||
cancelAudio: ttsInstance.cancelAudio.bind(ttsInstance),
|
||||
isSpeaking: ttsInstance.isSpeaking,
|
||||
isPaused: ttsInstance.isPaused,
|
||||
isComplete: ttsInstance.isComplete
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -794,29 +794,10 @@ function readMarkdown(value, index) {
|
||||
clearTimeout(ttsDebounceTimer);
|
||||
}
|
||||
|
||||
// 如果当前正在播放其他消息，先停止
|
||||
if (speechIndex.value !== index && speechIndex.value !== 0) {
|
||||
console.log('🛑 Stopping current speech and starting new one');
|
||||
speechIndex.value = index;
|
||||
speak(value);
|
||||
return;
|
||||
}
|
||||
|
||||
// 总是先停止当前播放，无论是不是同一消息
|
||||
console.log('🛑 Always stopping current speech before starting new one');
|
||||
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
|
||||
ttsDebounceTimer = setTimeout(() => {
|
||||
console.log('🎵 Starting new speech');
|
||||
|
||||
Reference in New Issue
Block a user