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. 唯一ID生成算法剖析

    https://mp.weixin.qq.com/s/E3PGP6FDBFUcghYfpe6vsg 唯一ID生成算法剖析 原创 cloudoxou 腾讯技术工程 2019-10-08    

  2. Python程序中#-*-coding: UTF-8 -*-的作用

    1.通常我们在pycharm中写程序的时候会加上#-*coding: UTF-8 -*- 如: #!/usr/bin/env python3#-*-coding: UTF-8 -*-#Author x ...

  3. yum安装docker-ce-18.03.0

    yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo http://mir ...

  4. Jenkins （ jenkins+harbor）

    Harbor 是咱们国产的docke仓库具体详细了解请参考以下连接 https://blog.csdn.net/csdn_duomaomao/article/details/78036331 http ...

  5. c++复习笔记（4）

    这一篇是另一篇各种琐碎东西的笔记. 类型转换可以通过类型转换函数,或者构造函数来实现.但是一般来说类型转换指的是类型转换函数. 类型转换函数不需要声明输出类型(因为输出类型是固定的),也没有参数,同时 ...

  6. Linux-服务管理命令chkconfig

    Linux-服务管理命令chkconfig 一  chkconfig简介 chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服 ...

  7. NodeMCU学习笔记

    NodeMCU学习笔记 引脚连通 引脚 连通 D3 FLASH按键 D0 模组上的LED D4 芯片的LED FLASH按键 D3引脚已经与开发板上的FLASH按键开关连接 我们可以通过NodeMCU ...

  8. 黑客练手入门| pwnable.kr—幼儿瓶—01：fd

    目录 前言 pwnable.kr介绍 该怎么玩 幼儿瓶第一道题:fd 0x00 问题描述 0x01 源码分析 0x02 解题方法 0x03 知识点总结 前言 担心有人不知道pwnable.kr是什么, ...

  9. 爬虫入门到放弃系列02：html网页如何解析

    前言 上一篇文章讲了爬虫的概念,本篇文章主要来讲述一下如何来解析爬虫请求的网页内容. 一个简单的爬虫程序主要分为两个部分,请求部分和解析部分.请求部分基本一行代码就可以搞定,所以主要来讲述一下解析部分 ...

  10. springboot源码解析-管中窥豹系列之web服务器（七）

    一.前言 Springboot源码解析是一件大工程,逐行逐句的去研究代码,会很枯燥,也不容易坚持下去. 我们不追求大而全,而是试着每次去研究一个小知识点,最终聚沙成塔,这就是我们的springboot ...