HTML5 中使用浏览器进行语音合成以及使用免费语音合成进行朗读

<!-- dengmengxin -->
<!-- 2019年03月19日 -->
<!-- 1.0 -->
<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>HTML5语音合成播放以及百度语音合成</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head><body><h3>HTML5语音合成</h3><div><select id="langs"></select></div><div><textarea id="textarea"></textarea></div><div><button id="play">播放</button></div><h3>免费百度语音合成</h3><div><!-- https://tts.baidu.com/text2audio?tex=百度语音合成&cuid=baike&lan=ZH&ctp=1&pdt=301&vol=9&rate=32&per=6 --><p>lan:<input id="lan" type="text" value="zh" />(ZH/EN)</p><p>pdt:<input id="pdt" type="number" value="301" /></p><p>vol:<input id="vol" type="number" value="9" /></p><p>rate:<input id="rate" type="number" value="0" /></p><p>per:<input id="per" type="number" value="0" /></p><p>text:<textarea id="ttsBaiduText">百度语音合成</textarea></p><p><button id="ttsBaiduPlay">语音合成</button></p></div>
</body>
<script type="text/javascript">// 检查浏览器支持if ('speechSynthesis' in window) {$(function () {// 使用计时器异步获取语音包var langsInterval = setInterval(() => {// 设置语言var langs = window.speechSynthesis.getVoices();if (langs.length > 0) {clearInterval(langsInterval);}for (var index = 0; index < langs.length; index++) {var lang = langs[index];var option = $("<option>").val(lang.lang).text(lang.name + ' - ' + lang.lang);$("#langs").append(option);}}, 1000);});$("#play").on('click', function (e) {var text = $("#textarea").val();var msg = new SpeechSynthesisUtterance();msg.text = text;msg.lang = $("#langs").val();window.speechSynthesis.speak(msg);});} else {// Ah man, speech synthesis isn't supported.alert("抱歉浏览器不支持语音合成朗读")}$('#ttsBaiduPlay').on('click', function (e) {var ttsUrl = 'https://tts.baidu.com/text2audio?';var ttsText = $('#ttsBaiduText').val();// 处理参数var urlParameter = [];urlParameter.push('lan=' + $.trim($('#lan').val()));urlParameter.push('pdt=' + $.trim($('#pdt').val()));urlParameter.push('vol=' + $.trim($('#vol').val()));urlParameter.push('per=' + $.trim($('#per').val()));urlParameter.push('cuid=baike');urlParameter.push('ctp=1');urlParameter.push('tex=' + encodeURIComponent(ttsText));var address = ttsUrl + urlParameter.join('&');// 如果浏览器支持，可以设置autoplay，但是不能兼容所有浏览器var audio = document.createElement('audio');audio.autoplay = true;audio.preload = true;audio.controls = true;audio.src = address;audio.addEventListener('ended', function () {// 设置则播放完后移除audio的dom对象document.body.removeChild(audio);}, false);audio.addEventListener('error', function () {document.body.removeChild(audio);console.log('合成出错url：' + address + '\nAudio错误码：' + audio.error.code);}, false);audio.loop = false;audio.volume = 1;// 在body元素下apppend音频控件document.body.append(audio);});</script></html>

该例子为个人学习用，请勿投入商业使用。

转载请注明出处

HTML5 中使用浏览器进行语音合成以及使用免费语音合成进行朗读相关推荐

谈谈HTML5中的history.pushSate方法，弥补ajax导致浏览器前进后退无效的问题
移动端为了减少页面请求,有时候需要通过单页面做成多页面的效果,最近有这么个需求,表单填完后执行第一步,然后执行第二步,第二步执行完后再执行第三步,每一步都要保留之前的数据.这种情况用单页面实现再合适不 ...
html文件显示controls,html5中设置或返回浏览器应当显示标准的音视频控件的属性controls...
实例为视频启动控件:myVid=document.getElementById("video1"); myVid.controls=true; 定义和用法 controls 属性 ...
html5中加视频的代码,向HTML中插入视频并兼容所有浏览器的方法
向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些,后者兼容性让人头疼最常用的向HTML中插入视频的方法有两种,一种是古老的标签,一 ...
浏览器html5临时文件,电脑中清理浏览器临时文件夹的方法
用户在电脑中浏览网页的时候,浏览器都会自动下载一些文件,虽然这些文件是临时的,但是如果长时间不清理,这些临时文件就会占用磁盘空间.接下来,系统城小编就带大家看看电脑中清理浏览器临时文件夹的具体方法. ...
html5 lang作用,HTML5中的lang属性，zh
先提供资源.如果我弄错了什么,请以这些文档为准: W3C文档.IANA已登记的子标签.BCP 47.RFC 5646. 二.格式简介先上一张图片: 一个Language Tags,由①到⑦一共四个子 ...
html5代码转换为视频,HTML5中的视频代码详解
摘要腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
HTML5学习之二：HTML5中的表单2
(本内容部分节选自<HTML 5从入门到精通>) 对表单的验证 -------------------------------------------------------- •1.re ...
html5 minlength,HTML5中是否有minlength验证属性？
回答(16) 3 years ago 如果想做出这种行为, 总是 show a small prefix on input field 或 the user can't erase a prefix ...
HTML5中关于wheel事件兼容性处理
2019独角兽企业重金招聘Python工程师标准>>> 在html5中存在,滚轮滚动事件判断需要使用 wheel的时间,但各大版本浏览器使用的方式差异性却非常大,总体来说,目前whe ...

HTML5 中使用浏览器进行语音合成以及使用免费语音合成进行朗读

HTML5 中使用浏览器进行语音合成以及使用免费语音合成进行朗读相关推荐

最新文章

热门文章