diff --git a/index.js b/index.js index 85eb260..a1f131a 100644 --- a/index.js +++ b/index.js @@ -76,7 +76,7 @@ function changeBtnStatus(status) { btnStatus = status if (status === 'CONNECTING') { btnControl.innerText = '建立连接中' - document.getElementById('result').innerText = '' + // document.getElementById('result').innerText = '' resultText = '' resultTextTemp = '' } @@ -114,8 +114,8 @@ function renderResult(resultData) { else { resultText = resultText + str } - document.getElementById('result').innerText - = resultTextTemp || resultText || '' + // document.getElementById('result').innerText + // = resultTextTemp || resultText || '' console.log('录音结果:', resultTextTemp || resultText || '') window.winText = resultTextTemp || resultText || '' window.dispatchEvent(new Event('test')) diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue index 6f595d5..3021d3a 100644 --- a/src/views/chat/components/Message/index.vue +++ b/src/views/chat/components/Message/index.vue @@ -91,12 +91,14 @@ async function handleCopy() { message.error('复制失败') } } - +const playStatus = ref('end') let playing = 0 +let sok = false async function radioPlay() { console.log('播放', props.mp3) - audioElements = [] + audioElements.length = 0 const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts') + sok = true const promise = () => { return new Promise((resolve, reject) => { @@ -111,19 +113,31 @@ async function radioPlay() { await promise() + socket.onerror = (event: any) => { sok = false; console.log('连接错误事件: ', event); console.log('sok状态', sok); + } + // 监听WebSocket关闭事件 socket.onclose = (event: any) => { - console.log('连接已关闭: ', event) + sok = false + console.log('连接已关闭: ', event, sok) + console.log('sok状态', sok); } + // socket.send(JSON.stringify({ + // data: '快。科。技0月12。日消息。不宣而发的。华为Mate 60在上架官方商城后。直到现在都处于一机难求的状态。由于Mate 60系列的爆火。华为也是将明年的预计手机出货量翻倍到了7000万台。', + // })) socket.send(JSON.stringify({ - data: '快。科。技0月12。日消息。不宣而发的。华为Mate 60在上架官方商城后。直到现在都处于一机难求的状态。由于Mate 60系列的爆火。华为也是将明年的预计手机出货量翻倍到了7000万台。', + data: props.text, })) + playStatus.value = 'playing' let i = 0 // 监听WebSocket接收消息事件 socket.onmessage = (event: any) => { const msg = JSON.parse(event.data) console.log(i, msg.mp3) + if(msg.key=='false'){ + return socket.close(); + } const a = new Audio(msg.mp3) a.addEventListener('ended', () => { onAudioEnd() @@ -154,6 +168,7 @@ const onAudioEnd = (index: any) => { playFlag = true audioElements[playing].play() } + else { playStatus.value = 'end' } } // 创建音频对象的数组 const audioElements = reactive([]) @@ -164,15 +179,27 @@ const playAudio = (playIndex: any) => { } watch(() => audioElements.length, (newVal, oldVal) => { - if (newVal > playing && playFlag == false && newVal > 0) + if (playStatus.value == 'pause') + return + if (newVal > playing && playFlag == false && newVal > 0) { audioElements[playing].play() + playStatus.value = 'playing' + } }) +let pauseIndex = -1 // 暂停音频 const pauseAudio = () => { + pauseIndex = playing + 0 + playStatus.value = 'pause' for (let i = 0; i < audioElements.length; i++) audioElements[i].pause() } +const noPauseAudio = () => { + playStatus.value = 'playing' + audioElements[pauseIndex].play() + pauseIndex = -1 +}