Web Speech API的语音识别技术

SpeechSynthesis对象

这是一个实验性技术

目前兼容性如图:

pc端几乎兼容,移动端部分不兼容

请添加图片描述

网页语音 API 的SpeechSynthesis 接口是语音服务的控制接口;

它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

  • SpeechSynthesis 也从它的父接口继承属性,EventTarget.

  • SpeechSynthesis.paused 只读
    当SpeechSynthesis 处于暂停状态时, Boolean值返回 true 。

  • SpeechSynthesis.pending只读
    当语音播放队列到目前为止保持没有说完的语音时, Boolean值返回 true 。

  • SpeechSynthesis.speaking只读
    当语音谈话正在进行的时候,即使SpeechSynthesis处于暂停状态, Boolean返回 true 。

事件操作

  • SpeechSynthesis.onvoiceschanged (en-US)
    当由SpeechSynthesis.getVoices()方法返回的SpeechSynthesisVoice (en-US)列表改变时触发。

方法

SpeechSynthesis 也从它的父接口继承方法, EventTarget.

  • SpeechSynthesis.cancel() (en-US)
    移除所有语音谈话队列中的谈话。

  • SpeechSynthesis.getVoices()
    返回当前设备所有可用声音的 SpeechSynthesisVoice (en-US)列表。

  • SpeechSynthesis.pause() (en-US)
    把 SpeechSynthesis 对象置为暂停状态。

  • SpeechSynthesis.resume() (en-US)
    把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。

  • SpeechSynthesis.speak() (en-US)
    添加一个 utterance到语音谈话队列;它将会在其他语音谈话播放完之后播放。

示例

用 window.speechSynthesis抓取关于语音播放控制器

在定义了一些必要的变量后,用 SpeechSynthesis.getVoices()获取了一列可用的声音并且用它们生成一列可选表单,这样用户能够选择他们想要的声音。

inputForm.onsubmit 的内部操作中,我们用preventDefault()阻止了表单的提交,创建了一个从文本框获取文本的新SpeechSynthesisUtterance (en-US)实例,在元素可选的声音设置成语音谈话的 voice 属性,然后通过SpeechSynthesis.speak() (en-US)方法开始语音播放。

var synth = window.speechSynthesis;var inputForm = document.querySelector("form");
var inputTxt = document.querySelector(".txt");
var voiceSelect = document.querySelector("select");var pitch = document.querySelector("#pitch");
var pitchValue = document.querySelector(".pitch-value");
var rate = document.querySelector("#rate");
var rateValue = document.querySelector(".rate-value");var voices = [];function populateVoiceList() {voices = synth.getVoices();for (i = 0; i < voices.length; i++) {var 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);}
}populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {speechSynthesis.onvoiceschanged = populateVoiceList;
}inputForm.onsubmit = function (event) {event.preventDefault();var utterThis = new SpeechSynthesisUtterance(inputTxt.value);var selectedOption = voiceSelect.selectedOptions[0].getAttribute("data-name");for (i = 0; i < voices.length; i++) {if (voices[i].name === selectedOption) {utterThis.voice = voices[i];}}utterThis.pitch = pitch.value;utterThis.rate = rate.value;synth.speak(utterThis);inputTxt.blur();
};

属性:

paused

  • SpeechSynthesis 接口的只读属性 paused 是一个 Boolean值,当SpeechSynthesis对象处于暂停状态时,返回true ,否则返回 false。

  • 它能被设置为 暂停状态即使当前并没有语音在播放队列中。如果utterances被添加到语音播放队列,队列中的语音并不会播放直到使用 SpeechSynthesis.resume() (en-US)使SpeechSynthesis对象处于非暂停状态。

语法

var amIPaused = speechSynthesisInstance.paused;
Value
一个Boolean (en-US)。

示例

var synth = window.speechSynthesis;synth.pause();var amIPaused = synth.paused; // 将返回 true

pending

  • 只读属性 SpeechSynthesisinterface是一个布尔值,返回 true如果话语队列包含尚未说出的话语。


  • 布尔值。

