使用百度语音接口,实现文字转化成语音播放

<!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>
</head>
<body>
<div>
<input type="text" id="ttsText">
<input type="button" id="tts_btn" onclick="doTTS()" value="获取新的语音">
<input type="button" id="tts_btns" onclick="zanting()" value="暂停">
<input type="button" id="tts_btns" onclick="jixu()" value="继续/播放">
<input type="button" id="tts_btns" onclick="shichang()" value="时长">
</div>
<div id="bdtts_div_id">
<audio id="tts_autio_id" >
<source id="tts_source_id" src="https://tsn.baidu.com/text2audio?tex=我喜欢你&lan=zh&per=4&cuid=1&ctp=1&tok=24.71726d18e11bf62415c11e3c2aa88121.2592000.1544946462.282335-14837008" type="audio/mpeg">
<embed id="tts_embed_id" height="0" width="0" src="">
</audio>
</div>
</body>
</html>
<script> function zanting() {
var ttsAudio = document.getElementById('tts_autio_id');
ttsAudio.pause();
}
function jixu() {
var ttsAudio = document.getElementById('tts_autio_id');
ttsAudio.play();
} function shichang() {
var ttsAudio = document.getElementById('tts_autio_id');
alert(ttsAudio.duration);
} function doTTS(){
var ttsDiv = document.getElementById('bdtts_div_id');
var ttsAudio = document.getElementById('tts_autio_id');
var ttsText = document.getElementById('ttsText').value; // 这样为什么替换不了播放内容
/*var ssrcc = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=10&text='+ttsText;
document.getElementById('tts_source_id').src=ssrcc;*/ // 这样就可实现播放内容的替换了
ttsDiv.removeChild(ttsAudio);
var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
var sss = '<source id="tts_source_id" src="https://tsn.baidu.com/text2audio?tex='+ttsText+'&lan=zh&per=4&cuid=1&ctp=1&tok=24.71726d18e11bf62415c11e3c2aa88121.2592000.1544946462.282335-14837008" 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>

[js常用]文字转化成语音的更多相关文章

  1. js将文字转化为语音并播放

    js将页面中的某些文字信息转化为语音并自动播放 <!DOCTYPE html><html lang="en"><head> <meta c ...

  2. UI进阶 科大讯飞(2) 语音合成(文字转换成语音)

    科大讯飞开放平台.SDK下载.添加静态库.初始化见UI进阶 科大讯飞(1) 语音听写(语音转换成文字) 实现语音合成 功能实现步骤: 导入头文件 创建文字识别对象 指定文字识别后的回调代理对象 开启文 ...

  3. js将字符串转化成函数:eval(logOutCallbackFun+"()");

    js将字符串转化成函数:eval(logOutCallbackFun+"()");

  4. python将文本转化成语音并播放

    一.问题 在学习的过程中,我们会涉及到将文本信息,转化成语音的过程,比如:我爬取了一个小说的网站,我要将里面的内容进行语音处理.目前能够进行语音的方法还是很多,比如win32com,百度ai. 二.解 ...

  5. js中对象转化成字符串、数字或布尔值的转化规则

    js中对象可以转化成 字符串.数字.布尔值 一.对象转化成字符串: 规则: 1.如果对象有toString方法,则调用该方法,并返回相应的结果:(代码通常会执行到这,因为在所有对象中都有toStrin ...

  6. [js常用]百度将文字转化为语音实例

    嗷嗷方便的文字转语音,不过用的时候记得到百度语音上申请key,免费的.之前在网络上看到有人写了一部分,自己丰富下,以后用也方便 <!DOCTYPE html PUBLIC "-//W3 ...

  7. js实现xml转化成字符串

    xml字符串转xml dom经常遇到在js里面需要解析xml的问题,然而有时候,后台返回的不是dom 而是string 字符串,需要将字符串转换成dom对象,然后才可以进行节点值解析和读取functi ...

  8. IOS-将长文字转化成图片方法

    我们在看微博时,会看到一些长图片上的显示文章,现在就介绍下如何实现.分析下还是很简单的,总结如下:1.计算文字区域的高 2.利用UIGraphics图形上下文方法来实现 3.验证方法:UIImageW ...

  9. win 文字转化为语音

    mshta vbscript:createobject("sapi.spvoice").speak("hello")(window.close)

随机推荐

  1. http 协议 c++代码 获取网页

    最近接触了些 html 和 JavaScript,索性了解下 http 协议.在园子里找到了 HTTP协议详解,图文并茂,很爽! 于是小小的尝试了下 #include <WinSock2.h&g ...

  2. php 删除二维数组中某个key值

    /** * 根据key删除数组中指定元素 * @param array $arr 数组 * @param string/int $key 键(key) * @return array */ priva ...

  3. Java对象的大小及应用类型

    基础类型数据的大小是固定的,对于非基本类型的java对象,其大小就值得商榷了.      在java中一个空Object对象的大小是8byte,这个大小只是保存堆中没有任何属性的对象的大小,看下面的语 ...

  4. 删除 Win10 更新后的 Z 盘符(已验证)

    如果你有一些不希望被访客看见的文件.照片或者视频,希望将它隐藏在一个只有自己知道的地方,那么今天的这篇教程非常适合你.我们要实现的最终效果是这样的:在Win10的"此电脑"中,有这 ...

  5. jvm(1)类加载(一)(加载过程,双亲加载)

    JVM类加载器机制与类加载过程 jvm虚拟机的种类: Hotspot(Oracle)(基本上都是在说这个) J9, JikesRVM(IBM) Zulu, Zing (Azul) Launcher是一 ...

  6. Sip协议

    会话初始协议.SIP是IETF标准进程的一部分,它是在诸如SMTP(简单邮件传送协议)和HTTP(超文本传送协议)基础之上建立起来的(请求应答的通讯模式).微信采用了自主研发的SYNC协议,他通过“握 ...

  7. 适配 iOS 11 & iPhone X 大全

    1.升级iOS11后造成的变化 1. 1升级后,发现某个拥有tableView的界面错乱,组间距和contentInset错乱,因为iOS11中UIViewController的automatical ...

  8. QuantLib 金融计算

    我的微信:xuruilong100 <Implementing QuantLib>译后记 QuantLib 金融计算 QuantLib 入门 基本组件之 Date 类 基本组件之 Cale ...

  9. RDLC_部署到不同的浏览器

    首先我用的是vs2015 的reportview插件 在数据库中应该配置报表的服务器地址,在项目中添加ReportViewer 插件,单独用一个页面显示接收报表 <form id="f ...

  10. EF基础知识小记三(设计器=>数据库)

    本文主要介绍通过EF的设计器来同步数据库和对应的实体类.并使用生成的实体上下文,来进行简单的增删查该操作 1.通过EF设计器创建一个简单模型 (1).右键目标项目添加新建项 (2).选择ADO.Net ...