JS实现将网页文字转换为语音并自动播放（浏览器要支持HTML5） - NOTEBOOK
JS实现将网页文字转换为语音并自动播放（浏览器要支持HTML5）
JS / HTMLPosted on 2023-10-07
摘要 : JS实现将网页文字转换为语音并自动播放，如果浏览器没有语音包，就只能用默认语言读出。
粗略测试，Mac下Chrome支持volume、pitch两个参数，语速rate不支持；Firefox和Safari对volume、rate和pitch三个参数都不支持。
SpeechSynthesisUtterance 表示一次发音请求，其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。
它有6个属性，分别如下：
lang：读取时的语言
pitch：声音的音高，取值0~2 ，正常音高为1
rate：读取的语速，取值0.1~10 ，正常语速值为1
text：要合成语音的文字内容
voice：读取文字的语音服务，默认为 SpeechSynthesisVoice 的属性值为 default 的那个
volume：读取时声音的音量，取值0~1，正常音量为1
除了上面的属性外，还有7个事件方法，分别如下：
onboundary：当播放至一个词或句子结尾时触发
onend：语音播放结束时触发
onerror：语音播放错误时触发
onmark：当语音播放至 mark 标记时触发
onpause：暂停语音播放时触发
onresume：恢复语音播放时触发
onstart：开始语音播放时触发
自定义函数 saytext
❱ 直接使用浏览器默认语言读出内容（使用了jQuery）
<textarea id="atext" style="width:400px;height:200px;"></textarea>
<input type="submit" id="submit" value="submit"/>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
saytext($('#atext').val());
// console.log($('#atext').val());
});
// 语音function
function saytext(atext){
let synth = window.speechSynthesis;
let utterThis = new SpeechSynthesisUtterance(atext);
synth.speak(utterThis);
}
});
</script>
❱ 可以使用不同语言的function，并且支持播放前/后调用函数
// 使用浏览器自带语音，读出一段话。
function saytext(text,endEvent,startEvent,lang){
if (!window.SpeechSynthesisUtterance) {
console.warn('当前浏览器不支持文字转语音服务')
return 0;
}
if (!text) {return 0;}
let synth = window.speechSynthesis;
let utterThis = new SpeechSynthesisUtterance();
utterThis.text = text; // 要合成的文字内容，字符串
// utterThis.rate = speechRate || 10; //读取文字的语速 0.1~10 正常1
utterThis.lang = lang || 'zh-CN'; // zh-HK zh-TW 读取文字时的语言
// utterThis.volume = volume || 1; //读取时声音的音量 0~1 正常1
// utterThis.pitch = pitch || 1; //读取时声音的音高 0~2 正常1
utterThis.onend = function() {
endEvent && endEvent();
};
utterThis.onstart = function() {
startEvent && startEvent();
};
synth.speak(utterThis); // 发音
console.log(synth.getVoices()); // 浏览器支持的语言
return utterThis;
}
❱ 使用例子
saytext('微信到账100元',
function(){console.log('语音播放结束');},
function(){console.log('语音开始播放');}
);
❱ speechSynthesis 接口
speak(SpeechSynthesisUtterance)- 这个方法应该传递一个实例SpeechSynthesisUtterance。然后它会将此添加到需要说出的话语队列中。
cancel() - 此方法将从队列中删除所有话语。如果当前正在说话，那么它将被停止。
pause() - 此方法将立即暂停正在讲话的任何话语。
resume() - 此方法将使浏览器恢复说出先前暂停的话语。
getVoices() - 此方法返回浏览器支持的所有语音的列
speechSynthesis属性 默认是false
pending-true 如果队列中有尚未开始说话的话语。
speaking- true 如果当前正在说话。
paused- true 如果当前暂停了话语。
SpeechSynthesisVoice 属性
name - 描述语音的人类可读名称。
voiceURI - 指定该语音的语音合成服务的位置的URI。
lang - 此语音的语言代码。
default- true如果这是浏览器使用的默认语音，则设置为。
localService - API可以使用本地和远程服务来处理语音合成。如果此属性设置为true语音合成，则此语音由本地服务处理。如果false是正在使用的远程服务。
❱ 链接
JS实现将文字转换为语音并自动播放Speech Synthesis API入门HTML5语音合成Speech Synthesis API简介JS中的语音合成-Speech Synthesis APIChromium 语音合成接口 SpeechSynthesis 实现分析speechSynthesis强制使用Chrome中的Google小姐中文语音SpeechSynthesizer 类