示例

const synth = window.speechSynthesis;const utterance1 = new SpeechSynthesisUtterance("helloWorld.",
);
const utterance2 = new SpeechSynthesisUtterance("helloWorld2.",
);synth.speak(utterance1);
synth.speak(utterance2);const amIPending = synth.pending; // 如果话语1仍在说话并且话语2在队列中,则将返回trues in the queue

speaking

  • 只读属性 SpeechSynthesisinterface是一个布尔值,返回 true如果话语当前正在被说出的过程中-甚至 如果SpeechSynthesis在 paused州。


  • 布尔值。

示例

const synth = window.speechSynthesis;const utterance1 = new SpeechSynthesisUtterance("话语1.",
);
const utterance2 = new SpeechSynthesisUtterance("话语2.",
);synth.speak(utterance1);
synth.speak(utterance2);const amISpeaking = synth.speaking; // 如果话语1或话语2当前正在说话,则将返回true

方法详情

cancel方法

  • 从话语队列中移除所有话语。

​ 如果正在说话,说话将立即停止。

语法

实例.cancel()

参数

返回值

无(undefined)。

示例

const synth = window.speechSynthesis;const utterance1 = new SpeechSynthesisUtterance("话语1.",
);
const utterance2 = new SpeechSynthesisUtterance("话语2.",
);synth.speak(utterance1);
synth.speak(utterance2);synth.cancel(); //话语1立即停止,并且两者都从队列中删除

getVoices方法

  • SpeechSynthesis接口返回一个 SpeechSynthesisVoice对象表示所有可用的声音上 当前设备

语法

实例.getVoices()

参数

返回值

示例

function populateVoiceList() {if (typeof speechSynthesis === "undefined") {return;}const voices = speechSynthesis.getVoices();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);document.getElementById("voiceSelect").appendChild(option);}
}populateVoiceList();
if (typeof speechSynthesis !== "undefined" &&speechSynthesis.onvoiceschanged !== undefined
) {speechSynthesis.onvoiceschanged = populateVoiceList;
}

pause方法

  • SpeechSynthesis对象置于暂停状态。

语法

实例.pause()

参数

返回值

SpeechSynthesisVoice对象的列表(数组)。

示例

const synth = window.speechSynthesis;const utterance1 = new SpeechSynthesisUtterance("话语1.",
);
const utterance2 = new SpeechSynthesisUtterance("话语2.",
);
synth.speak(utterance1);
synth.speak(utterance2);synth.pause(); // 暂停说话

resume方法

  • 如果它已经暂停,则恢复它。

语法

实例.resume()

参数

返回值

示例

let synth = window.speechSynthesis;const utterance1 = new SpeechSynthesisUtterance("话语1.",
);
const utterance2 = new SpeechSynthesisUtterance("话语2.",
);synth.speak(utterance1);
synth.speak(utterance2);synth.pause(); 
synth.resume(); //恢复暂停

voiceschanged事件

  • Web Speech API的voiceschanged事件在由SpeechSynthesisVoice方法返回的SpeechSynthesis.getVoices()对象的列表发生更改时触发(在voiceschanged事件触发时)。

语法

在类似addEventListener()的方法中使用事件名称,或者设置事件处理程序属性。

addEventListener("voiceschanged", (event) => {});onvoiceschanged = (event) => {};

事件类型

没有添加属性的泛型Event。

示例

这可以用来重新填充一个声音列表,用户可以在事件触发时从中选择。您可以在voiceschanged方法中使用addEventListener事件:

const synth = window.speechSynthesis;synth.addEventListener("voiceschanged", () => {const voices = synth.getVoices();for (let i = 0; i < voices.length; i++) {const option = document.createElement("option");option.textContent = `${voices[i].name} (${voices[i].lang})`;option.setAttribute("data-lang", voices[i].lang);option.setAttribute("data-name", voices[i].name);voiceSelect.appendChild(option);}
});

或者使用onvoiceschanged事件处理程序属性:

