ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

vue3 语音播报流程

2026/8/4 7:53:52 拓冰建站 浏览量
vue3 语音播报流程

npm 安装  "speak-tts": "^2.0.8",

npm install speak-tts

在vue文件中引用

import Speech from "speak-tts";
const speech = ref(null);onMounted(() => {speechInit();
});//语音播报初始化
const speechInit = () => {speech.value = new Speech();speech.value.setLanguage("zh-CN");speech.value.init({volume: 0.6, // 音量0-1lang: "zh-CN", // 语言rate: 1, // 语速1正常语速,2倍语速就写2pitch: 1, // 音调voice: "Microsoft Yaoyao - Chinese (Simplified, PRC)",listeners: {// 事件onvoiceschanged: (voices) => {// console.log('事件声音已更改', voices);},},});
};speech.value.speak({ text: "语音播报" });    //正常播放speech.value.cancel();                      //取消播放speech.value.pause();                       //暂停播放speech.value.resume();                      //从暂停的地方恢复播放