官网网址：链接
- 基础使用：
var msg = new SpeechSynthesisUtterance("测试");
//msg.rate = 4 播放语速
//msg.pitch = 10 音调高低
//msg.text = "播放文本"
//msg.volume = 0.5 播放音量
window.speechSynthesis.speak(msg);- 基础方法：
//播放
window.speechSynthesis.speak();
//暂停
window.speechSynthesis.pause();
//继续
window.speechSynthesis.resume();
//停止
window.speechSynthesis.cancel();- demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语音朗读</title>
<style>
body{
padding: 20px;
}
textarea{
width: 100%;
height: 260px;
}
</style>
</head>
<body>
<textarea name="" cols="30" rows="10" id="sppekContent" placeholder="输入一些内容试试..."></textarea>
<a href="javascript:;" id="du">朗读</a>
<a href="javascript:;" id="zanting">暂停</a>
<a href="javascript:;" id="chongxing">重新开始</a>
<a href="javascript:;" id="stop">停止</a>
<script>
window.onload=function () {
/**
* @returns {{start: start, pause: pause, resume: resume, stop: stop}}
*/
function speek(){
let speechInstance = new SpeechSynthesisUtterance();
// console.log(speechInstance);
// console.log(speechSynthesis.getVoices());
return {
/**
* @param opitions {container:'',Lang:''}
*/
start:function (opitions) {
let container=opitions.container;
let lang=opitions.Lang===undefined||""?"zh-CN":opitions.Lang;
let content=document.querySelector(container).value;
if(content!='') {
speechInstance.text = content;
speechInstance.lang = lang;
speechSynthesis.speak(speechInstance);
}else{
console.log("请输入内容");
}
},
pause:function () {
speechSynthesis.pause();//暂停
},
resume:function(){
speechSynthesis.resume();//重新开始
},
stop:function () {
speechSynthesis.cancel();//结束
}
}
}
document.querySelector("#du").onclick=function () {
speek().start({container:"#sppekContent",Lang:''});
};
document.querySelector("#zanting").onclick=function () {
speek().pause();
};
document.querySelector("#chongxing").onclick=function () {
speek().resume();
};
document.querySelector("#stop").onclick=function () {
speek().stop();
}
}
</script>
</body>
</html>常见问题：
- win7 系统无法播放语音，可到控制面板-语音设置播放声音的音色。安装windows7不完整版可能导致tts组件丢失，需要安装语音包或者进行修复。
- 新版Google浏览器无法主动播放声音，可更换浏览器，qq或者360浏览器，可以设置Google开启声音。
- 在google chrome 89版本之后 默认使用的线上服务来合成语音 所以在国内可能会没有声音
解决办法 ： 通过getVoices 获取 localService为true 的字段 （localService = true 表示 使用本地合成服务）
getWindowVoice(){ // 获取浏览器中语音 (中文 + 本地服务)
return window.speechSynthesis.getVoices().find(item => item.localService && item.lang === 'zh-CN')
}- google chrome 播放语音可能会卡住 所以无声音
解决办法 : 在播放语音之前先 调用一下cancel方法
window.speechSynthesis.cancel()
播放和停止函数
// 语音停止
handleStop(e) {
if(window.speechSynthesis){
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
msg.text = e;
msg.lang = "zh-CN";
synth.cancel(msg);
}
},
// 语音播报的函数
handleSpeak(text='你好啊!'){
if(window.speechSynthesis){
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
msg.text = text; // 文字内容
msg.lang = "zh-CN"; // 使用的语言:中文
msg.volume = 1; // 声音音量：1
msg.rate = 1; // 语速：1
msg.pitch = 1; // 音高：1
msg.voice = this.getWindowVoice() // 使用本地服务合成语音(若是获取不到 请异步获取, 加一个setTimeout)
synth.speak(msg); // 播放
}
},
