前言：
目前大家对“js语音合成”可能比较注意，你们都想要剖析一些“js语音合成”的相关内容。那么小编也在网摘上汇集了一些有关“js语音合成””的相关知识，希望你们能喜欢，兄弟们快快来了解一下吧！使用HTML5+JS实现文字转语音
现在越来越多的视频采用了AI语音，下面给大家介绍几种简单的文字转语音的办法，完全免费的欧。
使用HTML5语音合成API-SpeechSynthesis实现的文字转语音
因为SpeechSynthesis完全是由浏览器端实现的文字转语音，大家可以用下面命令测试一下自己使用的浏览器支持哪些文字转成语音，方法很简单。
打开浏览器任意页面，点击F12打开浏览器调试控制台，点击【控制台】或者是【console】切换到控制台页面，在提示符>位置输入speechSynthesis.getVoices()并回车。有些浏览器控制台默认是禁止复制粘贴的这调代码有可能要手动输入allow pasting来启用复制粘贴。不同浏览器支持的语音数量不同，edge支持最多有302种
Chrome支持也不少
而maxthon就支持一种
注意这个支持多寡和当前使用的操作系统版本，浏览器内核版本也有一定关系，各浏览器支持情况参考下表，数字代表开始支持的内核版本。
下面来看看用html5+js代码怎样实现一个简单的页面来实现文字转语音
先用html语言写一个简单的页面，代码如下：
<!DOCTYPE html><html><head><title>HTML5+JS实现文字转语音朗读功能</title></head><body><article><h3 align="center">请在下面文本框中输入要转换的文字：</h3><p><textarea id="texts" rows="15" class="_play">使用浏览器实现文字转语音，不需要网络。</textarea></p><p><label>选择转换语音：</label><select id="voiceSelect" onchange="play()"></select></p><button class="_search" onclick="play()">开始</button><button onclick="resume()">继续</button><button onclick="pause()">暂停</button><!-- <button onclick="cancel()">清除队列</button> --><button onclick="cls()">清空文文字</button></article></body></html>
效果是这样的：
看起来比较丑，可以在<head>标签里面加上css代码，使页面看起来好看一点
<head><title>HTML5+JS实现文字转语音朗读功能</title><style>article {margin: 0 auto;max-width: 800px;text-align: center;}textarea {max-width: 600px;width:100%;text-align: left;}button{border-radius: 3px;border: 1px solid #dddddd;height: 30px;width: 80px;cursor: pointer;}</style></head>效果如下：
为选择转换语音的选择框添加js代码
<script>var to_speak = window.speechSynthesis;var voiceSelect = document.querySelector("#voiceSelect");var voices = [];//创建选择语言的select标签function populateVoiceList() {voices = speechSynthesis.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);}}setTimeout(function() {populateVoiceList();}, 500) //</script>这样刷新页面后选择转换语音的选择框后面就出现一个下拉列表，里面列出了浏览器支持的语音。
后面为各按钮添加js代码：
开始：
var _play = document.querySelector("._play");var dataName;//清除所有语音播报创建的队列function cancel() {window.speechSynthesis.cancel();}function play() {cancel(); //一定要加这个，不加的话浏览器会不发声。to_speak = new SpeechSynthesisUtterance(_play.value);//to_speak.rate = 1.4;// 设置播放语速，范围：0.1 - 10之间var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');for(i = 0; i < voices.length; i++) {if(voices[i].name === selectedOption) {to_speak.voice = voices[i];}}window.speechSynthesis.speak(to_speak);}继续，暂停，清空文字：
//暂停function pause() {window.speechSynthesis.pause();}//继续播放function resume() {window.speechSynthesis.resume(); //继续}//清除所有语音播报创建的队列function cancel() {window.speechSynthesis.cancel();}//清空文本框function cls() {document.getElementById("texts").value=""; 清空文本框}可以在播放、暂停和继续播放里面加上检测文本框内是否有文字的函数，有文字才播放。
//检查文本框是否为空
function myCheckFunc() {
let x;
x = document.getElementById("texts").value;
try {
if (x === "")
throw "文本框为空";
} catch (error) {
alert( "提示" + error);
}
}
完整js代码如下：
<script>if(!('speechSynthesis' in window)) {throw alert("对不起，您的浏览器不支持")}var _play = document.querySelector("._play"),to_speak = window.speechSynthesis,dataName, voiceSelect = document.querySelector("#voiceSelect"),voices = [];function play() {myCheckFunc();//检查文本框是否为空cancel(); //to_speak = new SpeechSynthesisUtterance(_play.value);//to_speak.rate = 1.4;// 设置播放语速，范围：0.1 - 10之间var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');for(i = 0; i < voices.length; i++) {if(voices[i].name === selectedOption) {to_speak.voice = voices[i];}}window.speechSynthesis.speak(to_speak);}//暂停function pause() {myCheckFunc();//检查文本框是否为空window.speechSynthesis.pause();}//继续播放function resume() {myCheckFunc();//检查文本框是否为空window.speechSynthesis.resume(); //继续}//清除所有语音播报创建的队列function cancel() {window.speechSynthesis.cancel();}//清空文本框function cls() {document.getElementById("texts").value=""; 清空文本框}//检查文本框是否为空function myCheckFunc() {let x;x = document.getElementById("texts").value;try {if (x === "")throw "文本框为空";} catch (error) {alert( "提示" + error);}}//创建选择语言的select标签function populateVoiceList() {voices = speechSynthesis.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);}}setTimeout(function() {populateVoiceList();}, 500) //</script>这样一个简单的文字转语音的网页就做好了，而且不依赖网络，没网的时候也可转换，而且使用win10系统，EDGE浏览器支持100多种文字。
有个小问题就是，这样转换浏览器会直接发声，而不是输出为文件，这个问题可以用录屏软件或者录音软件例如Adobe Audition，Cool Edit Pro等解决。
用edge播放文本内容
这种方式更简单一点，步骤如下：
新建一个txt文件里面输入要转的内容，然后用EDGE浏览器打开这个问题文件.点击地址栏右侧大声朗读按钮
在弹出的朗读此页内容工具条上点击【语音选项】，在弹出的对话框上可以设置语音的速度和语音的类型。选好之后点工具条上播放按钮就可以播放了。
使用EDGE插件实现转换
(1)在EDGE浏览器点击右上角三个点，打开edge浏览器选项菜单，点击【扩展】，打开扩展对话框，选择打开Microsoft edge加载项
在搜索框输入voice remaker，添加这个扩展添加成功后，点击浏览器地址栏后面的扩展图标打开这个扩展，在弹出的对话框的文本框里面输入要转的文字，在voice下拉列表选择要转的语音点击【convert to speech】,等待片刻就可以在下面看到转好的语音文件，可以点击下载来下载这个文件。用PC端工具调用edge浏览器语音转换功能实现转换
推荐大家用edge-TTS-record这个工具版本V0.1.1,这个工具既不要钱也不需要登陆。
在文本框里输入文字，【朗读者】选择语音，可以点【试听】按钮试听一下，点【录制】即可保存为wav文件。
以上这几种方式所使用的语音转换引擎是一样的都是调用edge浏览器的SpeechSynthesis功能，所以它们里面可选择的语音是一样的，一般都是有几百种，这种方式转换出来的语音，虽然听起来有点机械，但是对应普通的视频配音来说完全足够了。
