<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script>

        function doTTS() {

            var ttsDiv = document.getElementById('bdtts_div_id');

            var ttsAudio = document.getElementById('tts_autio_id');

            var ttsText = document.getElementById('ttsText').value;

            // 文字转语音

            ttsDiv.removeChild(ttsAudio);

            var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';

            var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=3&spd=5&text=' + ttsText + '" 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>

</head>

<body>

    <div>

        <input type="text" id="ttsText" />

        <input type="button" id="tts_btn" onclick="doTTS()" value="播放" />

    </div>

    <div id="bdtts_div_id">

        <audio id="tts_autio_id" autoplay="autoplay">

          <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&amp;ie=UTF-8&amp;spd=5&amp;per=1&amp;text=请输入文字" type="audio/mpeg">

          <embed id="tts_embed_id" height="0" width="0" src="">

        </audio>

    </div>

</body>

</html>

【转】调用百度API，HTML在线文字转语音播报的更多相关文章

  1. 调用百度API进行文本纠错

    毕设做的是文本纠错方面,然后今天进组见研究生导师 .老师对我做的东西蛮感兴趣.然后介绍自己现在做的一些项目,其中有个模块需要有用到文本纠错功能. 要求1:有多人同时在线编辑文档,然后文档功能有类似Wo ...

  2. 调用百度API返回经纬度

    后台调用百度API接口生成: import java.io.BufferedReader; import java.io.IOException;import java.io.InputStreamR ...

  3. java文字转语音播报功能的实现方法

    java文字转语音播报功能的实现方法 一.pom.xml引入jar包依赖 <!-- https://mvnrepository.com/artifact/com.jacob/jacob 文字转语 ...

  4. 前端调用百度API

    <!DOCTYPE html> <html> <head>         <meta charset="UTF-8">       ...

  5. Vue 通过调用百度API获取地理位置-经度纬度省份城市

    一.首先在百度api注册获得ak密钥 二.新建js文件,我命名为loadBMap.js,里面创建script,代码如下: /** * 加载地图 * @param {Function} callback ...

  6. Android实例-调用GOOGLE的TTS实现文字转语音(XE7+小米2)(无图)

    注意:在手机上必须选安装文字转语音引擎“google Text To Speech”地址:http://www.shouji56.com/soft/GoogleWenZiZhuanYuYinYinQi ...

  7. 调用GOOGLE的TTS实现文字转语音(XE7+小米2)(XE10.1+小米5)

    相关资料: 注意:在手机上必须选安装文字转语音引擎“google Text To Speech”地址:http://www.shouji56.com/soft/GoogleWenZiZhuanYuYi ...

  8. Android实例-调用GOOGLE的TTS实现文字转语音(XE7+小米2)(XE10.1+小米5)

    相关资料: 注意:在手机上必须选安装文字转语音引擎“google Text To Speech”地址:http://www.shouji56.com/soft/GoogleWenZiZhuanYuYi ...

  9. iOS语音识别，语音播报，文字变语音播报，语音变文字

    首先使用的是科大讯飞的sdk 1.语音识别部分 AppDelegate.m #import "AppDelegate.h" #import <iflyMSC/iflyMSC. ...

随机推荐

  1. windows下生成ssl

    1.安装git window 需要安装 git 按部就班即可 https://git-scm.com/ 2.安装完之后,打开 Git Bash 输入以下命令并执行,然后一路按“回车”即可,效果见图: ...

  2. C# 读取带有命名空间的xml

    XML文本: <?xml version="1.0" encoding="utf-8"?> <ECG xmlns:xsi="http ...

  3. C# vb .NET读取识别条形码线性条码ISBN

    ISBN是比较常见的条形码编码规则类型的一种.如何在C#,vb等.NET平台语言里实现快速准确读取该类型条形码呢?答案是使用SharpBarcode! SharpBarcode是C#快速高效.准确的条 ...

  4. Linux组管理(6)

    在linux中每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念. 文件/目录的所有者:一般为文件的创建者,谁创建了该文件,就自然成为该文件的所有者 查看文件 ...

  5. 要什么 Photoshop，会这些 CSS 就够了

    标题党一时爽,一直标题党一直爽 还在上大学那会儿,我就喜欢玩 Photoshop.后来写网页的时候,由于自己太菜,好多花里胡哨的效果都得借助 Photoshop 实现,当时就特别希望 CSS 能像 P ...

  6. Qt之Q_PROPERTY宏理解

    在初学Qt的过程中,时不时地要通过F2快捷键来查看QT类的定义,发现类定义中有许多Q_PROPERTY的东西,比如最常用的QWidget的类定义: Qt中的Q_PROPERTY宏在Qt中是很常用的,那 ...

  7. echarts 折线图百分比 tooltip 实例 两种方法

    方法一 在知道有几个类型时:下面有五个类型 tooltip : { show : true, trigger: 'axis', formatter: '{b0}<br/>{a0}: {c0 ...

  8. 【转载】Gradle学习 第四章：安装Gradle

    转载地址:http://ask.android-studio.org/?/article/16 4.1. Prerequisites 前提条件Gradle requires a Java JDK or ...

  9. 【软件工程第二次作业】个人项目：WordCountPy

    一.GitHub 地址 项目 GitHub 地址为:https://github.com/bytemo/WordCountTool 二.PSP表格 PSP2.1 Personal Software P ...

  10. 锁、分布式锁、无锁实战全局性ID

    1.为什么要使用锁 当发生并发时,会产生多线程争夺一个资源,为保证资源的唯一性. JVM锁:对象锁,死锁,重入锁,公平锁,偏向锁 分布式锁:数据库 nosql .zookeeper 面试题:如何排查死 ...