const synth = window.speechSynthesis;
synth.onvoiceschanged = () => {const voices = synth.getVoices();for (let i = 0; i < voices.length; i++) {const option = document.createElement("option");option.textContent = `${voices[i].name} (${voices[i].lang})`;option.setAttribute("data-lang", voices[i].lang);option.setAttribute("data-name", voices[i].name);voiceSelect.appendChild(option);}
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/752083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Querywrapper与Lambdaquerywrappe比较

当使用 Spring Boot 结合 MyBatis Plus 进行开发时&#xff0c;LambdaQueryWrapper 和 QueryWrapper 是用于构建查询条件的两个重要工具。下面详细介绍它们的区别&#xff0c;并举例说明在 Spring Boot 中如何使用。 1. QueryWrapper QueryWrapper 是 MyBatis Plus 中常用的查…

软件杯 深度学习 python opencv 实现人脸年龄性别识别

文章目录 0 前言1 项目课题介绍2 关键技术2.1 卷积神经网络2.2 卷积层2.3 池化层2.4 激活函数&#xff1a;2.5 全连接层 3 使用tensorflow中keras模块实现卷积神经网络4 Keras介绍4.1 Keras深度学习模型4.2 Keras中重要的预定义对象4.3 Keras的网络层构造 5 数据集处理训练5.1 …

从电影《沙丘》说起——对人工智能的思考

从《沙丘》开始说起 之前看《沙丘》电影&#xff0c;里面有一类角色叫门泰特&#xff0c;这类人大脑可以飞快地运算&#xff0c;在电影设定里是替换人工智能、机器运算的存在。男主保罗也是这类型的人&#xff0c;但他可能基因更强大&#xff0c;吸食了香料后&#xff0c;他的…

docker快速安装和详细安装-保姆教程

docker快速安装和详细安装 一、快速搭建 卸载老版本 yum remove docker docker-common docker-selinux docker-engine安装相关需要的包 yum install -y yum-utils device-mapper-persistent-data lvm2设置docker镜像仓库 yum-config-manager \ --add-repo \ http://mirror…

什么数据需要存在Redis里?缓存的缺点?怎样进行数据同步?

什么数据需要存在Redis里? 通常需要将频繁访问且对性能要求较高的数据存储在Redis中。 缓存数据&#xff1a;Redis常用于存储缓存数据&#xff0c;如热点数据、频繁查询的结果等&#xff0c;以减少对后端数据库的压力和提高系统响应速度。会话信息&#xff1a;对于Web应用来…

大数据面试题之SQL题

大数据面试题之SQL题 1.有一个录取学生人数表&#xff0c;记录的是每年录取学生人数和入学学生的学制 以下是表结构&#xff1a; CREATE TABLE admit ( id int(11) NOT NULL AUTO_INCREMENT, year int(255) DEFAULT NULL COMMENT ‘入学年度’, num int(255) DEFAULT NULL COMM…

大语言模型相关工具使用链接

大语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09;是自然语言处理&#xff08;NLP&#xff09;领域中的一种深度学习模型&#xff0c;主要用于理解和生成人类语言。这类模型通常基于Transformer架构&#xff0c;通过在大规模语料库上进行预训练来捕获语言…

Hive调优总结

参数设置 概述:hive的参数配置, 就是在那里配置hive的参数信息, 根据配置地方不同, 作用范围也不一样. 配置方式: 1. set方式进行设置. 2. 命令行方式进行设置. 3. 配置文件方式进行设置. 优先级问题: set方式 > 命令行方式 > 配置文件…

Day67:WEB攻防-Java安全JNDIRMILDAP五大不安全组件RCE执行不出网

知识点&#xff1a; 1、Java安全-RCE执行-5大类函数调用 2、Java安全-JNDI注入-RMI&LDAP&高版本 3、Java安全-不安全组件-Shiro&FastJson&JackJson&XStream&Log4j Java安全-RCE执行-5大类函数调用 Java中代码执行的类&#xff1a; GroovyRuntimeExecPr…

Dockerfile 语法详解

Dockerfile 是一种文本文件&#xff0c;用于定义如何构建 Docker 镜像。它包含一系列指令&#xff0c;用于创建镜像的各个层&#xff0c;最终生成一个可运行的容器。 语法格式 Dockerfile 的语法遵循以下格式&#xff1a; INSTRUCTION [ARGUMENTS]其中&#xff1a; INSTRUC…

如何使用机器学习构建自己的推荐系统?

一、说明 在广阔的电子商务领域&#xff0c;众多产品和服务都在争夺我们的注意力&#xff0c;推荐系统的作用变得至关重要。这些智能系统彻底改变了我们在线发现和接触产品的方式&#xff0c;使其成为现代电子商务平台成功的基石。 推荐系统&#xff0c;通常称为推荐引擎或简称…

机器学习入门:探索智能算法的世界 (上)

引言 在信息时代,数据与算法构成了新的基石,而机器学习则是连接它们的桥梁。机器学习,一门让计算机通过数据学习并做出决策的科学,正逐渐成为现代技术不可或缺的一部分。从个性化推荐系统、自动驾驶汽车到高级数据分析和预测模型,机器学习的应用几乎遍及每一个领域,它不…

谈谈对数据库索引的认识

索引的概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。 可以对表中的一列或多列创建索引&#xff0c;并指定索引的类型&#xff0c;各类索引有各自的数据结构实现。 索引的作用 默认情况下&#xff0c;进行条件查询操作&#xff0c;就是遍历表&a…

清理ubuntu空间

最近ubuntu空间告急&#xff0c;急需清理一下。 首先是apt的清理&#xff0c;apt中会留存很多的下载和安装文件&#xff0c;此时就需要&#xff1a; 先查看&#xff1a; du -sh /var/cache/apt/archives然后清理&#xff1a; sudo apt-get clean清理不需要的内核&#xff1a;…

企业数据流动安全管理软件(深度解析文章)

企业数据重要性不言而喻&#xff0c;而同时数据的流动和共享也带来了安全风险&#xff0c;如何确保企业数据在流动过程中的安全性&#xff0c;也成为了企业需要面临的重要问题。 企业数据流动安全管理软件的主要功能是监控和管理企业数据的流动过程。 它能够对企业内部的数据…

launchctl及其配置、使用、示例

文章目录 launchctl 是什么Unix / Linux类似的工具有什么哪个更常用配置使用常用子命令示例加载一个 launch agent:卸载一个 launch daemon:列出所有已加载的服务:启动一个服务:停止一个服务:禁用一个服务:启用一个服务: 附com.example.myagent.plist内容有趣的例子参考 launch…

vb.net+zxing.net随机彩色二维码、条形码

需要zxing库支持ZXing.NET Generate QR Code & Barcode in C# Alternatives | IronBarcode 效果图&#xff1a; 思路&#xff1a;先生成1个单位的二维码&#xff0c;然后再通过像素填充颜色&#xff0c;颜色数组要通过洗牌算法 洗牌算法 Dim shuffledCards As New List(…

牛客NC278 删除链表中重复的结点【中等 链表 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/fc533c45b73a41b0b44ccba763f866ef 这题有一次面试某团的第一道题 思考 链表的基本操作参考答案Java import java.util.*; /*public class ListNode {int val;ListNode next null;ListNode(int val) {this.v…

【Linux杂货铺】进程的基本概念

目录 &#x1f308;前言&#x1f308; &#x1f4c1;进程的概念 &#x1f4c2;描述进程-PCB &#x1f4c2; 查看进程 &#x1f4c2; 查看正在运行的程序 &#x1f4c2;杀死进程 &#x1f4c2;通过系统调用获取进程标识符 &#x1f4c2;通过系统调用创建进程 &#x1f…

MongoDB聚合运算符:$first

文章目录 语法使用定义文档顺序数组操作缺失值的处理 举例数据缺失的情况在$setWindowFields阶段中使用 $first聚合运算符返回分组中第一个文档指定表达式的结果&#xff0c;只有分组文档是有序的情况下才有意义。 $first可用于下列阶段&#xff1a; $bucket$bucketAuto$grou…