<!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. bzoj3730 [震波][动态树分治+线段树+LCA]

    震波 Time Limit: 15 Sec  Memory Limit: 256 MBSubmit: 1573  Solved: 358[Submit][Status][Discuss] Descri ...

  2. 写论文,关于word的技巧

    当段落的行间距为固定值的时候,图片会出现显示不全的情况,将行间距先改了再插入图片就没问题了. 从引用那边自动添加目录. ctrl+H打开可以使用通配符,改变字母或者数字的样式等

  3. xsy 1836 - Shop

    from NOIP2016模拟题36 Description 商店里有n种背包和m种物品,物品体积为1到m,背包容积<=m 给出n个背包的容积 现在要求出这样一个物品集合,满足: 1)对于任意一 ...

  4. Road(bzoj 2750)

    Description C国有n座城市,城市之间通过m条单向道路连接.一条路径被称为最短路,当且仅当不存在从它的起点到终点的另外一条路径总长度比它小.两条最短路不同,当且仅当它们包含的道路序列不同.我 ...

  5. freemarker实现自定义指令和自定义函数

    自定义指令: 1.指令在前台实现 <#macro name param1,param2,param3...paramN> </#macro> 2.指令在后台实现 1.实现Tem ...

  6. 如何在requirejs下引用bootstrap

    原本以为只要require过来就能用 require(['jquery','underscore','bootstrap','cache'],function($,U,B,C){ 但发现会报错,类似未 ...

  7. 应用seajs 做了个向上滚动的demo

    目录结构式这样滴 sea sea-module jquery-1.10.2.min.js sea.js static css t.min.css img test test.min.js main.j ...

  8. How to debug Android Native Application with eclipse

    This blog is inspired by this tutorial http://mhandroid.wordpress.com/2011/01/23/using-eclipse-for-a ...

  9. php--strlen()与mb_strlen的作用与区别

    在PHP中,strlen与mb_strlen是求字符串长度的函数PHP内置的字符串长度函数strlen无法正确处理中文字符串,它得到的只是字符串所占的字节数.对于GB2312的中文编码,strlen得 ...

  10. Mongodb的使用(下)

    高级操作 讲解关于mongodb的高级操作,包括聚合.主从复制.分片.备份与恢复.MR 完成python与mongodb的交互 聚合 aggregate 聚合(aggregate)主要用于计算数据,类 ...