Nuxt3中按钮点击无法调用组合式函数内SpeechSynthesis的问题

核心问题 #

• 作用域限制：speak函数定义在if (import.meta.client)代码块内部，属于局部变量，模板无法访问该函数，导致按钮点击无响应。
• 语音实例复用问题：同一个SpeechSynthesisUtterance实例重复调用speak可能无法正常播放，需要确保每次调用都能正确触发语音合成。

修正后的代码 #

页面组件代码

<script setup>
const count = ref(0);
const mySpeakExt = () => {
    count.value++
}

// 将speak变量提升到外部作用域，确保模板能访问
let speak;

if (import.meta.client) {
    const { mySpeak } = compBldSpeak()
    mySpeak() // 初始化时正常播放
    
    speak = () => {
        count.value++
        mySpeak()
    }
}
</script>

<template>
    <p>page speak</p>
    <button @click="mySpeakExt"> myCount</button>
    <p>{{ count }}</p>
    <button @click="speak"> speak</button>
</template>

组合式函数优化（composables/compBldSpeak.js）

export const compBldSpeak = () => {
    // 每次调用mySpeak时创建新的语音实例，避免复用异常
    function mySpeak() {
        const utterance = new SpeechSynthesisUtterance("Hello hello hello")
        window.speechSynthesis.speak(utterance)
    }
    return { mySpeak } // 无需返回utterance，内部创建即可
}

额外说明 #

• 把speak变量声明在if块外部，确保模板能访问到函数引用。
• 组合式函数中将utterance的创建移到mySpeak内部，每次调用都会生成新的语音实例，避免重复调用时的播放失败。
• 确认浏览器支持SpeechSynthesis API，且当前页面无静音、权限限制等问题。

内容的提问来源于stack exchange，提问作者neale cook