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/


  2. const autoReaderTTS = () => {
  3.     const text = document.getElementById('ttsText').value;
  4.     const msg = new SpeechSynthesisUtterance(text);
  5.     msg.volume = 100;
  6.     msg.rate = 1;
  7.     msg.pitch = 1.5;
  8.     console.log(`voice msg`, msg);
  9.     window.speechSynthesis.speak(msg);
  10. };

See the Pen xxGQqJJ by xgqfrms
(@xgqfrms) on CodePen.

  1. <!DOCTYPE html>
  2. <html lang="zh-Hans">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <meta name="author" content="xgqfrms">
  8.   <meta name="generator" content="VS code">
  9.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10.   <meta name="viewport" content="width=device-width">
  11.   <title>speech synthesiser / speech synthesizer/ 网络语音API和语音合成器</title>
  12.   <link rel="stylesheet" href="./style.css">
  13.   <!--[if lt IE 9]>
  14.     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  15.   <![endif]-->
  16. </head>
  18. <body data-gr-c-s-loaded="true">
  19.   <h1>speech synthesiser / speech synthesizer/ 网络语音API和语音合成器</h1>
  20.   <p>Enter some text in the input below and press return or the "play" button to hear it. change voices using the
  21.     dropdown menu.</p>
  22.   <form>
  23.     <input type="text" class="txt" value="hello world 你好">
  24.     <div>
  25.       <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
  26.       <div class="rate-value">1</div>
  27.       <div class="clearfix"></div>
  28.     </div>
  29.     <div>
  30.       <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
  31.       <div class="pitch-value">1</div>
  32.       <div class="clearfix"></div>
  33.     </div>
  34.     <select>
  35.       <option data-lang="zh-CN" data-name="Google&nbsp;普通话（中国大陆）" selected>Google&nbsp;普通话（中国大陆）(zh-CN) -- DEFAULT</option>
  36.       <option data-lang="en-US" data-name="Alex">Alex (en-US)</option>
  37.       <option data-lang="it-IT" data-name="Alice">Alice (it-IT)</option>
  38.       <option data-lang="sv-SE" data-name="Alva">Alva (sv-SE)</option>
  39.       <option data-lang="fr-CA" data-name="Amelie">Amelie (fr-CA)</option>
  40.       <option data-lang="de-DE" data-name="Anna">Anna (de-DE)</option>
  41.       <option data-lang="he-IL" data-name="Carmit">Carmit (he-IL)</option>
  42.       <option data-lang="id-ID" data-name="Damayanti">Damayanti (id-ID)</option>
  43.       <option data-lang="en-GB" data-name="Daniel">Daniel (en-GB)</option>
  44.       <option data-lang="es-AR" data-name="Diego">Diego (es-AR)</option>
  45.       <option data-lang="nl-BE" data-name="Ellen">Ellen (nl-BE)</option>
  46.       <option data-lang="en" data-name="Fiona">Fiona (en)</option>
  47.       <option data-lang="en-US" data-name="Fred">Fred (en-US)</option>
  48.       <option data-lang="id-ID" data-name="Google Bahasa Indonesia">Google Bahasa Indonesia (id-ID)</option>
  49.       <option data-lang="de-DE" data-name="Google Deutsch">Google Deutsch (de-DE)</option>
  50.       <option data-lang="es-ES" data-name="Google español">Google español (es-ES)</option>
  51.       <option data-lang="es-US" data-name="Google español de Estados Unidos">Google español de Estados Unidos (es-US)
  52.       </option>
  53.       <option data-lang="fr-FR" data-name="Google français">Google français (fr-FR)</option>
  54.       <option data-lang="it-IT" data-name="Google italiano">Google italiano (it-IT)</option>
  55.       <option data-lang="nl-NL" data-name="Google Nederlands">Google Nederlands (nl-NL)</option>
  56.       <option data-lang="pl-PL" data-name="Google polski">Google polski (pl-PL)</option>
  57.       <option data-lang="pt-BR" data-name="Google português do Brasil">Google português do Brasil (pt-BR)</option>
  58.       <option data-lang="en-GB" data-name="Google UK English Female">Google UK English Female (en-GB)</option>
  59.       <option data-lang="en-GB" data-name="Google UK English Male">Google UK English Male (en-GB)</option>
  60.       <option data-lang="en-US" data-name="Google US English">Google US English (en-US)</option>
  61.       <option data-lang="ru-RU" data-name="Google русский">Google русский (ru-RU)</option>
  62.       <option data-lang="hi-IN" data-name="Google हिन्दी">Google हिन्दी (hi-IN)</option>
  63.       <option data-lang="zh-TW" data-name="Google 國語（臺灣）">Google 國語（臺灣） (zh-TW)</option>
  64.       <option data-lang="ja-JP" data-name="Google 日本語">Google 日本語 (ja-JP)</option>
  65.       <option data-lang="ko-KR" data-name="Google 한국의">Google 한국의 (ko-KR)</option>
  66.       <option data-lang="zh-CN" data-name="Google&nbsp;普通话（中国大陆）">Google&nbsp;普通话（中国大陆） (zh-CN)</option>
  67.       <option data-lang="zh-HK" data-name="Google&nbsp;粤語（香港）">Google&nbsp;粤語（香港） (zh-HK)</option>
  68.       <option data-lang="ro-RO" data-name="Ioana">Ioana (ro-RO)</option>
  69.       <option data-lang="pt-PT" data-name="Joana">Joana (pt-PT)</option>
  70.       <option data-lang="es-ES" data-name="Jorge">Jorge (es-ES)</option>
  71.       <option data-lang="es-MX" data-name="Juan">Juan (es-MX)</option>
  72.       <option data-lang="th-TH" data-name="Kanya">Kanya (th-TH)</option>
  73.       <option data-lang="en-AU" data-name="Karen">Karen (en-AU)</option>
  74.       <option data-lang="ja-JP" data-name="Kyoko">Kyoko (ja-JP)</option>
  75.       <option data-lang="sk-SK" data-name="Laura">Laura (sk-SK)</option>
  76.       <option data-lang="hi-IN" data-name="Lekha">Lekha (hi-IN)</option>
  77.       <option data-lang="it-IT" data-name="Luca">Luca (it-IT)</option>
  78.       <option data-lang="pt-BR" data-name="Luciana">Luciana (pt-BR)</option>
  79.       <option data-lang="ar-SA" data-name="Maged">Maged (ar-SA)</option>
  80.       <option data-lang="hu-HU" data-name="Mariska">Mariska (hu-HU)</option>
  81.       <option data-lang="zh-TW" data-name="Mei-Jia">Mei-Jia (zh-TW)</option>
  82.       <option data-lang="el-GR" data-name="Melina">Melina (el-GR)</option>
  83.       <option data-lang="ru-RU" data-name="Milena">Milena (ru-RU)</option>
  84.       <option data-lang="en-IE" data-name="Moira">Moira (en-IE)</option>
  85.       <option data-lang="es-ES" data-name="Monica">Monica (es-ES)</option>
  86.       <option data-lang="nb-NO" data-name="Nora">Nora (nb-NO)</option>
  87.       <option data-lang="es-MX" data-name="Paulina">Paulina (es-MX)</option>
  88.       <option data-lang="en-US" data-name="Samantha">Samantha (en-US)</option>
  89.       <option data-lang="da-DK" data-name="Sara">Sara (da-DK)</option>
  90.       <option data-lang="fi-FI" data-name="Satu">Satu (fi-FI)</option>
  91.       <option data-lang="zh-HK" data-name="Sin-ji">Sin-ji (zh-HK)</option>
  92.       <option data-lang="en-ZA" data-name="Tessa">Tessa (en-ZA)</option>
  93.       <option data-lang="fr-FR" data-name="Thomas">Thomas (fr-FR)</option>
  94.       <option data-lang="zh-CN" data-name="Ting-Ting">Ting-Ting (zh-CN)</option>
  95.       <option data-lang="en-IN" data-name="Veena">Veena (en-IN)</option>
  96.       <option data-lang="en-US" data-name="Victoria">Victoria (en-US)</option>
  97.       <option data-lang="nl-NL" data-name="Xander">Xander (nl-NL)</option>
  98.       <option data-lang="tr-TR" data-name="Yelda">Yelda (tr-TR)</option>
  99.       <option data-lang="ko-KR" data-name="Yuna">Yuna (ko-KR)</option>
  100.       <option data-lang="ru-RU" data-name="Yuri">Yuri (ru-RU)</option>
  101.       <option data-lang="pl-PL" data-name="Zosia">Zosia (pl-PL)</option>
  102.       <option data-lang="cs-CZ" data-name="Zuzana">Zuzana (cs-CZ)</option>
  103.     </select>
  104.     <div class="controls">
  105.       <button id="play" type="submit">Play</button>
  106.     </div>
  107.   </form>
  108.   <script src="./script.js"></script>
  109.   <footer>
  110.       <p>copyright&copy; xgqfrms 2020</p>
  111.   </footer>
  112. </body>
  113. </html>


  2. "use strict";
  4. /**
  5.  *
  6.  * @author xgqfrms
  7.  * @license MIT
  8.  * @copyright xgqfrms
  9.  * @created 2020-03-26
  10.  * @modified
  11.  *
  12.  * @description
  13.  * @augments
  14.  * @example
  15.  * @link
  16.  *
  17.  */
  19. const log = console.log;
  21. const synth = window.speechSynthesis;
  23. const inputForm = document.querySelector('form');
  24. const inputTxt = document.querySelector('.txt');
  25. const voiceSelect = document.querySelector('select');
  27. const pitch = document.querySelector('#pitch');
  28. const pitchValue = document.querySelector('.pitch-value');
  29. const rate = document.querySelector('#rate');
  30. const rateValue = document.querySelector('.rate-value');
  32. let voices = [];
  34. function populateVoiceList() {
  35.   voices = synth.getVoices()
  36.       .sort(function (a, b) {
  37.       const aname = a.name.toUpperCase();
  38.       const bname = b.name.toUpperCase();
  39.       if ( aname < bname ) {
  40.         return -1;
  41.       } else if ( aname == bname ) {
  42.         return 0;
  43.       } else {
  44.         return +1;
  45.       }
  46.   });
  47.   const selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
  48.   voiceSelect.innerHTML = '';
  49.   for(let i = 0; i < voices.length ; i++) {
  50.     const option = document.createElement('option');
  51.     option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
  53.     if(voices[i].default) {
  54.       option.textContent += ' -- DEFAULT';
  55.     }
  57.     option.setAttribute('data-lang', voices[i].lang);
  58.     option.setAttribute('data-name', voices[i].name);
  59.     voiceSelect.appendChild(option);
  60.   }
  61.   voiceSelect.selectedIndex = selectedIndex;
  62. }
  64. populateVoiceList();
  65. if (speechSynthesis.onvoiceschanged !== undefined) {
  66.   speechSynthesis.onvoiceschanged = populateVoiceList;
  67. }
  69. function speak(){
  70.     if (synth.speaking) {
  71.         console.error('speechSynthesis.speaking');
  72.         return;
  73.     }
  74.     if (inputTxt.value !== '') {
  75.     const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  76.     utterThis.onend = function (event) {
  77.         console.log('SpeechSynthesisUtterance.onend');
  78.     }
  79.     utterThis.onerror = function (event) {
  80.         console.error('SpeechSynthesisUtterance.onerror');
  81.     }
  82.     const selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
  83.     for(let i = 0; i < voices.length ; i++) {
  84.       if(voices[i].name === selectedOption) {
  85.         utterThis.voice = voices[i];
  86.         break;
  87.       }
  88.     }
  89.     utterThis.pitch = pitch.value;
  90.     utterThis.rate = rate.value;
  91.     synth.speak(utterThis);
  92.   }
  93. }
  95. inputForm.onsubmit = function(event) {
  96.   event.preventDefault();
  98.   speak();
  100.   inputTxt.blur();
  101. }
  103. pitch.onchange = function() {
  104.   pitchValue.textContent = pitch.value;
  105. }
  107. rate.onchange = function() {
  108.   rateValue.textContent = rate.value;
  109. }
  111. voiceSelect.onchange = function(){
  112.   speak();
  113. }

