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

<!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. Flask从入门到精通之Flask表单渲染成HTML

    表单字段是可调用的,在模板中调用后会渲染成HTML.假设视图函数把一个NameForm 实例通过参数form 传入模板,在模板中可以生成一个简单的表单,如下所示: <form method=&q ...

  2. WebDriverAPI（5）

    将当前浏览器截屏 测试网址 http://www.baidu.com Java语言版本实例 @Test public void captureScreenInCurrentWindows() { dr ...

  3. WPF快速实现XML可视化编辑工具

    虽然最近业余时间主要都放在研究AngularJS上了,不过由于正好要帮朋友做一个生成XML的小工具,顺便又温顾了一下WPF.虽然这个时代相对于Web应用和移动App,Windows应用程序是越来越少了 ...

  4. h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗

    这段时间一直在着手h5开发手机端聊天系统——html5仿微信聊天室,最近又在原先基础上开发了一个仿微信.微博网页web版聊天系统,使用到了HTML5+css3+jQuery+wcpop等技术开发,弹窗 ...

  5. 有关Hadoop的六大误解

    迄今为止,Hadoop和大数据实际上是同义词.然而随着大数据的炒作不断升温,出现了很多对Hadoop如何应用于大数据的误解. Hadoop是一种用于存储和分析大型数据集开源软件框架,可处理分布在多个现 ...

  6. nodejs（三） --- nodejs进程与子进程

    嗯,对于node的学习还远远不够,这里先做一个简单的api的记录,后续深入学习. 第一部分:nodejs中的全局对象之process进程对象 在node中的全局对象是global,相当于浏览器中的wi ...

  7. python中如何打印某月日历

    Calendar模块有很广泛的方法用来处理年历和月历,例如打印某月的月历: import calendar cal = calendar.month(2017, 10) print ("以下 ...

  8. B+树 -- Java实现

    一.B+树定义 B+树定义:关键字个数比孩子结点个数小1的树. 除此之外B+树还有以下的要求: B+树包含2种类型的结点:内部结点(也称索引结点)和叶子结点.根结点本身即可以是内部结点,也可以是叶子结 ...

  9. elasticsearch 导入基础数据并索引之 geo_shape

    我们看到的图形, 实际是由点来完成的, 有2种类型的格子模型可用于地理星座, 默认使用的是geoHash, 还有一种4叉树(quad trees), 也可用于 判断形状与索引的形状关系 1), int ...

  10. textarea的placeholder属性内容折行显示(PC和移动端端)

    1.PC端折行方法 placeholder="字体 字体" 可以使其折行显示   2.移动端折行方法 webkit内核 textarea::-webkit-input-placeh ...