一、前言
前一段时间在项目中需要用到播报文字语音。找到了 HTML 5 有这样的功能。
现在有时间进行总结下。
二、SpeechSynthesis
SpeechSynthesis 接口是语音服务的控制接口。它可以用于获取设备上关于可用的合成声音的信息,
开始、暂停语音,或者别的命令。(MDN)
SpeechSynthesis 是 window 上面的属性,可以直接调用。
属性:
下面的都是只读属性
paused:是否处于暂停状态,返回 Boolean 值
pending:语音播报队列中是否有需要说的语音,返回 Boolean 值
speaking:是否正在进行语音播报(包括暂停状态),返回 Boolean 值
事件:
onvoiceschanged:当 getVoices 返回的 voices 列表改变时触发
方法:
cancel:移除所有语音播报队列中的语音
getVoices:返回当前设备可用的声音列表
pause:暂停语音播报
resume:把对象设置为非暂停状态,如果是暂停就继续
speak:添加一个 utterance 到语音播报队列,会在其他语音播报后播报
三、SpeecheSynthesisUtterance
SpeecheSynthesisUtterance 是语音请求的一个类。需要实例化才可以使用。
它包含语音要阅读的内容以及如何阅读(例如语言、音调、音量等)
属性:
lang:读取或设置当前要阅读的语音
pitch:读取或设置阅读的音调
rate:读取或设置阅读的语速
text:读取或设置阅读的内容
voice:读取或设置阅读的声音(不同的浏览器有不同内置的人声)
volume:读取或设置阅读的音量
事件:
boundary:当阅读到单词或句子的边界时触发
end:当阅读结束时触发
error:当阅读报错时触发
mark:当阅读到 SSML 标记时触发
pause:当阅读暂停时触发
resume:当阅读设置为非暂停时触发
start:开始阅读时触发
上面的事件都是用 addEventListenter 绑定事件,同时也可以用对应的 onEventname 绑定事件
四、示例
上面两个 API 可以满足基本的语音播报需要了,下面就是一个示例
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8" />
meta http-equiv="X-UA-Compatible" content="IE=edge" />
meta name="viewport" content="width=device-width, initial-scale=1.0" />
title>语音合成title>
style>
/* input{
width: 500px;
height: 200px;
} */
style>
head>
body>
div>
h3>
a href="https://blog.csdn.net/yb305/article/details/111219007" target="_blank">
语音合成使用 文字语音播报
a>
h3>
h3>
a href="https://www.jianshu.com/p/92dec635f6c5" target="_blank">
HTML5语音合成Speech Synthesis API简介
a>
h3>
textarea rows="5" cols="100" id="input" placeholder="请输入内容">textarea>
div>
p>
label>语言:label>
select id="lange">
option value="zh-cn" selected>中文option>
option value="en-US">英文option>
select>
p>
p>
label>音量:label>input type="range" min="0" max="1" step="0.1" id="volume" />
p>
p>
label>音速:label>input type="range" min="0" max="10" step="0.1" id="rate" />
p>
p>
label>音色:label>input type="range" min="0" max="2" step="0.1" id="pitch" />
p>
div>
div>
button type="button" id="submit">播报button>
button type="button" id="suspend">暂停button>
button type="button" id="recovery">恢复button>
button type="button" id="stop">停止button>
div>
div>
script>
// 1.获取input框输入的内容
function getValue() {
//定义全局对象
const obj = {
text: "",
lange: "zh-cn",
volume: 1,
rate: 1,
pitch: 1,
};
//点击“播报”按钮
const Dom = document.getElementById("submit");
Dom.onclick = function () {
const value = document.getElementById("input").value;
if (!value) return;
console.log("点击获取内容1", value);
obj.text = value;
speeck(obj);
};
//按下回车键按钮
window.onkeyup = function (e) {
// console.log("e",e);
const value = document.getElementById("input").value;
if (e.keyCode !== 13 || !value) return;
console.log("回车获取内容2", value);
obj.text = value;
speeck(obj);
};
//暂停播报
const suspend = document.getElementById("suspend");
suspend.onclick = function () {
window.plays.pause(); //暂停
};
//恢复播报
const recovery = document.getElementById("recovery");
recovery.onclick = function () {
window.plays.resume(); //恢复
};
//停止播报
const stop = document.getElementById("stop");
stop.onclick = function () {
window.plays.cancel(); //停止
};
//选择语言
const lange = document.getElementById("lange");
lange.onchange = function (v) {
console.log("选择语言", v);
console.log("选择语言-2", v.target.value);
ob服务器托管网j.lange = v.target.value;
speeck(obj);
};
//选择音量
const volume = document.getElementById("volume");
volume.onchange = function (v) {
console.log("选择音量", v.target.value);
obj.volume = v.target.value;
speeck(obj);
};
//选择音速
const rate = document.getElementById("rate");
rate.onchange = function (v) {
console.log("选择音速", v.target.value);
obj.rate = v.target.value;
speeck(obj);
};
//选择音色
const pitch = document.getElementById("pitch");
pitch.onclick = function (v) {
console.log("选择音色", v.target.value);
obj.pitch = v.target.value;
speeck(obj);
};
}
//调用执行
getValue();
//2.语音播报
function speeck(data) {
console.log("播报时", data);
//SpeechSynthesisUtterance对象,主要用来构建语音合成实例
window.voice = new window.SpeechSynthesisUtterance();
// 对象合成方法
Object.assign(window.voice, data)
//speechSynthesis对象,主要作用是触发行为,例如读,停,还原
wind服务器托管网ow.plays = window.speechSynthesis;
window.plays.speak(window.voice);
}
script>
body>
html>
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 解密C语言选择结构:掌握条件语句与分支逻辑的利器
✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 养成好习惯,先赞后看哦~ 所属专栏:C语言学习 贝蒂的主页:Betty‘s blog 引言 C语⾔是结构化的程序设计语⾔,这⾥的结构指的是顺序结构、选择结构、循环结构。为什么有着三种结构呢,大家其实可以想象一下,生活中的绝大数…