window属性:speechSynthesis

2020-07-31 15:57 更新

speechSynthesis属性

注意:speechSynthesis属性目前处于实验性阶段,在使用它之前,请仔细检查浏览器兼容性表。

Window对象的只读属性speechSynthesis返回一个SpeechSynthesis对象,该对象是使用Web Speech API语音合成功能的入口点。

SpeechSynthesis 也从它的父接口继承属性, EventTarget.

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

speechSynthesis属性语法

var synth = window.speechSynthesis;

speechSynthesis属性值

一个SpeechSynthesis对象。

speechSynthesis属性示例

在我们的基本语音合成器演示中,我们首先使用window.speechSynthesis获取对SpeechSynthesis控制器的引用。在定义了一些必要的变量之后,我们使用SpeechSynthesis.getVoices()检索可用语音的列表并用它们填充选择菜单,以便用户可以选择他们想要的语音。

在inputForm.onsubmit处理程序内部,我们使用preventDefault()停止表单提交,创建一个新SpeechSynthesisUtterance实例,其包含文本<input>的文本,将话语的语音设置为<select>元素中选择的语音,然后通过该SpeechSynthesis.speak()方法开始说话。

var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('input');
var voiceSelect = document.querySelector('select');


function populateVoiceList() {
  voices = synth.getVoices();

  for(i = 0; i < voices.length ; i++) {
    var option = document.createElement('option');
    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
    
    if(voices[i].default) {
      option.textContent += ' -- DEFAULT';
    }

    option.setAttribute('data-lang', voices[i].lang);
    option.setAttribute('data-name', voices[i].name);
    voiceSelect.appendChild(option);
  }
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

inputForm.onsubmit = function(event) {
  event.preventDefault();

  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  for(i = 0; i < voices.length ; i++) {
    if(voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }
  synth.speak(utterThis);
  inputTxt.blur();
}

规范

规范 状态 注释
Web Speech API 
该规范中“SpeechSynthesis”的定义。
Draft
 

浏览器兼容性

电脑端 移动端
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview Chrome for Android
Edge Mobile Firefox for Android
Opera for Android
iOS Safari
基本支持 支持:33 支持 支持:49 支持 支持:7 支持 支持 支持 支持 支持:7.1


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号