音频合成（H5自带播放声音与TTS播放）
龚苏燕
最近项目要用到声音播放，当有新订单时要播放订单价格，有新发票有播放声音。
那时就找到了H5的speechSynthesis和TTS，
之后因为某种需求，自己做了用N个audio标签来做了订单价格的播放。。。（崩溃~）
以下只是简单例子，供参考
H5的speechSynthesis：
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>admin-vue</title>
</head>
<body>
<input type="text" id='val' value="99.99" placeholder='你要转换的文字'>
<button id="btn" >提交</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
var speechSU = new window.SpeechSynthesisUtterance();
btn.onclick = function()
{
var val=document.getElementById("val").value;
speechSU.text = val;
window.speechSynthesis.speak(speechSU);
}
</script>
</body>
</html>
百度TTS语音合成：
https://ai.baidu.com/ai-doc/SPEECH/Gk38y8lzk
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>admin-vue</title>
</head>
<body>
<input type="text" id='val' value="99.99" placeholder='你要转换的文字'>
<button id="btn" >提交</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
var speechSU = new window.SpeechSynthesisUtterance();
btn.onclick = function()
{
var val=document.getElementById("val").value;
var zhText =encodeURI(val);
document.write("<audio autoplay=\"autoplay\">");
document.write("<source src=\"http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=3&text="+ zhText +"\" type=\"audio/mpeg\">");
document.write("<embed height=\"0\" width=\"0\" src=\"http://tts.baidu.com/text2audio?lan=en&ie=UTF-8&spd=2&text="+ zhText +"\">");
document.write("</audio>");
}
</script>
</body>
</html>
类似资料：