使用HTML5+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功能，所以它们里面可选择的语音是一样的，一般都是有几百种，这种方式转换出来的语音，虽然听起来有点机械，但是对应普通的视频配音来说完全足够了。

5 让我们的 Web 交互更加生动有趣，但浏览器的多样性以及挥之不去的兼容问题，却阻碍了技术发展。这并不是我们拒绝的理由，恰恰相反，它应该成为动力。

一、语音场景

文章标题为了严谨，所以叫音频合成。如果用大白话来解释，那就是「文字转语音」。语音的场景就太多了：

点读机：哪里不会点哪里
有声小说：看着太累，听起来不错
Web 页面警示用户的操作
闹钟，提醒，小秘书
残疾人支持

这些都是随处可见的例子，但真正燃起我激情的是这个场景，简直酷炫到爆。

原来动画和语音结合起来才是最佳的用户体验。

二、技术核心

看完上面的动画，按捺不住内心的好奇，随手就翻起了源码。Oh～原来如此，把你揪出来：

let sayhello = new window.SpeechSynthesisUtterance('你好，欢迎来到 Jartto 的博客！');
window.speechSynthesis.speak(sayhello);

事情的真相就是简单如此，短短两行，就实现了语音播报。

三、兼容性

如此有趣的 API，突然想到了一万个应用场景。别忙，先来看看 SpeechSynthesis 的兼容性吧：

看起来各大浏览器支持的还不错，那就试试呗！

四、API 文档

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

既然浏览器已经普遍支持了，那么我们不妨打印出来看看。

下面我们来适当的解释一下：

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 到语音谈话队列；它将会在其他语音谈话播放完之后播放。

API 很简单，这里就不赘述了，来个例子尝尝鲜。

五、代码演示

MDN Web Docs上面有个很形象的例子，我们拿过来学习学习：

注意：这里为了演示，只列出了核心代码，完整代码请看下面「完整示例」。

六、补充：SpeechRecognition

既然提到了文字转语音，那么不得不提到语音识别。

SpeechRecognition 顾名思义，语音识别，属于网页语音 API。需要麦克风等音频输入设备的支持，可以识别用户的语音输入，并且转化成文字。

SpeechRecognition API 需要硬件支持，所以兼容性并不好，大致如下：

七、未来畅想

相信不久的未来，浏览器会逐步统一，兼容问题将会化为乌有。你看，微软不也低下了高贵的头颅，投入了谷歌的怀抱。

我们将会用更多的时间去探索技术，而不是去兼容老破旧的网站或者机器。当然，Web 技术会大行其道，用户将会拥有到更加有趣的体验。

eb浏览器变得越来越强大，像Web音频API和音频数据API这样的新API使Web变得越来越有趣和动态。尽管声音是一种感官，但由于技术支持的不一致，它在很大程度上已经从网络上消失了。在现代浏览器中，支持HTML5音频可能很乏味，更不用说传统的浏览器了。在真实世界的访问者中，使用范围广泛的设备，如IE6的浏览器，可以有很多支持案例来考虑。

在本文中，我们收集了一个较佳工具列表，可以帮助您使用它们的API在网页或应用程序上操作和播放音频资源。以下工具、插件和JS库将帮助您使用声音进行游戏、合成器、音频播放器等，一切都在浏览器的适用范围内。

1.Soundsnap

Soundsnap是一个很好的平台，可以合法地查找和共享免费的声音效果和循环。它是由用户制作或录制的原始声音的集合，而不是商业图书馆或示例CD上的歌曲或声音效果。

2.VexFlow

VexFlow是一个开源的基于Web的音乐符号呈现API。它完全用javascript编写，并在浏览器中运行。VexFlow支持HTML5画布和SVG。下面的分数可以在浏览器中呈现。

3.Voice Elements

Voice Elements是Web语音API的Web组件包装器，它允许您使用聚合物进行语音识别和语音合成。语音识别是将口语翻译成文本的过程。这是通过使用Web语音API的语音识别接口在浏览器中实现的。语言合成是语言文本转化为语言的过程。这是通过使用Web语音API中的“语音合成”界面在浏览器中实现的。

4.annyang！语音识别

Annyang是一个很小的javascript库，允许访问者使用语音命令控制您的站点。Annyang没有依赖项，重量小于1Kb，可以自由使用和修改。它可以很好地与所有浏览器一起使用，逐步增强支持语音识别的浏览器，同时不影响使用旧浏览器的用户。

5.jPlayer

jPlayer是用javascript编写的完全免费的开放源码（gpl/mit）媒体库。jquery插件jplayer允许您快速地将跨平台音频和视频编织到网页中。jPlayer的全面API允许您创建创新的媒体解决方案，而JPlayer的活跃和发展的社区提供支持和鼓励。

6.Buzz

Buzz是一个小型但功能强大的JavaScript库，允许您轻松利用新的HTML5音频元素。它提供了大量利用音频元素的方法，并提供了一种组合声音的方法，并提供了许多控制声音的方法。它在非现代浏览器上有着优雅的退化。

7.SoundJS

SoundJS是一个库，可以使在Web上使用音频更容易。它为在不同浏览器中播放音频提供了一致的API，包括使用目标插件模型提供一种简单的方法来提供额外的音频插件（如Web音频）和Flash回退。提供了一种机制，可以轻松地将音频预加载绑定到预加载JS。

（本文如有侵权，请联系作者，必删！！！）

如果您知道最近发布的其他网页上操作音频的工具和库，请在下面发表评论，让我们知道，我们希望将它们添加到我们的列表中。

在线咨询

上一篇：软件测试学习笔记丨HTML基础知识
下一篇：在HTML页面中嵌入其他页面的方法-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商