SpeechSynthesisUtterance - 表示语音请求

SpeechSynthesisUtterance 是 Web Speech API 的接口，表示语音请求。它包含语音服务应阅读的内容以及有关如何阅读的信息（例如语言，音调和音量）。

构造函数

SpeechSynthesisUtterance.SpeechSynthesisUtterance()

返回一个新的 SpeechSynthesisUtterance 对象实例。

属性

SpeechSynthesisUtterance 还从其父接口 EventTarget 继承了属性。

SpeechSynthesisUtterance.lang

获取和设置说话时的语言。

SpeechSynthesisUtterance.pitch

获取和设置说话时的音调。

SpeechSynthesisUtterance.rate

获取和设置说话时的速度。

SpeechSynthesisUtterance.text

获取和设置在说出语音时将要合成的文本。

Gets and sets the text that will be synthesised when the utterance is spoken.

SpeechSynthesisUtterance.voice

获取和设置将用于说出语音的声音。

SpeechSynthesisUtterance.volume

获取和设置说话的音量。

事件

使用 addEventListener() 或通过为此接口的 oneventname 属性分配事件监听器来监听这些事件

boundary

当语音达到单词或句子边界时触发。也可以通过 onboundary 属性处理。

end

语音说完后触发。也可以通过 onend 属性处理。

error

当发生错误而无法成功发声时触发。也可以通过 onerror 属性处理。

mark

当语音到达指定的 SSML “标记” 标签时触发。也可以通过 onmark 属性处理。

pause

语音在途中暂停时触发。也可以通过 onpause 属性处理。

resume

恢复暂停的语音时触发。也可通过 onresume 属性处理。

start

在开始说出语音时触发。也可以通过 onstart` 属性处理。

实例

在基本的语音合成器实例中，我们首先使用 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('.txt');
var voiceSelect = document.querySelector('select');

var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');

var voices = [];

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];
    }
  }
  utterThis.pitch = pitch.value;
  utterThis.rate = rate.value;
  synth.speak(utterThis);

  inputTxt.blur();
}

规范

规范	状态	备注
Web Speech API SpeechSynthesisUtterance 的定义	草稿	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• Web Speech API