基于 Web Speech API 实现网页上的语音合成和语音识别功能

内部账号发布于 2025-10-10 15:27 阅读：37 私有分类
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <title>基于 Web Speech API 实现网页上的语音合成和语音识别功能</title>

<script>

function firstDemo(){
// 获取语音合成对象
const synth = window.speechSynthesis;
// 创建一个语音合成实例，并设置要朗读的文本
var demoStr ='这是一个简单的语音合成测试。';
var book1 =document.getElementById('book1').value;
if(book1!=''){
demoStr=book1;
}
const utterance = new SpeechSynthesisUtterance(demoStr);
utterance.lang = "zh-CN";

// 设置语速，取值范围通常在 0.1 到 10 之间，这里设置为 0.8 倍速
utterance.rate = 0.9;

// 设置语调，取值范围一般在 0 到 2 之间，这里设为 1.5
utterance.pitch = 1.2;

// 设置音量，取值范围从 0 到 1，这里设为 0.5
utterance.volume = 1;
// 语音开始播放事件监听
utterance.onstart = function() {
  console.log('语音开始播放');
};
// 语音暂停事件监听
utterance.onpause = function() {
  console.log('语音暂停');
};
// 语音结束事件监听
utterance.onend = function() {
  console.log('语音结束');
};

// 触发语音合成并播放
synth.speak(utterance);

}
</script>
</head>
<input type="button" value = "简单测试" onclick="firstDemo()">
<br>
<hr>
<br>
<textarea id="book1" style="width=1000px;height: 200px;"></textarea>
<input type="button" value = "输入阅读" onclick="firstDemo()">