百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

使用HTML5+JS实现文字转语音 js将文字转语音播放

xsobi 2024-12-27 17:27 1 浏览

使用HTML5+JS实现文字转语音

现在越来越多的视频采用了AI语音，下面给大家介绍几种简单的文字转语音的办法，完全免费的欧。

  1. 使用HTML5语音合成API-SpeechSynthesis实现的文字转语音

因为SpeechSynthesis完全是由浏览器端实现的文字转语音，大家可以用下面命令测试一下自己使用的浏览器支持哪些文字转成语音，方法很简单。

  1. 打开浏览器任意页面，点击F12打开浏览器调试控制台，
  2. 点击【控制台】或者是【console】切换到控制台页面，在提示符>位置输入speechSynthesis.getVoices()并回车。
  3. 有些浏览器控制台默认是禁止复制粘贴的这调代码有可能要手动输入allow pasting来启用复制粘贴。
  4. 不同浏览器支持的语音数量不同，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等解决。

  1. 用edge播放文本内容

这种方式更简单一点，步骤如下：

  1. 新建一个txt文件里面输入要转的内容，然后用EDGE浏览器打开这个问题文件.
  2. 点击地址栏右侧大声朗读按钮

在弹出的朗读此页内容工具条上点击【语音选项】，在弹出的对话框上可以设置语音的速度和语音的类型。选好之后点工具条上播放按钮就可以播放了。

  1. 使用EDGE插件实现转换

(1)在EDGE浏览器点击右上角三个点，打开edge浏览器选项菜单，点击【扩展】，打开扩展对话框，选择打开Microsoft edge加载项

  1. 在搜索框输入voice remaker，添加这个扩展
  1. 添加成功后，点击浏览器地址栏后面的扩展图标打开这个扩展，在弹出的对话框的文本框里面输入要转的文字，在voice下拉列表选择要转的语音点击【convert to speech】,等待片刻就可以在下面看到转好的语音文件，可以点击下载来下载这个文件。
  1. 用PC端工具调用edge浏览器语音转换功能实现转换

推荐大家用edge-TTS-record这个工具版本V0.1.1,这个工具既不要钱也不需要登陆。

在文本框里输入文字，【朗读者】选择语音，可以点【试听】按钮试听一下，点【录制】即可保存为wav文件。

以上这几种方式所使用的语音转换引擎是一样的都是调用edge浏览器的SpeechSynthesis功能，所以它们里面可选择的语音是一样的，一般都是有几百种，这种方式转换出来的语音，虽然听起来有点机械，但是对应普通的视频配音来说完全足够了。

相关推荐

「真实案例」php文件锁产生的问题和解决方案

本文为php中文网认证作者：“齐天大圣”投稿，欢迎加入php中文网有偿投稿计划！一个真实案例想起自己之前犯过一个相关的错误。当时场景是这样的：有一个微信公众号项目，调用微信公众号的接口都需要acces...

PHP大文件读取操作 php大文件处理

简单的文件读取，一般我们会使用file_get_contents()这类方式来直接获取文件的内容。不过这种函数有个严重的问题是它会把文件一次性地加载到内存中，也就是说，它会受到内存的限制。因此，加...

Linux文件链接(软硬)的介绍及其应用

linux中对文件的链接分为两种，一种是硬链接，另一种是软链接。今天和大家介绍下这两种链接，以及如何去使用他们。硬链接首先我们来看硬链接，我们来用php中变量的引用来对比吧。$a=100;$b...

包含connect.php文件的写法以及循环输出查询结果

包含connect.php文件的写法以及循环输出查询结果我们先把代码写在下面：<?phprequire_once("./connect.php");$sql="selec...

PHP读取文件内容的五种方式 php读取txt

读取文件内容的五种方式分享下php读取文件内容的五种方法：好吧，写完后发现文件全部没有关闭。实际应用当中，请注意关闭fclose($fp);--...

多学习才能多赚钱之:php文件怎样打开和运行

php-fpm的进程数可以根据设置分为动态和静态。静态：直接开启指定数量的php-fpm进程，不再增加或者减少；动态：开始的时候开启一定数量php-fpm进程，当请求变大的时候，动态的增加php-fp...

PHP函数和文件 php中的文件包含语句以及各自的异同点

程序员编程语言之间的鄙视链：...

Linux服务器出现Socket Error「Too many open files」怎么办

最近在用freeswitch软交换进行语音通话，通话的时候需要调用音频文件进行播放，当并发量上来的时候，freeswitch监听服务的端口会不断的down掉，查看日志发现报了一个错如下：这个问题经常...

CMS系统天花板!这可能是在开源界上最值得推荐的CMS系统了

系统简介novel-plus是一款功能完善的原创文学CMS系统,支持多端使用（PC、WAP）阅读。由前台门户系统、作家后台管理系统、平台后台管理系统和爬虫管理系统等多个子系统构成...

用织梦建站的公司企业你们瑟瑟发抖吗?织梦开启维权之路索赔不低

织梦也就是dedecms这个网站内容管理系统,织梦建网站曾经在很长一段时间内非常出名,几乎成为建站首选,个人自不必说,很多小建站公司也是用的织梦直接来套站,虽然吧强梦系统漏洞bug一大堆,但是因为简便...

六个优质开源项目，让你更了解Django框架开发

Django是一个开源的Web应用框架，由Python写成。采用了MTV的框架模式，即模型M，视图V和模版T。它最初是被用来开发CMS软件的，所以Django很适合用来搭...

Python的Web开发--第一个Django项目

Python有强大的数据库，那么对数据分析之后的结果需要在web上展现，当然我们也可以借助Java等框架，但是多此一举，虽然python生态圈没有Java完善，但python有自己的轻量级和重量级框...

基于AHNCMs-15的对称超级电容器，纳米碳模板和预陶瓷聚合物如何

在阅读此文前，诚邀您请点点右上方的“关注”，既方便您进行讨论与分享，还能及时阅读最新内容，感谢您的支持。基于AHNCMs-15的对称超级电容器具有14.7Whkg的高能量密度?1在250瓦克的功率...

「某CMS漏洞」SQL注入漏洞分析 sql注入漏洞原理、常见测试方法及防御方法

前言这个CMS非常适合入门代码审计的人去学习，因为代码简单且漏洞成因经典，对一些新手有学习价值，...

织梦cms怎么添加商桥? 织梦cms教程

作为一个前端的销售人员，很多人会自己去买服务器域名做网站，当我们网站做好以后希望安装一个商桥上去，这样就可以在线沟通交互了。相信也有很多和我一样看不懂代码的小伙伴在问怎么添加商桥代码到网站文件中，我...

一周热门
最近发表
标签列表