文字转语音的方法及demo

最新推荐文章于 2024-09-09 16:25:58 发布

great1314

最新推荐文章于 2024-09-09 16:25:58 发布

阅读量1.4k

点赞数 2

文章标签： html5 javascript 机器学习 jquery css

本文链接：https://blog.csdn.net/great1314/article/details/105190951

版权

文字转语音的方法及demo（亲测可行）

在网上看了很多的语音合成方法即文字转语音，目前我总结了两种简单的方法，1.js的SpeechSynthesisUtterance，语音效果不错。2.百度免费测试语音接口,如果申请apikey语音效果较好，不申请也可以，不过语音低沉一点。很多语音合成接口需要申请apikey,科大讯飞还有每天限制3000次，如果想调用多次需要付费。所以提供以下两种方法供大家参考，demo可以直接运行使用，希望大家能对我的研究给予支持。

1.js的SpeechSynthesisUtterance方法

以下是我写的demo，可以尝试运行,语音效果不错，参数可以自己再调节。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js将文字转化为语音并播放</title>

</head>
<body>
<div>
<input type="text" id="ttsText">
<input type="button" id="tts_btn" onclick="speak()" value="播放">
</div>
</body>
<script>
function speak() {
    var ttsText = document.getElementById('ttsText').value;
    var u = new SpeechSynthesisUtterance();
    u.text = ttsText;
    //汉语
    u.lang = 'zh';
    u.rate =0.5;       // 播放语速
    u.pitch = 10;    // 音调高低
    speechSynthesis.speak(u);
}
</script>
</html>

2.使用百度免费语音合成接口方法

此处有两种情况，第一种情况如果不申请百度apiKey就是语音会低沉一点，如果项目不是要求那么高可以直接使用，免费无限制。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度地图将文字转化为语音并播放</title>
<!-- 这里调用的是百度文字转语音开放API -->

</head>
<body>
<div>
<input type="text" id="ttsText">
<input type="button" id="tts_btn" onclick="doTTS()" value="播放">
</div>
<div id="bdtts_div_id">
<audio id="tts_autio_id" autoplay="autoplay">
<source id="tts_source_id" src="http://tsn.baidu.com/text2audio?lan=zh&amp;ie=UTF-8&amp;vol=10&amp;spd=4&amp;per=0&amp;pit=15&amp;text=请输入文字" type="audio/mpeg">
<embed id="tts_embed_id" height="0" width="0" src="">
</audio>
</div>
</body>
<!-- <script src="jquery-1.8.3.min.js"></script> -->
<script>
function doTTS() {
    console.log('start');
    var ttsDiv = document.getElementById('bdtts_div_id');
    var ttsAudio = document.getElementById('tts_autio_id');
    var ttsText = document.getElementById('ttsText').value;

    // 文字转语音
    ttsDiv.removeChild(ttsAudio);
    var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
    var sss = '<source id="tts_source_id" src="http://tsn.baidu.com/text2audio?lan=zh&ie=UTF-8&per=0&spd=4&vol=10&pit=15&text=' + ttsText + '" type="audio/mpeg">';
    var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
    var au2 = '</audio>';
    ttsDiv.innerHTML = au1 + sss + eee + au2;

    ttsAudio = document.getElementById('tts_autio_id');

    ttsAudio.play();
}

/*
代码中改变传参可更改配置：

lan=zh（语言zh:中文；en:英文；fr:法文；）
ie=UTF-8（字符集）
per=3（每3个字符停顿）
spd=5（语音播放速度，数字越大越快0-15）
pit 选填 音调，取值0-9，默认为5中语调
vol 选填 音量，取值0-15，默认为5中音量
per 选填 发音人选择, 0为普通女声，1为普通男生，3为情感合成-度逍遥，4为情感合成-度丫丫，默认为普通女声
text=“”（需要转换的文字）*/
</script>
</html>

第二种情况自己可以申请一个apiSky,获取token,如何申请，链接: link.这样可以有很多语音的选择，目前是7种，也可以很好的控制语音，调节音调，声音，男音女音什么的，直接将下面的代码放到百度语音免费使用的第一种情况中就可以了，代码如下：

/* 代码中换成你自己的key和token */

var aid = "palmap";
var access_token = "24.a6952b9ac7512bc86f19f8ea77359b76.2592000.1495642079.282335-9565046";
var service_api = "http://tsn.baidu.com/text2audio?lan=zh&cuid=" + aid + "&ctp=1&tok=" + access_token;