【原生javascript项目】Speech Synthesis 23

作者：©Iaine 万一
简介：30 Day Challenge是 Wes Bos 设计的一个 30 天原生js编程挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。

本项目为第23天的“语音合成”项目。Have fun with the website! ♪(^∇^*)

源代码：https://github.com/janice143/JavaScript30Program/tree/master/23%20speechSynthesis/index.html

项目描述

利用SpeechSynthesisUtterance接口等实现的语音合成项目，其中设有rate和pitch滑块可改变朗读速度和音高，stop和speech按钮用来控制朗读的开始和暂停。朗读的文本内容可以在文本框中自行输入。

项目重点

SpeechSynthesisUtterance接口
- speechSynthesisUtterance.lang
- SpeechSynthesisUtterance.pitch
- SpeechSynthesisUtterance.rate
- SpeechSynthesisUtterance.text
- ``SpeechSynthesisUtterance.name`
SpeechSynthesis接口
- voiceschanged事件
- SpeechSynthesis.getVoices()
- speechSynthesis.cancel()
- SpeechSynthesis.speak()

项目过程

HTML部分

h1标签

select多选菜单

1
2
3

<select name="voice" id="voices">
    <option value="">Select A Voice</option>
</select>

两个范围input控件，用来调控rate和speed

<label for="rate">Rate:</label>
<input name="rate" type="range" min = 0 max = "3" value="1" step="0.1">
<label for="pitch">Rate:</label>
<input name="pitch" type="range" min="0" max="2" step="0.1">

输入文本框，朗读内容

1	<textarea name="text">Hey, my name is Iaine, nice to meet you</textarea>

两个按钮，用来暂停朗读和开始朗读

1 2	<button id="stop">Stop</button> <button id="speak">Speak</button>

JS部分

JS的大致思路是：

使用相应WebAPI接口获得浏览器支持的语言种类列表，填充至下拉菜单中；
在文本域中输入对应语言的文字，点击speak按钮后浏览器会阅读输入的文字；
在浏览器阅读时，点击stop按钮，浏览器会停止阅读；
拖动rate和pitch滑块可改变阅读速度和音高。

取得speechSynthesis对象，获取浏览器支持朗读语言，将所有选项动态添加至下拉列表

const speechSynthesis = window.speechSynthesis;
let voices=[];
function populateVoices(){
    voices = this.getVoices();
    voicesDropdown.innerHTML = voices
        .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
        .join('');
    console.log(voices)
}

 speechSynthesis.addEventListener('voiceschanged', populateVoices);

设置下拉列表当前显示的语言，选择好语言后触发朗读

const voicesDropdown = document.querySelector('[name = "voice"]');
function setVoice(){
    msg.voice = voices.find(voice => voice.name === this.value);
    toggle();
}
//   发出语音
function toggle(startOver = true) {
    speechSynthesis.cancel();
    if (startOver) {
        speechSynthesis.speak(msg);
    }
}
voicesDropdown.addEventListener('change', setVoice);

点击speech按钮朗读，stop按钮停止

const speakButton = document.querySelector('#speak');
const stopButton = document.querySelector('#stop');
speakButton.addEventListener('click', toggle);
stopButton.addEventListener('click', () => toggle(false));

构建SpeechSynthesisUtterance实例，添加pitch,text, speed,name属性

const msg = new SpeechSynthesisUtterance();
msg.text = document.querySelector('[name="text"]').value;
const options = document.querySelectorAll('[type="range"],[type = "text"]');
function setOption(){
    msg[this.name] = this.value;
    toggle();
}
options.forEach(option => option.addEventListener('change', setOption));
function updateText(){
    msg.text = document.querySelector('[name="text"]').value;
}
document.querySelector('[name="text"]').addEventListener('change', updateText);