整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
用HTML5+JS实现文字转语音
现在越来越多的视频采用了AI语音，下面给大家介绍几种简单的文字转语音的办法，完全免费的欧。
因为SpeechSynthesis完全是由浏览器端实现的文字转语音，大家可以用下面命令测试一下自己使用的浏览器支持哪些文字转成语音，方法很简单。
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等解决。
这种方式更简单一点，步骤如下：
在弹出的朗读此页内容工具条上点击【语音选项】，在弹出的对话框上可以设置语音的速度和语音的类型。选好之后点工具条上播放按钮就可以播放了。
(1)在EDGE浏览器点击右上角三个点，打开edge浏览器选项菜单，点击【扩展】，打开扩展对话框，选择打开Microsoft edge加载项
推荐大家用edge-TTS-record这个工具版本V0.1.1,这个工具既不要钱也不需要登陆。
在文本框里输入文字，【朗读者】选择语音，可以点【试听】按钮试听一下，点【录制】即可保存为wav文件。
以上这几种方式所使用的语音转换引擎是一样的都是调用edge浏览器的SpeechSynthesis功能，所以它们里面可选择的语音是一样的，一般都是有几百种，这种方式转换出来的语音，虽然听起来有点机械，但是对应普通的视频配音来说完全足够了。
通讯应用和聊天界面中，当你正在与对方交谈时对方正在输入一条信息，会有一个小的气泡动画或者文案提示。本文将探讨使用现代 CSS 来实现这一动画效果，首先会实现一个 Blink 效果的动画，然后实现一个波浪效果动画，最后实现一个语音气泡效果。
1）Blink 效果：
2）Wave 效果：
3）语音气泡效果：
通过 html:5 和 div.container>(div.dot)*3 快速创建页面及容器。
<div class="container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
1）容器居中：
body {
display: grid;
place-content: center;
min-height: 100vh;
margin: 0;
}
2）容器样式：
注意：此处使用了现代CSS 原生嵌套（参考链接：）
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 0.25rem;
background: #e2e8f0;
border-radius: 9999px;
padding: 1rem;
.dot {
border-radius: 9999px;
height: 0.5rem;
width: 0.5rem;
background: #93a2b7;
}
}
1）Blink 效果：
核心思想是通过给dot 元素设置 opacity 设置属性来改变其透明度，同时对 3 个 dot 的透明度变化设置不同的动画延迟 animation-delay 属性来实现闪烁的效果。
.container {
.dot {
opacity: 0;
animation: blink 1s infinite;
&:nth-child(1) {
animation-delay: 0.3333s;
}
&:nth-child(2) {
animation-delay: 0.6666s;
}
&:nth-child(3) {
animation-delay: 0.9999s;
}
}
}
@keyframes blink {
50% {
opacity: 1;
}
}
2）Wave 效果：
核心思想：给 dot 元素增加 transform 属性，设置 translateY 的值将目标元素从下至上垂直重新定位，同时在动画关键帧 keyframes 中对颜色进行调整。
.container {
.dot {
animation: wave 1s infinite;
}
}
@keyframes wave {
0% {
transform: translateY(0px);
background: rgba(148 163 184 / 0);
}
25% {
transform: translateY(-0.25rem);
background: rgba(148 163 184 / 0.8);
}
50% {
transform: translateY(0px);
background: rgba(148 163 184 / 0);
}
75% {
transform: translateY(0.25rem);
background: rgba(148 163 184 / 0.8);
}
100% {
transform: translateY(0);
background: rgba(148 163 184 / 0);
}
}
2）语音气泡效果：
语音气泡是以可视化方式显示对话或思想的一种流行而有效的方法。你可能在漫画、卡通、广告和社交媒体文章中见过它们。它们为设计增添了幽默、情感和个性，同时也为观众提供了语境。此外，语音气泡布局还可以将文字较多的设计分割开来，使其更加吸引人。
核心思想：在 wave 效果的基础上，对 .contianer 容器增加 ::before 和 ::after 两个伪元素来实现左下角的圆圈，同时动画中增加对整个容器的放大和缩小 scale 动画，并采用 ease-out 函数。
.container {
animation: 2s zoom infinite ease-out;
position: relative;
&::before,
&::after {
content: '';
position: absolute;
border-radius: 9999px;
background: rgb(226 232 240);
bottom: 0;
left: 0;
}
&::before {
height: 1rem;
width: 1rem;
transform: translate(-0.125rem, 0.125rem);
}
&::after {
height: 0.5rem;
width: 0.5rem;
transform: translate(-0.5rem, 0.5rem);
}
.dot {
border-radius: 9999px;
height: 0.5rem;
width: 0.5rem;
background: rgba(148 163 184 / 1);
animation: wave 1.2s infinite;
&:nth-child(1) {
animation-delay: 0.4s;
}
&:nth-child(2) {
animation-delay: 0.8s;
}
&:nth-child(3) {
animation-delay: 1.2s;
}
}
}
@keyframes zoom {
50% {
transform: scale(1.1);
}
}
如果本文对您有帮助，欢迎关注、点赞和转发，感谢您的支持！
觉样式表使用了语音合成和声音效果的结合，让用户收听信息，而不是读取信息。
有声显示可用于：
失明人士
帮助用户学习阅读
帮助具有阅读问题的用户
家庭娱乐
在车上
听觉呈现通常会把文档转化为纯文本，然后传给屏幕阅读器（可读出屏幕上所有字符的一种程序）。
听觉样式表的一个例子：
h1,h2,h3,h4
{
voice-family:male;
richness:80;
cue-before:url("beep.au")
}
上面的例子用语音合成器播放声音，开头有一个男性的声音说话。
CSS 语音参考手册
CSS"列表示在CSS版本的属性定义（CSS1或CSS2）。
| Property | Description | Values | CSS |
|---|---|---|---|
| azimuth | 设置声音应该来自哪里 | angleleft-sidefar-leftleftcenter-leftcentercenter-rightrightfar-rightright-sidebehindleftwardsrightwards | 2 |
| cue | 在一个声明中设置cue属性 | cue-beforecue-after | 2 |
| cue-after | 指定要播放的声音在一个元素的内容后面 | noneurl | 2 |
| cue-before | 指定要播放的声音在一个元素的内容前面 | noneurl | 2 |
| elevation | 设置声音应该来自哪里 | anglebelowlevelabovehigherlower | 2 |
| pause | 在一个声明中设置pause属性 | pause-beforepause-after | 2 |
| pause-after | 在一个元素的内容之后，指定暂停 | time% | 2 |
| pause-before | 在一个元素的内容之前，指定暂停 | time% | 2 |
| pitch | 指定讲话声音 | frequencyx-lowlowmediumhighx-high | 2 |
| pitch-range | 指定讲话声音的变化。（单调的声音或动态的声音？） | number | 2 |
| play-during | 指定在读一个元素的内容时要播放的声音 | autononeurlmixrepeat | 2 |
| richness | 指定丰富的讲话声音。（浑厚的声音或细的声音？） | number | 2 |
| speak | 指定内容是否会提供听觉方式 | normalnonespell-out | 2 |
| speak-header | 此属性设置或检索表格标题是在所有的单元格之前发声，还是到一个不与之关联的单元格就结束发声。 | alwaysonce | 2 |
| speak-numeral | 设置或检索数字如何发音。 | digitscontinuous | 2 |
| speak-punctuation | 设置或检索标点字符如何发音 | nonecode | 2 |
| speech-rate | 指定发言速度 | numberx-slowslowmediumfastx-fastfasterslower | 2 |
| stress | 讲话声音在指定的地方"重音" | number | 2 |
| voice-family | 设置或检索当前声音类型 | specific-voicegeneric-voice | 2 |
| volume | 指定发言的音量 | number%silentx-softsoftmediumloudx-loud | 2 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
*请认真填写需求信息，我们会在24小时内与您取得联系。
