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 播放开始的回调