音频bug修复
This commit is contained in:
@@ -8,7 +8,6 @@ import {
|
|||||||
onHide,
|
onHide,
|
||||||
onUnload
|
onUnload
|
||||||
} from '@dcloudio/uni-app'
|
} from '@dcloudio/uni-app'
|
||||||
import WavDecoder from '@/lib/wav-decoder@1.3.0.js'
|
|
||||||
|
|
||||||
export function useTTSPlayer(httpUrl) {
|
export function useTTSPlayer(httpUrl) {
|
||||||
const isSpeaking = ref(false)
|
const isSpeaking = ref(false)
|
||||||
@@ -23,22 +22,55 @@ export function useTTSPlayer(httpUrl) {
|
|||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
const audioContext = null // 微信小程序不支持 AudioContext
|
const audioContext = null // 微信小程序不支持 AudioContext
|
||||||
|
let innerAudioContext = null // 微信小程序音频上下文
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
let currentAudioBuffer = null
|
let currentAudioBuffer = null
|
||||||
let currentSource = null
|
let currentSource = null
|
||||||
let playTimeOffset = 0
|
let playTimeOffset = 0
|
||||||
|
|
||||||
const speak = async (text) => {
|
// 初始化微信小程序音频上下文
|
||||||
if (!audioContext) {
|
// #ifdef MP-WEIXIN
|
||||||
console.warn('⚠️ TTS not supported in current environment');
|
const initInnerAudioContext = () => {
|
||||||
return;
|
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()
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
console.log('🎤 TTS speak function called');
|
const speak = async (text) => {
|
||||||
console.log('📝 Text to synthesize:', text ? text.substring(0, 100) + '...' : 'No text');
|
|
||||||
console.log('🔗 HTTP URL:', httpUrl);
|
|
||||||
|
|
||||||
// 停止当前播放
|
// 停止当前播放
|
||||||
stop()
|
stop()
|
||||||
|
|
||||||
@@ -51,6 +83,21 @@ export function useTTSPlayer(httpUrl) {
|
|||||||
const url = `${httpUrl}?text=${encodeURIComponent(speechText)}`
|
const url = `${httpUrl}?text=${encodeURIComponent(speechText)}`
|
||||||
console.log('🔗 Final GET URL:', url);
|
console.log('🔗 Final GET URL:', url);
|
||||||
|
|
||||||
|
// #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请求获取语音数据
|
// 发送GET请求获取语音数据
|
||||||
const response = await fetch(url)
|
const response = await fetch(url)
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
@@ -61,12 +108,21 @@ export function useTTSPlayer(httpUrl) {
|
|||||||
const arrayBuffer = await response.arrayBuffer()
|
const arrayBuffer = await response.arrayBuffer()
|
||||||
console.log('✅ Received audio data, size:', arrayBuffer.byteLength + ' bytes');
|
console.log('✅ Received audio data, size:', arrayBuffer.byteLength + ' bytes');
|
||||||
|
|
||||||
// 解码音频数据
|
try {
|
||||||
const decoded = await WavDecoder.decode(arrayBuffer)
|
// 直接使用 audioContext.decodeAudioData 解码,不依赖外部库
|
||||||
console.log('✅ Audio decoded, sampleRate:', decoded.sampleRate, 'channels:', decoded.channelData.length);
|
const decoded = await audioContext.decodeAudioData(arrayBuffer)
|
||||||
|
console.log('✅ Audio decoded, sampleRate:', decoded.sampleRate, 'channels:', decoded.numberOfChannels);
|
||||||
|
|
||||||
// 播放音频
|
// 播放音频
|
||||||
playDecodedAudio(decoded)
|
playDecodedAudio(decoded)
|
||||||
|
} catch (decodeError) {
|
||||||
|
console.error('❌ AudioContext decodeAudioData failed:', decodeError);
|
||||||
|
// 降级处理:创建一个简单的音频缓冲区
|
||||||
|
createFallbackAudio(arrayBuffer)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('❌ TTS synthesis failed:', error);
|
console.error('❌ TTS synthesis failed:', error);
|
||||||
isSpeaking.value = false
|
isSpeaking.value = false
|
||||||
@@ -74,18 +130,13 @@ export function useTTSPlayer(httpUrl) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// #ifdef H5
|
||||||
const playDecodedAudio = (decoded) => {
|
const playDecodedAudio = (decoded) => {
|
||||||
if (!audioContext) return;
|
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 = audioContext.createBufferSource()
|
||||||
currentSource.buffer = audioBuffer
|
currentSource.buffer = decoded
|
||||||
currentSource.connect(audioContext.destination)
|
currentSource.connect(audioContext.destination)
|
||||||
|
|
||||||
// 监听播放结束
|
// 监听播放结束
|
||||||
@@ -100,11 +151,42 @@ export function useTTSPlayer(httpUrl) {
|
|||||||
isSpeaking.value = true
|
isSpeaking.value = true
|
||||||
isPaused.value = false
|
isPaused.value = false
|
||||||
isComplete.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 = () => {
|
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');
|
console.warn('⚠️ Cannot pause TTS playback');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -118,10 +200,20 @@ export function useTTSPlayer(httpUrl) {
|
|||||||
playTimeOffset = audioContext.currentTime
|
playTimeOffset = audioContext.currentTime
|
||||||
console.log('✅ Audio paused successfully');
|
console.log('✅ Audio paused successfully');
|
||||||
}
|
}
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
const resume = () => {
|
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');
|
console.warn('⚠️ Cannot resume TTS playback');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -133,6 +225,7 @@ export function useTTSPlayer(httpUrl) {
|
|||||||
isPaused.value = false
|
isPaused.value = false
|
||||||
console.log('✅ Audio resumed successfully');
|
console.log('✅ Audio resumed successfully');
|
||||||
}
|
}
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
const cancelAudio = () => {
|
const cancelAudio = () => {
|
||||||
@@ -142,6 +235,18 @@ export function useTTSPlayer(httpUrl) {
|
|||||||
const stop = () => {
|
const stop = () => {
|
||||||
console.log('⏹️ TTS stop called');
|
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) {
|
if (currentSource) {
|
||||||
try {
|
try {
|
||||||
currentSource.stop()
|
currentSource.stop()
|
||||||
@@ -159,6 +264,7 @@ export function useTTSPlayer(httpUrl) {
|
|||||||
console.error('❌ Error suspending audio context:', e);
|
console.error('❌ Error suspending audio context:', e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// #endif
|
||||||
|
|
||||||
isSpeaking.value = false
|
isSpeaking.value = false
|
||||||
isPaused.value = false
|
isPaused.value = false
|
||||||
|
|||||||
@@ -283,7 +283,7 @@ import {
|
|||||||
getCurrentInstance,
|
getCurrentInstance,
|
||||||
} from 'vue';
|
} from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
// import config from '@/config.js';
|
// 移除重复导入,使用从globalFunction注入的config
|
||||||
import useChatGroupDBStore from '@/stores/userChatGroupStore';
|
import useChatGroupDBStore from '@/stores/userChatGroupStore';
|
||||||
import MdRender from '@/components/md-render/md-render.vue';
|
import MdRender from '@/components/md-render/md-render.vue';
|
||||||
import CollapseTransition from '@/components/CollapseTransition/CollapseTransition.vue';
|
import CollapseTransition from '@/components/CollapseTransition/CollapseTransition.vue';
|
||||||
|
|||||||
Reference in New Issue
Block a user