<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>语音朗读</title>

    <style>

        body{

            padding: 20px;

        }

        textarea{

            width: 100%;

            height: 260px;

        }

    </style>

</head>

<body>

<textarea name=""  cols="30" rows="10" id="sppekContent" placeholder="输入一些内容试试..."></textarea>

<a href="javascript:;" id="du">朗读</a>

<a href="javascript:;" id="zanting">暂停</a>

<a href="javascript:;" id="chongxing">重新开始</a>

<a href="javascript:;" id="stop">停止</a>

<script>

  window.onload=function () {

      /**

       * @returns {{start: start, pause: pause, resume: resume, stop: stop}}

       */

      function speek(){

          let speechInstance = new SpeechSynthesisUtterance();

          // console.log(speechInstance);

          // console.log(speechSynthesis.getVoices());

          return {

              /**

               * @param opitions {container:'',Lang:''}

               */

              start:function (opitions) {

                  let container=opitions.container;

                  let lang=opitions.Lang===undefined||""?"zh-CN":opitions.Lang;

                  let content=document.querySelector(container).value;

                  if(content!='') {

                      speechInstance.text = content;

                      speechInstance.lang = lang;

                      speechSynthesis.speak(speechInstance);

                  }else{

                      console.log("请输入内容");

                  }

              },

              pause:function () {

                  speechSynthesis.pause();//暂停

              },

              resume:function(){

                 speechSynthesis.resume();//重新开始

              },

              stop:function () {

                  speechSynthesis.cancel();//结束

              }

          }

      }

      document.querySelector("#du").onclick=function () {

          speek().start({container:"#sppekContent",Lang:''});

      };

      document.querySelector("#zanting").onclick=function () {

          speek().pause();

      };

      document.querySelector("#chongxing").onclick=function () {

          speek().resume();

      };

      document.querySelector("#stop").onclick=function () {

          speek().stop();

      }

  }

</script>

</body>

</html>

　　

speechSynthesis，TTS语音合成。的更多相关文章

  1. android用讯飞实现TTS语音合成 实现中文版

    Android系统从1.6版本开始就支持TTS(Text-To-Speech),即语音合成.但是android系统默认的TTS引擎:Pic TTS不支持中文.所以我们得安装自己的TTS引擎和语音包. ...

  2. 安卓TTS语音合成经验分享（科大讯飞语音+）集成

    应用场景:足浴软件,技师钟房安排调派和队列排序查看,语音播报提醒.老程序是使用双屏显卡,windows系统PC上运行一个无人值守桌面程序.如今安卓机顶盒(WIFI)和MINI电视棒通过HDMI接口和支 ...

  3. 解读 Android TTS 语音合成播报

    随着从事 Android 开发年限增加,负责的工作项目也从应用层开发逐步过渡到 Android Framework 层开发.虽然一开始就知道 Android 知识体系的庞大,但是当你逐渐从 Appli ...

  4. 语音识别（语音转文字）&& 语音合成（文字转语音）

    [语音合成API]SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等 // 语音播报 s ...

  5. 微软语音引擎 TTS 最基本使用

    TTS(TextToSpeak) 需求:需要借助程序实现 文字合成语音/语音识别. TTS 介绍就不说了,这里介绍非常详细 >>> TTS详细介绍  +  SAPI(微软的TTS语音 ...

  6. PHP调用语音合成接口

    百度TTS 语音合成 //百度文件转换成语音 private function toSpeech($text) { define('DEMO_CURL_VERBOSE', false); $obj=[ ...

  7. 开源项目大全 >> ...

    http://www.isenhao.com/xueke/jisuanji/kaiyuan.php   监控系统-Nagios 网络流量监测图形分析工具-Cacti 分布式系统监视-zabbix 系统 ...

  8. 基于meanshift的手势跟踪与电脑鼠标控制（手势交互系统）

    基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统) zouxy09@qq.com http://blog.csdn.net/zouxy09 一年多前开始接触计算机视觉这个领域的时候,年幼无 ...

  9. opencv 相关一个很好的博客

    http://blog.csdn.net/zouxy09/article/category/1218765 图像卷积与滤波的一些知识点 图像卷积与滤波的一些知识点zouxy09@qq.comhttp: ...

随机推荐

  1. java面试题之谈谈你对java的理解

    平台无关性:一处编译到处运行 GC:不用像c++那样手动释放堆内容 语言特性:泛型.反射.lamda表达式 面向对象:封装.继承.多态 类库:集合.并发库.网络库.IO库 异常处理

  2. 2018.7.31 Noip2018模拟测试赛（十六）

     日期: 七月最后一天  总分: 300分  难度: 提高 ~ 省选  得分: 30分(少的可怜) 我太弱了:(题目目录) T1:Mushroom追妹纸 T2:抵制克苏恩 T3:美味 失分分析:(QA ...

  3. 【POJ3352】Road Construction（边双联通分量）

    题意:给一个无向图,问最少添加多少条边后能使整个图变成双连通分量. 思路:双连通分量缩点,缩点后给度为1的分量两两之间连边,要连(ans+1) div 2条 low[u]即为u所在的分量编号,flag ...

  4. CSS3 动画卡顿性能优化解决方案--摘抄

    最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...

  5. Linux 之 文件搜索命令

    文件搜索命令 参考教程:[千峰教育] 文件搜索定位 grep: 作用:通用规则表达式分析程序,是一种强大的文本搜索工具, 它能使用正则表达式搜索文本,并把匹配的行打印出来. 格式:grep [选项] ...

  6. [原创][FPGA]时钟分频之奇分频（5分频）

    0. 简介 有时在基本模块的设计中常常会使用到时钟分频,时钟的偶分频相对与奇分频比较简单,但是奇分频的理念想透彻后也是十分简单的,这里就把奇分频做一个记录. 1. 奇分频 其实现很简单,主要为使用两个 ...

  7. 作为程序员，再也不想和PM干架了

    上周,又看见有程序和PM(产品经理)吵了起来,大致是因为晚上就要上线了,下午的时候PM来说要改点需求,但程序不愿意.兴许是天气热了,大家都很烦躁,于是一言不合就发飙了,最终还是程序老大介入才解决了问题 ...

  8. 树（弱化版）（lca）

    3306: 树 时间限制: 10 Sec  内存限制: 256 MB 题目描述 给定一棵大小为 n 的有根点权树,支持以下操作:  • 换根  • 修改点权      • 查询子树最小值 输入 第一行 ...

  9. 中途相遇法 解决 超大背包问题 pack

    Description [题目描述] 蛤布斯有n个物品和一个大小为m的背包,每个物品有大小和价值,它希望你帮它求出背包里最多能放下多少价值的物品. [输入数据] 第一行两个整数n,m.接下来n行每行两 ...

  10. iOS Framework: Introducing MKNetworkKit (MKNetworkKit介绍，入门，翻译)

    这片文章也有塞尔维亚-克罗地亚语(由Jovana Milutinovich翻译)和日语(由@noradaiko翻译) 如果有个一个网络库能够自动的为你处理cache该有多好啊. 如果有一个网络库能够在 ...