web 语音播报 & 网页阅读器的更多相关文章

  1. web版pdf在线阅读器

    近期论坛里有人提到了,在线pdf阅读器怎么做.我百度了一下,发现非常多人都非常懒.程序猿都非常懒吗? 答案是否定的. 为什么都不愿意去搜索一下呢.网上非常多答案的.我这里就列举一例.大家共勉. 看代码 ...

  2. Web版RSS阅读器（五）——初步完成阅读功能

    上一篇博文<Web版RSS阅读器(四)——定制自己的Rss解析库myrsslib4j>中,已经分享给大家制作自己的rss解析库.稍微有点遗憾的是,它仅仅支持rss格式的博客.现在给大家分享 ...

  3. Web版RSS阅读器（三）——解析在线Rss订阅

    上篇博客<Web版RSS阅读器(二)——使用dTree树形加载rss订阅分组列表>已经写到读取rss订阅列表了,今天就说一下,当获取一条在线rss订阅的信息,怎么去解析它,从而获取文章或资 ...

  4. Web版RSS阅读器（二）——使用dTree树形加载rss订阅分组列表

    在上一边博客<Web版RSS阅读器(一)——dom4j读取xml(opml)文件>中已经讲过如何读取rss订阅文件了.这次就把订阅的文件读取到页面上,使用树形结构进行加载显示. 不打算使用 ...

  5. javascript实现移动端网页版阅读器

    现在手机上的文本阅读app已经非常丰富,良好的阅读体验与海量的书库常常令我感到无比兴奋. 我想到8年前用一点几寸屏幕的mp3看电子书的情景,顿生一种淡淡的温馨.再久远一些,小的时候,我也经常和小伙伴们 ...

  6. 记录思想分享知识编辑器 Markdown 编辑阅读器

    web使用:实现网页客户端实时自动解析Markdown为HTML内容小小的展示:Cmd Markdown 编辑阅读器使用必要性:怎样引导新手使用 Markdown? - 写作

  7. 网易新闻RSS阅读器

    首先需要分析网易RSS订阅中心的网页布局情况. 网易RSS订阅中心:http://www.163.com/rss/ 你会发现RSS文件由一个<channel>元素及其子元素组成,除了频道本 ...

  8. jQuery Mobile发展新闻阅读器,适应iphone和android打电话

    程序猿是很不赖,你知道. 我们经常新浪,腾讯.雅虎等各大网站看到上述新闻.他们还推出了自己的移动新闻阅读器.今天,我自己用的jQuery Mobile 为了实现这一功能,.图像大小上传限制的大小250 ...

  9. 为什么说Thunderbird是最好的桌面RSS阅读器

    也许现在再讨论RSS阅读器似乎已经过时了,毕竟随着社交网络服务的发展,通过一个带有大众评分能力的社交网络(比如reddit),相比RSS的固定订阅而言,也许你能更快地在你所关心的话题上更快地获得新的资 ...

