【Web API 一探究竟】SpeechSynthesis——让你的浏览器说话!

icy2003 程序 2020-05-01 18:40:50 205 0条

SpeechSynthesis 接口是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令

40626-fyfrv12n2it.png

例子

先上一个能直接使用的例子:

function  AudioPlayBystr(string){
    var msg = new SpeechSynthesisUtterance();
    msg.lang="zh-CN"; // 使用的语言
    msg.pitch = 1; // 表示说话的音高
    msg.rate = 0.8; // 语速
    msg.text = string; // 要合成的文字内容
    msg.volume = 10 ; // 声音的音量
    speechSynthesis.speak(msg);// 播放
    msg.onstart = function(){console.log("语音合成开始时候的回调")};
    msg.onend = function(){console.log("语音合成结束时候的回调")};
    msg.onpause = function(){console.log("语音合成暂停时候的回调")};
    msg.onresume = function(){console.log("语音合成重新开始时候的回调")};
    msg.onerror = function(error){console.log("语音合成错误时候的回调" + error)};
}
AudioPlayBystr("你好 世界");

如果你的浏览器支持,以上代码执行后应该会有个妹子说:“你好 世界”。

目前不支持这个 API 的浏览器有:IE(必须的!)、安卓 webview(真的可惜)、安卓 Opera。

接口说明

SpeechSynthesisUtterance

代表发言请求。它包含语音服务应阅读的内容以及有关如何阅读的信息(例如语言,音调和音量)。

属性:

  • lang:获取并设置话语的语言,字符串,如:zh-CN。
  • pitch:获取并设置说话时的音调,数值,范围从 0(最小)到 2(最大)。默认值为 1。
  • rate:获取并设置发声的速度,数值,默认值是 1,范围是 0.1 到 10,表示语速的倍数,例如 2 表示正常语速的两倍。
  • text:获取并设置在说出语音时将要合成的文本,字符串。
  • voice:获取并设置将用于说出语音的声音。
  • volume:获取并设置说话的音量,数值,区间范围是 0 到 1,默认是 1。
  • voiceURI:指定希望使用的声音和服务,字符串。可通过 speechSynthesis.getVoices() 获得,如:Google 普通话(中国大陆)

事件(使用 addEventListener() 或通过将事件侦听器分配给此接口的属性来侦听这些事件)

  • boundary:当语音达到单词或句子边界时触发。
  • end:语音说完后触发。
  • error:当发生错误而无法成功发声时触发。
  • mark:当语音到达指定的SSML“标记”标签时触发。
  • pause:语音在途中暂停时触发。
  • resume:恢复暂停的语音时触发。
  • start:在开始说出语音时触发。

speechSynthesis

语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

属性:

  • SpeechSynthesis.paused:只读,当SpeechSynthesis 处于暂停状态时, Boolean 值返回 true。
  • SpeechSynthesis.pending:只读,当语音播放队列到目前为止保持没有说完的语音时, Boolean 值返回 true。
  • SpeechSynthesis.speaking:只读,当语音谈话正在进行的时候,即使 SpeechSynthesis 处于暂停状态, Boolean 返回 true。

事件:

  • SpeechSynthesis.onvoiceschanged:当由 SpeechSynthesis.getVoices() 方法返回的 SpeechSynthesisVoice 列表改变时触发。

方法:

  • SpeechSynthesis.cancel():移除所有语音谈话队列中的谈话。
  • SpeechSynthesis.getVoices():返回当前设备所有可用声音的 SpeechSynthesisVoice 列表。
  • SpeechSynthesis.pause():把 SpeechSynthesis 对象置为暂停状态。
  • SpeechSynthesis.resume():把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。
  • SpeechSynthesis.speak():添加一个 utterance 到语音谈话队列;它将会在其他语音谈话播放完之后播放。

可能遇到的问题

如果使用 Chrome 出现播放不了,说明不能自动播放。

26302-rtcbqbdkhng.png

解决方法: 进去必须有一个激活动作,如点击事件 click,或者你直接鼠标点击页面某处就可以播放了。

在地址栏输入 chrome://flags/#autoplay-policy ,然后将 default 改为:

23434-5cqv2uzrcid.png

参考资料

标签: javascript

非特殊说明,本博所有文章均为博主原创。