最少的代码实现语音播放
let spee = window.speechSynthesis
var utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js');
spee.speak(utterThis);
兼容问题
speechSynthesis 网页语音 API 的SpeechSynthesis 接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。
[属性
当SpeechSynthesis 处于暂停状态时 值返回 true
当语音播放队列到目前为止保持没有说完的语音时 值返回 true
当语音谈话正在进行的时候，即使SpeechSynthesis处于暂停状态 值返回 true
speechSynthesis 方法
speechSynthesis.getVoices() 获取当前设备所有可用声音的
let spee = window.speechSynthesis;
let voices = spee.getVoices();
// 过滤出中文
const zhList = voices.filter(item=>item.lang.includes('zh-'))
console.log(zhList);
for (let i = 0; i < zhList.length; i++) {
console.log(zhList[i].name + ' (' + zhList[i].lang + ')');
}
speechSynthesis.cancel() 移除当前播放语音
let spee = window.speechSynthesis;
spee.cancel()
SpeechSynthesis.pause()
SpeechSynthesis 接口的 pause() 方法将 SpeechSynthesis 对象置于暂停状态。
let spee = window.speechSynthesis;
spee.pause()
SpeechSynthesis.resume()
SpeechSynthesis 接口的 resume() 方法将 SpeechSynthesis 对象置于非暂停状态：如果它已经暂停，则恢复它。
let spee = window.speechSynthesis;
spee.resume()
SpeechSynthesis.speak()
SpeechSynthesis 接口的 speak() 方法将一个话语添加到话语队列中；当任何其他话语在被说出之前排队时，它将被说出 (播放)
let spee = window.speechSynthesis;
var utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js');
spee.speak(utterThis )
SpeechSynthesisUtterance
Web语音API的语音合成语音接口表示语音请求。它包含语音服务应该阅读的内容以及关于如何阅读的信息（例如语言、音调和音量）
属性
语音合成话语接口的lang属性获取并设置话语的语言。
如果未设置，则将使用应用程序的lang（即lang值），如果也未设置，将使用用户代理默认值。
SpeechSynthesisUtterance.pitch
获取并设置说话的音调
表示间距值的浮点。它可以在0（最低）到2（最高）之间，1是当前平台或语音的默认音调。一些语音合成引擎或语音可能会进一步限制最小和最大速率。如果使用SSML，该值将被标记中的韵律标记覆盖。
获取并设置说话的速度。
表示速率值的浮点。它的范围可以在0.1（最低）到10（最高）之间，1是当前平台或语音的默认音调，对应于正常的语速。其他值作为相对于此的百分比，因此，例如2是速度的两倍，0.5是速度的一半，等等。
一些语音合成引擎或语音可能会进一步限制最小和最大速率。如果使用SSML，该值将被标记中的韵律标记覆盖。
获取并设置在说话时将合成的文本。
语音合成-话语接口的文本属性获取并设置在说话时将合成的文本。
SpeechSynthesisUtterance.voice
获取并设置将用于说话的声音。
voice 属性获取和设置将用于说出话语的声音。
这应该设置为 SpeechSynthesis.getVoices() 返回的 SpeechSynthesisVoice 对象之一。如果在说出话语时未设置，则使用的语音将是可用于该话语的语言设置的最合适的默认语音。
SpeechSynthesisUtterance.volume
获取并设置语音的音量。
语音合成语音接口的音量属性获取并设置语音的音量。
如果未设置，将使用默认值1。
价值表示体积值的浮点，介于0（最低）和1（最高）之间
代码示例
let spee = window.speechSynthesis, utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js'), Voices = window.speechSynthesis.getVoices()
utterThis.lang = 'zh-HK' // 这种播放语言
utterThis.voice = voices[Voices.length]; // 设置播放语音声音 获取最后一个
utterThis.pitch = 2; //设置说话的音调(说话的音高) 1-2
utterThis.rate = 1; // 设置语速 0.1-10
utterThis.volume = 0.2 // 话的音量0.1-1
spee.speak(utterThis); // 播放
事件
事件属性
start (开始播放)
resume （重新播放）
boundary （在播放时触发）
end （播放结束）
error （播放错误）
pause (暂停)
mark
事件返回参数 object
除了下面列出的属性外，还可以使用父接口Event的属性。
charIndex （字符索引）只读
返回字符在语音合成语句中的索引位置。事件触发时正在讲话的文本。
elapsedTime （运行时间）只读
返回语音合成发出后经过的时间（秒）。开始有人说事件是在触发的。
name（名称）只读
返回与作为语音合成语句发生的某些类型的事件相关联的名称。正在发言的文本：在标记事件的情况下达到的SSML标记的名称，或在边界事件的情况中达到的边界类型。
utterance（话语）只读
返回触发事件的语音合成发音实例。
事件实参
事件代码示例
let utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js');
// 正在朗读时触发
utterThis.addEventListener('boundary',(e)=>{
console.log('boundary',e);
})
//结束时触发
utterThis.addEventListener('end',(e)=>{
console.log('end',e);
})
//错误时触发
utterThis.addEventListener('error',(e)=>{
console.log('error',e);
})
// 暂停
utterThis.addEventListener('pause',(e)=>{
console.log('pause',e);
})
//开始
utterThis.addEventListener('start',(e)=>{
console.log('start',e);
})
// 重新开始
utterThis.addEventListener('resume',(e)=>{
console.log('resume',e);
})
utterThis.addEventListener('mark',(e)=>{
console.log('mark',e);
})
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
</head>
<body>
<button onclick="getVoiceslist()">获取当前声音列表</button>
<button onclick="resume()" >恢复</button>
<button onclick="pause()" >暂停</button>
<button onclick="cancel()" >取消</button>
</body>
<script>
let spee = window.speechSynthesis;
function getVoiceslist() {
// 获取当前语言
console.log(speechSynthesis)
//到得所有声音类型
let voices = spee.getVoices();
// 过滤出中文
const zhList = voices.filter(item=>item.lang.includes('zh-'))
console.log(zhList);
// for (let i = 0; i < zhList.length; i++) {
// console.log(zhList[i].name + ' (' + zhList[i].lang + ')');
// }
var utterThis = new SpeechSynthesisUtterance('JavaScript runTime例如 Node.js，deno.js，bun.js');
utterThis.lang = 'zh-HK' // 这种播放语言 （粤语）
utterThis.voice = voices[zhList.length]; // 设置播放语音声音
utterThis.pitch = 2; //设置说话的音调(说话的音高) 1-2
utterThis.rate = 1; // 设置语速 0.1-10
utterThis.volume = 0.2 // 话的音量0.1-1
spee.speak(utterThis); // 播放
// 5s 后关闭当播放
setTimeout(()=>{
spee.cancel()
},5000)
// 正在朗读时触发
utterThis.addEventListener('boundary',(e)=>{
console.log('boundary',e);
})
//结束时触发
utterThis.addEventListener('end',(e)=>{
console.log('end',e);
})
//错误时触发
utterThis.addEventListener('error',(e)=>{
console.log('error',e);
})
// 暂停
utterThis.addEventListener('pause',(e)=>{
console.log('pause',e);
})
//开始
utterThis.addEventListener('start',(e)=>{
console.log('start',e);
})
// 重新开始
utterThis.addEventListener('resume',(e)=>{
console.log('resume',e);
})
utterThis.addEventListener('mark',(e)=>{
console.log('mark',e);
})
}
function resume(){
spee.resume() // resume
}
function pause(){
spee.pause() // 暂停
}
function cancel(){
spee.cancel() // 取消
}
</script>
</html>
3684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
