web 语音播报 & 网页阅读器
web 语音播报 & 网页阅读器
Chrome
auto speech & voice speaking
http://3.141592653589793238462643383279502884197169399375105820974944592.com/index314159.html
demos
屏幕阅读器 / web 无障碍
http://www.shanghai.gov.cn/nw2/nw2314/nw2315/nw43978/u21aw1432462.html
https://www.pudong.gov.cn/shpd/
https://www.youlai.cn/video/article/294538.html
web speech api
https://mdn.github.io/web-speech-api/speak-easy-synthesis/
const autoReaderTTS = () => {
const text = document.getElementById('ttsText').value;
const msg = new SpeechSynthesisUtterance(text);
msg.volume = 100;
msg.rate = 1;
msg.pitch = 1.5;
console.log(`voice msg`, msg);
window.speechSynthesis.speak(msg);
};
See the Pen xxGQqJJ by xgqfrms
(@xgqfrms) on CodePen.
<!DOCTYPE html>
<html lang="zh-Hans">
<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">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>speech synthesiser / speech synthesizer/ 网络语音API和语音合成器</title>
<link rel="stylesheet" href="./style.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body data-gr-c-s-loaded="true">
<h1>speech synthesiser / speech synthesizer/ 网络语音API和语音合成器</h1>
<p>Enter some text in the input below and press return or the "play" button to hear it. change voices using the
dropdown menu.</p>
<form>
<input type="text" class="txt" value="hello world 你好">
<div>
<label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
<div class="rate-value">1</div>
<div class="clearfix"></div>
</div>
<div>
<label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
<div class="pitch-value">1</div>
<div class="clearfix"></div>
</div>
<select>
<option data-lang="zh-CN" data-name="Google 普通话（中国大陆）" selected>Google 普通话（中国大陆）(zh-CN) -- DEFAULT</option>
<option data-lang="en-US" data-name="Alex">Alex (en-US)</option>
<option data-lang="it-IT" data-name="Alice">Alice (it-IT)</option>
<option data-lang="sv-SE" data-name="Alva">Alva (sv-SE)</option>
<option data-lang="fr-CA" data-name="Amelie">Amelie (fr-CA)</option>
<option data-lang="de-DE" data-name="Anna">Anna (de-DE)</option>
<option data-lang="he-IL" data-name="Carmit">Carmit (he-IL)</option>
<option data-lang="id-ID" data-name="Damayanti">Damayanti (id-ID)</option>
<option data-lang="en-GB" data-name="Daniel">Daniel (en-GB)</option>
<option data-lang="es-AR" data-name="Diego">Diego (es-AR)</option>
<option data-lang="nl-BE" data-name="Ellen">Ellen (nl-BE)</option>
<option data-lang="en" data-name="Fiona">Fiona (en)</option>
<option data-lang="en-US" data-name="Fred">Fred (en-US)</option>
<option data-lang="id-ID" data-name="Google Bahasa Indonesia">Google Bahasa Indonesia (id-ID)</option>
<option data-lang="de-DE" data-name="Google Deutsch">Google Deutsch (de-DE)</option>
<option data-lang="es-ES" data-name="Google español">Google español (es-ES)</option>
<option data-lang="es-US" data-name="Google español de Estados Unidos">Google español de Estados Unidos (es-US)
</option>
<option data-lang="fr-FR" data-name="Google français">Google français (fr-FR)</option>
<option data-lang="it-IT" data-name="Google italiano">Google italiano (it-IT)</option>
<option data-lang="nl-NL" data-name="Google Nederlands">Google Nederlands (nl-NL)</option>
<option data-lang="pl-PL" data-name="Google polski">Google polski (pl-PL)</option>
<option data-lang="pt-BR" data-name="Google português do Brasil">Google português do Brasil (pt-BR)</option>
<option data-lang="en-GB" data-name="Google UK English Female">Google UK English Female (en-GB)</option>
<option data-lang="en-GB" data-name="Google UK English Male">Google UK English Male (en-GB)</option>
<option data-lang="en-US" data-name="Google US English">Google US English (en-US)</option>
<option data-lang="ru-RU" data-name="Google русский">Google русский (ru-RU)</option>
<option data-lang="hi-IN" data-name="Google हिन्दी">Google हिन्दी (hi-IN)</option>
<option data-lang="zh-TW" data-name="Google 國語（臺灣）">Google 國語（臺灣） (zh-TW)</option>
<option data-lang="ja-JP" data-name="Google 日本語">Google 日本語 (ja-JP)</option>
<option data-lang="ko-KR" data-name="Google 한국의">Google 한국의 (ko-KR)</option>
<option data-lang="zh-CN" data-name="Google 普通话（中国大陆）">Google 普通话（中国大陆） (zh-CN)</option>
<option data-lang="zh-HK" data-name="Google 粤語（香港）">Google 粤語（香港） (zh-HK)</option>
<option data-lang="ro-RO" data-name="Ioana">Ioana (ro-RO)</option>
<option data-lang="pt-PT" data-name="Joana">Joana (pt-PT)</option>
<option data-lang="es-ES" data-name="Jorge">Jorge (es-ES)</option>
<option data-lang="es-MX" data-name="Juan">Juan (es-MX)</option>
<option data-lang="th-TH" data-name="Kanya">Kanya (th-TH)</option>
<option data-lang="en-AU" data-name="Karen">Karen (en-AU)</option>
<option data-lang="ja-JP" data-name="Kyoko">Kyoko (ja-JP)</option>
<option data-lang="sk-SK" data-name="Laura">Laura (sk-SK)</option>
<option data-lang="hi-IN" data-name="Lekha">Lekha (hi-IN)</option>
<option data-lang="it-IT" data-name="Luca">Luca (it-IT)</option>
<option data-lang="pt-BR" data-name="Luciana">Luciana (pt-BR)</option>
<option data-lang="ar-SA" data-name="Maged">Maged (ar-SA)</option>
<option data-lang="hu-HU" data-name="Mariska">Mariska (hu-HU)</option>
<option data-lang="zh-TW" data-name="Mei-Jia">Mei-Jia (zh-TW)</option>
<option data-lang="el-GR" data-name="Melina">Melina (el-GR)</option>
<option data-lang="ru-RU" data-name="Milena">Milena (ru-RU)</option>
<option data-lang="en-IE" data-name="Moira">Moira (en-IE)</option>
<option data-lang="es-ES" data-name="Monica">Monica (es-ES)</option>
<option data-lang="nb-NO" data-name="Nora">Nora (nb-NO)</option>
<option data-lang="es-MX" data-name="Paulina">Paulina (es-MX)</option>
<option data-lang="en-US" data-name="Samantha">Samantha (en-US)</option>
<option data-lang="da-DK" data-name="Sara">Sara (da-DK)</option>
<option data-lang="fi-FI" data-name="Satu">Satu (fi-FI)</option>
<option data-lang="zh-HK" data-name="Sin-ji">Sin-ji (zh-HK)</option>
<option data-lang="en-ZA" data-name="Tessa">Tessa (en-ZA)</option>
<option data-lang="fr-FR" data-name="Thomas">Thomas (fr-FR)</option>
<option data-lang="zh-CN" data-name="Ting-Ting">Ting-Ting (zh-CN)</option>
<option data-lang="en-IN" data-name="Veena">Veena (en-IN)</option>
<option data-lang="en-US" data-name="Victoria">Victoria (en-US)</option>
<option data-lang="nl-NL" data-name="Xander">Xander (nl-NL)</option>
<option data-lang="tr-TR" data-name="Yelda">Yelda (tr-TR)</option>
<option data-lang="ko-KR" data-name="Yuna">Yuna (ko-KR)</option>
<option data-lang="ru-RU" data-name="Yuri">Yuri (ru-RU)</option>
<option data-lang="pl-PL" data-name="Zosia">Zosia (pl-PL)</option>
<option data-lang="cs-CZ" data-name="Zuzana">Zuzana (cs-CZ)</option>
</select>
<div class="controls">
<button id="play" type="submit">Play</button>
</div>
</form>
<script src="./script.js"></script>
<footer>
<p>copyright© xgqfrms 2020</p>
</footer>
</body>
</html>
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-03-26
* @modified
*
* @description
* @augments
* @example
* @link
*
*/
const log = console.log;
const synth = window.speechSynthesis;
const inputForm = document.querySelector('form');
const inputTxt = document.querySelector('.txt');
const voiceSelect = document.querySelector('select');
const pitch = document.querySelector('#pitch');
const pitchValue = document.querySelector('.pitch-value');
const rate = document.querySelector('#rate');
const rateValue = document.querySelector('.rate-value');
let voices = [];
function populateVoiceList() {
voices = synth.getVoices()
.sort(function (a, b) {
const aname = a.name.toUpperCase();
const bname = b.name.toUpperCase();
if ( aname < bname ) {
return -1;
} else if ( aname == bname ) {
return 0;
} else {
return +1;
}
});
const selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
voiceSelect.innerHTML = '';
for(let i = 0; i < voices.length ; i++) {
const option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
if(voices[i].default) {
option.textContent += ' -- DEFAULT';
}
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
voiceSelect.selectedIndex = selectedIndex;
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
function speak(){
if (synth.speaking) {
console.error('speechSynthesis.speaking');
return;
}
if (inputTxt.value !== '') {
const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
utterThis.onend = function (event) {
console.log('SpeechSynthesisUtterance.onend');
}
utterThis.onerror = function (event) {
console.error('SpeechSynthesisUtterance.onerror');
}
const selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(let i = 0; i < voices.length ; i++) {
if(voices[i].name === selectedOption) {
utterThis.voice = voices[i];
break;
}
}
utterThis.pitch = pitch.value;
utterThis.rate = rate.value;
synth.speak(utterThis);
}
}
inputForm.onsubmit = function(event) {
event.preventDefault();
speak();
inputTxt.blur();
}
pitch.onchange = function() {
pitchValue.textContent = pitch.value;
}
rate.onchange = function() {
rateValue.textContent = rate.value;
}
voiceSelect.onchange = function(){
speak();
}
web 语音播报 & 网页阅读器的更多相关文章
- web版pdf在线阅读器
近期论坛里有人提到了,在线pdf阅读器怎么做.我百度了一下,发现非常多人都非常懒.程序猿都非常懒吗? 答案是否定的. 为什么都不愿意去搜索一下呢.网上非常多答案的.我这里就列举一例.大家共勉. 看代码 ...
- Web版RSS阅读器（五）——初步完成阅读功能
上一篇博文<Web版RSS阅读器(四)——定制自己的Rss解析库myrsslib4j>中,已经分享给大家制作自己的rss解析库.稍微有点遗憾的是,它仅仅支持rss格式的博客.现在给大家分享 ...
- Web版RSS阅读器（三）——解析在线Rss订阅
上篇博客<Web版RSS阅读器(二)——使用dTree树形加载rss订阅分组列表>已经写到读取rss订阅列表了,今天就说一下,当获取一条在线rss订阅的信息,怎么去解析它,从而获取文章或资 ...
- Web版RSS阅读器（二）——使用dTree树形加载rss订阅分组列表
在上一边博客<Web版RSS阅读器(一)——dom4j读取xml(opml)文件>中已经讲过如何读取rss订阅文件了.这次就把订阅的文件读取到页面上,使用树形结构进行加载显示. 不打算使用 ...
- javascript实现移动端网页版阅读器
现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们 ...
- 记录思想分享知识编辑器 Markdown 编辑阅读器
web使用:实现网页客户端实时自动解析Markdown为HTML内容小小的展示:Cmd Markdown 编辑阅读器使用必要性:怎样引导新手使用 Markdown? - 写作
- 网易新闻RSS阅读器
首先需要分析网易RSS订阅中心的网页布局情况. 网易RSS订阅中心:http://www.163.com/rss/ 你会发现RSS文件由一个<channel>元素及其子元素组成,除了频道本 ...
- jQuery Mobile发展新闻阅读器,适应iphone和android打电话
程序猿是很不赖,你知道. 我们经常新浪,腾讯.雅虎等各大网站看到上述新闻.他们还推出了自己的移动新闻阅读器.今天,我自己用的jQuery Mobile 为了实现这一功能,.图像大小上传限制的大小250 ...
- 为什么说Thunderbird是最好的桌面RSS阅读器
也许现在再讨论RSS阅读器似乎已经过时了,毕竟随着社交网络服务的发展,通过一个带有大众评分能力的社交网络(比如reddit),相比RSS的固定订阅而言,也许你能更快地在你所关心的话题上更快地获得新的资 ...
随机推荐
- 图文并茂-超详解 CS:APP: Lab3-Attack（附带栈帧分析)
CS:APP:Lab3-ATTACK 0. 环境要求 关于环境已经在lab1里配置过了.lab1的连接如下 实验的下载地址如下 说明文档如下 http://csapp.cs.cmu.edu/3e/at ...
- java获取post请求头部字符串
尝试过很多方式,下面的方式最有效: 用获取数据流的方式,直接获取post过来的所有数据流 // 读取请求内容 BufferedReader br = new BufferedReader(new In ...
- 网际互连__TCP/IP三次握手和四次挥手
在TCP/IP协议中,TCP协议提供可靠的连接服务. 位码即tcp标志位,有6种标示: SYN(synchronous建立联机).ACK(acknowledgement 确认).PSH(push传送) ...
- java中== equal hashcode 比较的区别
== 基本数据类型是进行数值的比较 引用数据类型比较的是两对象的地址值 实际上都是进行直接值的比较 equal(Object) Object型参数,任何类型的实参都可以传入,只有实参是一个字符串且内容 ...
- Who Gets the Most Candies?
Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 11303 Accepted: 3520 Case Time Limit ...
- hdu3555 Bomb(要49）
Problem Description The counter-terrorists found a time bomb in the dust. But this time the terroris ...
- qmh的测试1
题目:传送门 首先输入一个n,之后输入n个数a(1<=a<=1e7),对这n个数排序后,你需要找到所有的它们连续的长度.把这些连续的长度排序后输出 输入 输入: 8 1 5 2 7 4 5 ...
- c语言文件的读取和写入
文件打开类型: 文件打开输出就用: 1 #include <stdio.h> 2 3 int main() 4 { 5 FILE *fp = NULL; 6 7 fp = fopen(&q ...
- Splits CodeForces - 964A
题意: 我们定义一个不上升的且和为 n 的正整数序列,叫做 n 的分解. 比如, 下面是8的分解: [4, 4], [3, 3, 2], [2, 2, 1, 1, 1, 1], [5, 2, 1]. ...
- 获取csc.exe路径
using System.Runtime.InteropServices; var frameworkPath = RuntimeEnvironment.GetRuntimeDirectory(); ...