SpeechSynthesisUtterance 语音合成使用在vue3项目中运用

<template>
  <button @click="playVoice">点击进行播报</button>
</template>
<script setup>
const synth = window.speechSynthesis;
const speech = new SpeechSynthesisUtterance();
function playVoice() {
  handleSpeak("如果能播放出声音 那可真是泰裤辣！"); // 传入需要播放的文字
}
function handleSpeak(text) {
  speech.text = text; // 文字内容: 如果能播放出声音 那可真是泰裤辣！
  speech.lang = "zh-CN"; // 使用的语言:中文
  speech.volume = 1; // 声音音量：1
  speech.rate = 1; // 语速：1
  speech.pitch = 1; // 音高：1
  synth.speak(speech); // 播放
}
function handleStop(e) {
  speech.text = e;
  speech.lang = "zh-CN";
  synth.cancel(speech);
}
</script>

基本属性

let speech = new SpeechSynthesisUtterance()

• speech.lang 获取并设置话语的语言（en-US、zh-CN）
• speech.pitch 获取并设置话语的音调(值越大越尖锐，range:0-2, default:1, float)
• speech.rate 获取并设置说话的速度 (值越大语速越快,range:0.1-10, default:1, float)
• speech.text 获取并设置说话时的文本
• speech.voice 获取并设置说话的声音
• speech.volume 获取并设置说话的音量 (range: 0-1, default:1, float)
• speech.onboundary 当播放至一个词或句子结尾时触发
• speech.onend 播放结束的回调
• speech.onerror 播放出现错误的回调
• speech.onmark 当读到标记文本时的回调
• speech.onpause 播放暂停
• speech.onresume 播放重启
• speech.onstart 播放开始的回调