免费在线文字转语音工具，免费AI配音网站

过AI配音网站我们可以将文字内容转换成流畅的语音内容，下面小编就和大家分享几款免费的AI配音网站，可以轻松将文字在线转换成语音的工具。

1. TTS-Online

TTS-Online是一款创新的多语言文本转语音服务，支持超过160种声音选择，适用于自媒体、有声书、教育等多场景。其特色包括二次元语音、OpenAI技术支持、移动端优化、音频翻译及背景音乐合成，完全免费无限制使用。用户可以轻松地将文本在线转换为高质量的语音文件，并且支持多种语言和变调功能。

2. TTSMaker

TTSMaker是一款完全免费的在线文本转语音工具，提供人工智能语音合成服务，支持多种语言如英语、中文、日语、韩语、法语等及多种语音配音风格。它还支持中文方言，如粤语、闽南语、四川话等。TTSMaker每周可以转换3万个字符，无需注册或登录，完全免费使用。此外，TTSMaker基于微软Azure内核，具有高质量的AI语音生成技术，可生成逼真的语音，并提供多种语音风格选择。

3. Text To Speech

Text To Speech是一个免费在线文本转语音工具网站，支持从147种语言和变体中选择456种语音，可以调整语音的质量、模仿不同的声音和语调。该工具适用于广告配音、有声书朗读、无障碍阅读等各种场景，用户可以自由选择多种音色、角色及背景音乐，轻松调节语速、语调等参数。

4. 琅琅配音

琅琅配音是一款永久免费的文本转语音在线工具，支持多种语言和语音风格，每周可转换30000字符，免费下载音频文件。它提供200+AI主播，支持30多种语言和10多种情感风格。用户可以通过积分兑换权益，使用金牌主播和多音字等功能，合成的语音可用作商业用途，版权归用户所有。此外，琅琅配音还支持试听和下载，提供上百个发音人模型，包括微软的晓晓、晓辰等热门模型。

5.TTS-Online原神免费文本转语音

TTS-Online提供超过1000个日本动漫角色的多语言文本转语音服务，包括原神星穹铁道、英雄联盟等，支持中文、日文、英文。

免费在线AI配音网站合集：https://www.bgrdh.com/sites/22497.html

这些免费在线文字转语音工具和AI配音网站各有特色，能够满足不同用户的需求。无论是自媒体创作者、有声书作者还是教育工作者，都可以找到适合自己的工具来提升工作效率和内容质量。

TML编辑器是一种用于创建、编辑和预览HTML（超文本标记语言）代码的工具或应用程序。它提供了一个直观的界面，使用户能够轻松地编写和设计网页内容。本文主要介绍HTML 常用编辑器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。

参考文档：https://www.cjavapy.com/article/3299/

1、Visual Studio Code（VS Code ）

Visual Studio Code（简称VS Code）是一款由微软开发的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。VS Code是一款轻量级的代码编辑器，启动迅速，占用资源少。VS Code提供了丰富的扩展和插件，可以根据需求安装插件来增强编辑器功能。

1）安装和配置

官网地址：Visual Studio Code - Code Editing. Redefined

根据操作系统下载并安装相应版本的VS Code。打开VS Code后，可以根据自己的喜好配置编辑器设置，如主题、字体等。

2）新建HTML文件

在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) "，在新建的文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

3）编辑HTML文件

在VS Code中，点击左上角的"文件"菜单，选择"打开文件"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。

在编辑器中可以直接修改HTML文件的内容。VS Code会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。

4）插件推荐

HTML CSS Support：提供对HTML和CSS的支持，包括代码片段、自动补全等功能。

Live Server：启动一个本地开发服务器，实时预览HTML页面的效果。

Prettier：格式化HTML代码，使代码结构更整洁。

Auto Close Tag：自动闭合HTML标签，提高编码效率。

Bracket Pair Colorizer：对成对的括号进行着色，方便识别代码块。

