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&nbsp;普通话（中国大陆）" selected>Google&nbsp;普通话（中国大陆）(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&nbsp;普通话（中国大陆）">Google&nbsp;普通话（中国大陆） (zh-CN)</option>

      <option data-lang="zh-HK" data-name="Google&nbsp;粤語（香港）">Google&nbsp;粤語（香港） (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&copy; 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 语音播报 & 网页阅读器的更多相关文章

  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. bcprov-jdk15on包用于创建CSR（证书请求）

    <!-- Eureka注册中心客户端依赖 --> <dependency> <groupId>org.springframework.cloud</group ...

  2. 正则r的作用

    >>> mm = "c:\\a\\b\\c" >>> mm 'c:\\a\\b\\c' >>> print(mm) c:\a\ ...

  3. Java——集合框架之Set&HashSet,HashMap,泛型，compareTo

    Set Set接口--数据存放无序,非常简单,主要呈现信息列表 Set接口存储一组唯一.无序的对象 HashSet是Set接口常用的实现类 Set接口不存在get方法 Iterator接口:表示对集合 ...

  4. Java中详述线程间协作

    线程协作 首先引入一段代码: package 线程间数据共享; import java.util.Date; public class Watch { private static String ti ...

  5. MySQL常用SQL语句2

    -- 1创建student和score表 CREATE TABLE Student( Id INT(10) PRIMARY KEY auto_increment, Name VARCHAR(20) N ...

  6. 2019牛客暑期多校训练营（第九场）B Quadratic equation （平方剩余）

    \((x+y)\equiv b\pmod p\) \((x\times y)\equiv c\pmod p\) 由第一个式子可知:\(x+y=b~or~x+y=b+p\) 先任选一个代入到第二个式子里 ...

  7. Codeforces Round #575 (Div. 3) B. Odd Sum Segments 、C Robot Breakout

    传送门 B题题意: 给你n个数,让你把这n个数分成k个段(不能随意调动元素位置).你需要保证这k个段里面所有元素加起来的和是一个奇数.问可不可以这样划分成功.如果可以打印YES,之后打印出来是从哪里开 ...

  8. Atcoder Beginner Contest 168 D - .. (Double Dots) (BFS)

    题意:有\(n\)个房间,在这些房间中两两连\(m\)次条边,问除了第一个房间,其他房间走到第一个房间的最短路径,输出这个房间所连的上一个房间,如果走不到,输出\(no\). 题解:刚开始我写了一个d ...

  9. javascript——function类型（this关键字）

    如果不用分组的话,当用exec检测rar的时候会错误 结果: Function: 返回值为三(不推荐)

  10. 列表解析式 -- Python

    列表解析的语法:[expr for iter_var in iterable], 它迭代iterable对象的所有条目.其中的expr应用于序列的每个成员,最后的结果值是该表达式产生的列表,迭代变量并 ...