speechSynthesis，TTS语音合成。
<!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语音合成。的更多相关文章
- android用讯飞实现TTS语音合成 实现中文版
Android系统从1.6版本开始就支持TTS(Text-To-Speech),即语音合成.但是android系统默认的TTS引擎:Pic TTS不支持中文.所以我们得安装自己的TTS引擎和语音包. ...
- 安卓TTS语音合成经验分享（科大讯飞语音+）集成
应用场景:足浴软件,技师钟房安排调派和队列排序查看,语音播报提醒.老程序是使用双屏显卡,windows系统PC上运行一个无人值守桌面程序.如今安卓机顶盒(WIFI)和MINI电视棒通过HDMI接口和支 ...
- 解读 Android TTS 语音合成播报
随着从事 Android 开发年限增加,负责的工作项目也从应用层开发逐步过渡到 Android Framework 层开发.虽然一开始就知道 Android 知识体系的庞大,但是当你逐渐从 Appli ...
- 语音识别（语音转文字）&& 语音合成（文字转语音）
[语音合成API]SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等 // 语音播报 s ...
- 微软语音引擎 TTS 最基本使用
TTS(TextToSpeak) 需求:需要借助程序实现 文字合成语音/语音识别. TTS 介绍就不说了,这里介绍非常详细 >>> TTS详细介绍 + SAPI(微软的TTS语音 ...
- PHP调用语音合成接口
百度TTS 语音合成 //百度文件转换成语音 private function toSpeech($text) { define('DEMO_CURL_VERBOSE', false); $obj=[ ...
- 开源项目大全 >> ...
http://www.isenhao.com/xueke/jisuanji/kaiyuan.php 监控系统-Nagios 网络流量监测图形分析工具-Cacti 分布式系统监视-zabbix 系统 ...
- 基于meanshift的手势跟踪与电脑鼠标控制（手势交互系统）
基于meanshift的手势跟踪与电脑鼠标控制(手势交互系统) zouxy09@qq.com http://blog.csdn.net/zouxy09 一年多前开始接触计算机视觉这个领域的时候,年幼无 ...
- opencv 相关一个很好的博客
http://blog.csdn.net/zouxy09/article/category/1218765 图像卷积与滤波的一些知识点 图像卷积与滤波的一些知识点zouxy09@qq.comhttp: ...
随机推荐
- 刷题总结——跳蚤（poj1091容斥+分解质因数）
题目: Description Z城市居住着很多只跳蚤.在Z城市周六生活频道有一个娱乐节目.一只跳蚤将被请上一个高空钢丝的正中央.钢丝很长,可以看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有 ...
- 定时任务管理之python篇celery使用
一.为什么要用celery celery是一个简单.灵活.可靠的,处理大量消息的分布式系统,并且提供维护这样一个系统的必须工具.他是一个专注于实时处理的任务队列,同时也支持任务调度. celery是异 ...
- SharePoint 2013 App 开发—Auto Hosted 方式
Auto Hosted 方式,自动使用Windows Azure来作为host,这种模式将App 发布到Office 365上的SharePoint Developer Site上.这种方式可以不用花 ...
- cogs2060 除法表达式
http://blog.csdn.net/sdfzyhx/article/details/52254071 作为分母的数当然是越少越好.将x2作为分母,其他作为分子,不断约分,最后判断. /*by S ...
- 观察者模式在MVP中的应用
先简单写下观察者模式.观察者模式,又叫做发布-订阅模式.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,是他们能够自动 ...
- [深入学习C#]C#实现多线程的方式：Task——任务
简介 .NET 4包含新名称空间System.Threading.Tasks,它 包含的类抽象出了线程功能. 在后台使用ThreadPool. 任务表示应完成的某个单元的工作. 这个单元的工作可以在单 ...
- java布局（每个名字都是有意义的）
一.FlowLayout 1.流水布局:从左至右,排满换行 2.构造函数有三种: (1)FlowLayout() (2)FlowLayout(align) (3)FlowLayout(align, h ...
- 数据结构------------------二叉查找树（BST）的java实现
数据结构------------------二叉查找树(BST)的java实现 二叉查找树(BST)是一种能够将链表插入的灵活性和有序数组查找的高效性相结合的一种数据结构.它的定义如下: 二叉查找树是 ...
- SQL-基础学习3--通配符:LIKE,%,(_); 拼接:+，||，concat;
第六课 用通配符进行过滤 6.1 LIKE操作符 通配符本身实际上是SQL的WHERE子句中有特殊含义的字符,SQL支持几种通配符.为在搜索子句中使用通配符,必须使用LIKE操作符.LIKE指示DB ...
- 【spring data jpa】使用repository进行查询，使用userRepository.getOne(id)和userRepository.findById(id)无法从数据库查询到数据
如题: 使用repository进行查询,使用CrudRepository自带的getOne()方法和findById()方法查询,数据库中有这条数据,但是并不能查到. userRepository. ...