AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

让你的浏览器开口说话

2024-10-17 17
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 让你的浏览器开口说话

在线体验地址


http://sites.zbztb.cn/让你的浏览器开口说话.html

背景介绍

之前自己做的一个点名系统，可以支持语音播报，内部是调用了百度的在线体验语音接口API的，但是现在百度接口改了，没有免费体验，要使用就只能注册申请，嫌麻烦，刚好也知道H5有播放语音的API。所以干脆就拿过来研究一下。

功能介绍

利用h5提供的语音播报API，可以实现以下几个功能

22种内置语言，包括大家喜欢的日语、粤语、国语、英语

[S)HE]B2QK[3JOTCV%J2%Z3.png

还可以设置音调、语速、音量大小

]BQ(HLNKH[`@}HK8PE]FMM3.png

SpeechSynthesisUtterance 介绍

SpeechSynthesisUtterance 翻译为 语音合成话语 该接口表示一个语音请求。它包含了阅读和如何阅读的功能(例如语言、音高和音量)

代码中表示一个构造函数

需要搭配下面的 speechSynthesis 一起使用


const utterThis = new SpeechSynthesisUtterance(); // 创建一个对象

属性

属性名 类型 作用
text String 设置要朗读的文字
pitch Number 设置音调 （0-2）
rate Number 设置语速 （1-10）
volume Number 设置音量 (0-1)
voice SpeechSynthesisVoice Object 设置语言（粤语、国语等）

speechSynthesis 语音合成

负责设置语言和 和朗读功能

它是一个全局对象

方法

  1. 静态方法 speak 接收由 SpeechSynthesisUtterance 创建的实例，进行播放语音
  2. 静态方法 getVoices 用来获取可以使用的语言（国语或者粤语等）

兼容性

1BK~[8~(9G$LG]33}X%G8_M.png

基本代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>2.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <button>播放</button>
    <script>
      const button = document.querySelector('button');
      // 必须由用户主动触发，才有效
      button.addEventListener('click', function () {
        speechSynthesis.speak(new SpeechSynthesisUtterance(`你是我的神`));
      });
    </script>
  </body>
</html>

小案例

<!DOCTYPE html>
<html lang="en">
  <!-- <html lang="zh-CN"> -->
  <!-- <html lang="zh-HK"> -->
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>让你的浏览器开口说话</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      button {
        display: block;
        margin: 0 auto;
        width: 200px;
        height: 50px;
        font-size: 30px;
        background-color: powderblue;
        border-radius: 10px;
        border: none;
        cursor: pointer;
      }
      .tool {
        width: 1000px;
        margin: 20px auto;
        font-size: 16px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100px;
      }
      input {
        display: block;
      }
      .word {
        position: fixed;
        width: 85%;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
        background-color: #000;
        color: #fff;
        line-height: 1.5;
        font-size: 25px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="tool">
      <div class="item">
        <span>请输入说话的内容</span>
        <input type="text" value="执翻剂" class="text" style="height: 30px" />
      </div>
      <div class="item">
        <span>音调 0-2</span>
        <div>
          <input
            value="1"
            type="range"
            class="pitch"
            min="0"
            max="2"
            step="1"
          />
          <b>1</b>
        </div>
      </div>
      <div class="item">
        <span>语速1-10</span>
        <div>
          <input
            value="1"
            type="range"
            class="rate"
            min="0.1"
            max="10"
            step="0.2"
          />
          <b>1</b>
        </div>
      </div>
      <div class="item">
        <span>音量 0-1</span>
        <div>
          <input
            value="1"
            type="range"
            class="volume"
            min="0"
            max="1"
            step="0.1"
          />
          <b>1</b>
        </div>
      </div>
      <div class="item">
        <span>语言</span>
        <select class="voice"></select>
      </div>
    </div>
    <button>播放</button>
    <script>
      window.onload = function () {
        const button = document.querySelector('button');
        const textDom = document.querySelector('.text');
        const pitchDom = document.querySelector('.pitch');
        const rateDom = document.querySelector('.rate');
        const voiceDom = document.querySelector('.voice');
        const volumeDom = document.querySelector('.volume');
        let voices;
        pitchDom.addEventListener('input', setValue);
        rateDom.addEventListener('input', setValue);
        volumeDom.addEventListener('input', setValue);
        function setValue(event) {
          if (event.target.nextElementSibling.nodeName === 'B') {
            event.target.nextElementSibling.innerText = event.target.value;
          }
        }
        speechSynthesis.onvoiceschanged = function (e) {
          voices = speechSynthesis.getVoices();
          voiceDom.innerHTML = voices
            .map(
              (v, i) => `<option value="${i}">
            ${v.name.replace(/(Google)|(Microsoft)/, '')}
            </option>`
            )
            .join('');
        };
        button.addEventListener('click', function () {
          let utterThis = new SpeechSynthesisUtterance();
          const text = textDom.value;
          const pitch = pitchDom.value;
          const rate = rateDom.value;
          const volume = volumeDom.value;
          const voice = voiceDom.value;
          utterThis.text = text;// 设置要约定的文本
          utterThis.pitch = pitch;// 设置音调
          utterThis.rate = rate; // 设置语速
          utterThis.voice = voices[voice]; // 设置语言 
          utterThis.volume = volume;// 设置音量
          speechSynthesis.speak(utterThis); // 开始朗读
          const word = document.createElement('div');
          word.innerText = text;
          word.classList.add('word');
          document.body.appendChild(word);
          utterThis.onend = function () {
            setTimeout(() => {
              word.remove();
            }, 1000);
          };
        });
      };
    </script>
  </body>
</html>
文章标签：
API
语音技术
移动开发
万少！
目录
相关文章
Boale_H
|
前端开发 JavaScript
前端使用fingerprintjs2获取浏览器指纹
前端使用fingerprintjs2获取浏览器指纹
Boale_H
2581 0
八百标兵奔北坡
|
3月前
|
安全 开发者 UED
浏览器多样性
浏览器多样性
八百标兵奔北坡
33 1
snowball_win
|
Web App开发 编解码 监控
浏览器：浏览器指纹
浏览器：浏览器指纹
snowball_win
409 0
1169542316312847
|
XML JavaScript 前端开发
我对浏览器的浅微认知
作为前端天天和浏览器打交道，怎么能不对其有所了解呢？这两天看了一些浏览器相关的文章，现在简单总结下自己的理解。
1169542316312847
100 0
龙哥手记
|
编解码 JSON 缓存
帮你彻底理解浏览器模型（三）
笔记
龙哥手记
126 1
秋天风景
|
存储 JavaScript 前端开发
FingerprintJS - 在浏览器端实现指纹识别
　　FingerprintJS 是一个快速的浏览器指纹库，纯 JavaScript 实现，没有依赖关系。默认情况下，使用 Murmur Hash 算法返回一个32位整数。Hash 函数可以很容易地更换。
秋天风景
5551 0
it6nyr5gsawps
|
存储 自然语言处理 资源调度
「如何从零到一实现一个玩具浏览器🌏」
「如何从零到一实现一个玩具浏览器🌏」
it6nyr5gsawps
426 0
「如何从零到一实现一个玩具浏览器🌏」
pzf3zdekdh6es
关于网页浏览器的一些实用小技巧
关于网页浏览器的一些实用小技巧
pzf3zdekdh6es
158 0
关于网页浏览器的一些实用小技巧
游客7cz2gpweyyu5a
|
XML Web App开发 缓存
浏览器输入「xxxxhub」的背后.....（三）
到现在为止，我们算是把应用层、运输层、网络层和数据链路层都介绍完了，那么现在是时候把这些内容都串起来，做一个全面的回顾了。那么我这就以 Web 页面的请求历程为例，来和你聊聊计算机网络中这些协议是怎样工作的、数据包是怎么收发的，从输入 URL 、敲击回车到最终完成页面呈现在你面前的这个过程。
游客7cz2gpweyyu5a
2629 0
浏览器输入「xxxxhub」的背后.....（三）
游客7cz2gpweyyu5a
|
缓存 网络协议 网络架构
浏览器输入「xxxxhub」的背后.....（二）
到现在为止，我们算是把应用层、运输层、网络层和数据链路层都介绍完了，那么现在是时候把这些内容都串起来，做一个全面的回顾了。那么我这就以 Web 页面的请求历程为例，来和你聊聊计算机网络中这些协议是怎样工作的、数据包是怎么收发的，从输入 URL 、敲击回车到最终完成页面呈现在你面前的这个过程。
游客7cz2gpweyyu5a
1092 0
浏览器输入「xxxxhub」的背后.....（二）