【项目背景】
最近有一个WEB项目需要用到语音告警功能,对就是实现文字转为语音,然后播放出来
【问题解决】
尝试过几种思路
第一种用JAVA 引用jacob 包,实现语音转换,最后效果,windows环境能够正常运行,但是,放到了linux 环境里面就没办法正常运行了,报错就是提示,无法初始化相关的资源文件,网上搜索了一大堆办法,基本上都是说,缺少dll文件,然后版本不兼容的问题,苦苦挣扎无果,随机就放弃。
第二种,考虑通过JAVA把文字转成wav文件,然后再通过页面上播放器,播放出来,但是这个思路太复杂了,而且稳定性较差,网上评论说效果不好断断续续的,随机放弃。
第三种,发现语音告警从服务器环境到前端页面最终播放出来,要经过层层的处理和传输,那么为什么不直接在前端页面上做转换呢,
方式1,使用百度的语音接口直接实现,缺点需要使用到公网环境
<html>
<head>
<script>
function doTTS() {
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://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=3&spd=9&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();
}
</script>
</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://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&per=3&text=请输入文字" type="audio/mpeg">
<embed id="tts_embed_id" height="0" width="0" src="">
</audio>
</div>
</body>
</html>
方法2,使用JS方法调用windows的内置语音,优点就是能够补齐方式1中公网环境的缺陷,目前采用的就是这个方式,效果还行
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>语音测试</title>
<script type="text/javascript">
var speaker = new window.SpeechSynthesisUtterance();
var speakTimer,
stopTimer;
// 开始朗读
function speakText() {
var context = document.getElementById('ttsText');
clearTimeout(speakTimer);
window.speechSynthesis.cancel();
speakTimer = setTimeout(function () {
speaker.volume = 0.9
speaker.text = context.innerHTML;
window.speechSynthesis.speak(speaker);
}, 200);
}
// 停止朗读
function stopSpeak() {
clearTimeout(stopTimer);
clearTimeout(speakTimer);
stopTimer = setTimeout(function () {
window.speechSynthesis.cancel();
}, 20);
}
</script>
</head>
<body>
<p id="ttsText">2020年的“五一”,注定是一个不平凡的节日。<br>新冠肺炎疫情突如其来,14亿人守望相助,交出全球战“疫”的“中国答卷”。<br>此时,春回大地,万物复苏。疫情的阴霾逐渐散去,田间地头、工厂车间,复工复产正在不断推进……<br>“五一”国际劳动节到来之际,让我们在这个春天,追寻奋斗者的脚步,聆听奋斗者的声音。</p>
<div>
<input type="button" id="start_btn" onclick="speakText()" value="播放">
<input type="button" id="cancel_btn" onclick="stopSpeak()" value="取消">
</div>
</body>
</html>