随机推荐

  1. 阿里云 Redis 开发规范

    阿里云Redis开发规范-阿里云开发者社区 https://developer.aliyun.com/article/531067 https://mp.weixin.qq.com/s/UWE1Kx6 ...

  2. 【c++小知识】static用法浅析

    一.前言 C++的关键字static分两种用法,在面向过程程序设计(c语言中的普通变量和函数)中的使用和在面向对象程序设计(c++中的类)中的使用 二.面向过程程序设计中的static(静态变量.静态 ...

  3. Linux CGroup入门

    Linux cgroup Linux CGroup全称Linux Control Group, 是Linux内核的一个功能,用来限制,控制与分离一个进程组群的资源(如CPU.内存.磁盘输入输出等).L ...

  4. C/C++ New与Delete （小例子）

    转自:http://blog.csdn.net/chenzujie/article/details/7011639   先来看两段小程序: 1). #include <iostream.h> ...

  5. Dedecms织梦搜索页显示条数的更改方法

    织梦dedecms搜索结果页面的显示条数默认是10条,这个数值在模板当中是不能控制的. 解决方法: 打开根目录下的plus文件夹,找到search.php修改一段代码: 在大概第15行,找到 $ pa ...

  6. 5.2 spring5源码--spring AOP源码分析二--切面的配置方式

    目标: 1. 什么是AOP, 什么是AspectJ 2. 什么是Spring AOP 3. Spring AOP注解版实现原理 4. Spring AOP切面原理解析 一. 认识AOP及其使用 详见博 ...

  7. 【uva 177】Paper Folding（算法效率--模拟）

    P.S.模拟真の难打,我花了近乎三小时!o(≧口≦)o 模拟题真的要思路清晰!分块调试. 题意:著名的折纸问题:给你一张很大的纸,对折以后再对折,再对折--每次对折都是从右往左折,因此在折了很多次以后 ...

  8. HDU - 6287 口算训练 二分+质因数分解

    小Q非常喜欢数学,但是他的口算能力非常弱.因此他找到了小T,给了小T一个长度为nn的正整数序列a1,a2,...,ana1,a2,...,an,要求小T抛出mm个问题以训练他的口算能力.每个问题给出三 ...

  9. Codeforces Round #673 (Div. 2) C. k-Amazing Numbers (DP,思维)

    题意:有一组数,分别用长度从\([1,n]\)的区间去取子数组,要求取到的所有子数组中必须有共同的数,如果满足条件数组共同的数中最小的数,否则输出\(-1\). 题解:我们先从后面确定每两个相同数之间 ...

  10. C# 网络加密与解密

    数据在网络传输过程中的保密性是网络安全中重点要考虑的问题之一.由于通过网络传递数据是在不安全的信道上进行传输的,因此通信双方要想确保任何可能正在侦听的人无法理解通信的内容,而且希望确保接收方接收的信息 ...