有时候开发webapp需要用到语音提示功能,下面使用前后端方式实现语音提示。
两者比较:前端方式实现起来很简单,用在web应用中也较为灵活,但声音不太真 实(普通话不太好,断句也不行)。而调用百度的语音API的声音很真实,就像专业主持人一般。
一、前端js实现
样例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>语音test</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//主要代码
let msg = new SpeechSynthesisUtterance($("#try").val());
/*console.log(msg)
msg.rate = 2; //播放语速
msg.pitch = 5; //音调高低
msg.text = "播放文本 ";
msg.volume = 1;// 播放音量
*/
speechSynthesis.speak(msg);
});
});
</script>
</head>
<body>
<h1>语音测试</h1>
<input id="try" value="这是测试的内容"/>
<button id="btn"