2、Sublime Text

Sublime Text是一款流行的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。

Sublime Text的界面非常简洁，没有多余的菜单和工具栏，更便于专注于代码编辑。Sublime Text支持多种编程语言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text拥有强大的插件系统，用户可以根据需要安装插件来扩展编辑器功能。用户可以自定义快捷键、主题、颜色方案等，以满足个性化需求。Sublime Text启动迅速，响应快速，适合于快速编辑代码。

1）安装和配置

官网地址：Sublime Text - Text Editing, Done Right

根据操作系统下载并安装相应版本的Sublime Text。打开Sublime Text后，可以根据自己的喜好进行编辑器设置，如字体、主题等。

2）新建HTML文件

在Sublime Text 安装完成后，选择" File->New File "，在新建的文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

3）编辑HTML文件

在Sublime Text中，点击左上角的"File"菜单，选择"Open File"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。在编辑器中可以直接修改HTML文件的内容。Sublime Text会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。

4）插件推荐

Emmet：提供HTML/CSS快速编写和自动完成功能，可以大大提高编码效率。

Sublime Linter：对代码进行实时语法检查，帮助发现潜在的错误和警告。

Color Highlighter：对CSS中的颜色进行高亮显示，方便调试和修改样式。

SideBarEnhancements：增强侧边栏功能，提供更多文件操作选项。

3、Dreamweaver

Dreamweaver是由Adobe公司开发的一款全球知名的网页设计和开发工具。它为开发人员和设计师提供了一个可视化的界面，可以直观地创建和编辑网页内容，同时也支持手动编辑代码。Dreamweaver提供可视化界面，可以直观地拖拽和编辑网页元素，无需手动编写代码。除了可视化界面，Dreamweaver也支持手动编辑代码，适合于开发人员和设计师。Dreamweaver可在Windows和macOS等多个平台上运行。Dreamweaver集成了代码编辑器、预览窗口、文件管理器等功能，提供全面的开发环境。

1）安装和配置

官网地址：Website design software | Adobe Dreamweaver

根据操作系统下载并安装相应版本的Dreamweaver。打开Dreamweaver后，，根据需要进行编辑器设置，如界面语言、字体、代码颜色等。

2）编辑HTML文件

在Dreamweaver中，点击左上角的"File"菜单，选择"New"，然后选择"HTML"，即可新建一个空白的HTML文件。内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

使用可视化界面，可以直接拖拽页面元素、调整布局、插入图片等。若需要手动编辑HTML代码，可以在下方的代码编辑器中进行修改。Dreamweaver会自动提供代码补全和语法高亮功能。在Dreamweaver中，可以实时预览网页效果，点击右上角的"Live View"按钮即可。

3）CSS和JavaScript支持

Dreamweaver也支持CSS和JavaScript的编辑和预览，可以帮助创建更丰富的网页效果。在编辑器中可以直接编辑CSS样式和JavaScript代码，并实时查看效果。

4）网页上传和发布

Dreamweaver集成了FTP功能，可以直接将编辑好的网页上传到服务器。点击"Site"菜单，选择"Manage Sites"，配置好站点设置，即可进行上传和发布。

5）Dreamweaver模板和库

Dreamweaver提供模板和库功能，可以保存和复用常用的网页元素和样式，提高开发效率。

参考文档：https://www.cjavapy.com/article/3299/

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

在线咨询

上一篇：网站建设中必须遵守的网页版式设计法则
下一篇：「2022 年」崔庆才 Python3 爬虫教程 -

您的项目需求

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

整合营销服务商

免费在线文字转语音工具，免费AI配音网站

1. TTS-Online

2. TTSMaker

3. Text To Speech

4. 琅琅配音

5.TTS-Online原神免费文本转语音

1、Visual Studio Code（VS Code ）

2、Sublime Text

3、Dreamweaver

您的项目需求