Web Speech API的语音识别技术

2024-03-13 18:36
文章标签 技术 web api 语音 识别 speech

本文主要是介绍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);}
};

这篇关于Web Speech API的语音识别技术的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/805812。

相关文章

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》：本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven，显示如下页面输入项目名称，选择
阅读更多...
阿里开源语音识别SenseVoiceWindows环境部署

阿里开源语音识别SenseVoiceWindows环境部署

SenseVoice介绍 SenseVoice 专注于高精度多语言语音识别、情感辨识和音频事件检测多语言识别： 采用超过 40 万小时数据训练，支持超过 50 种语言，识别效果上优于 Whisper 模型。富文本识别：具备优秀的情感识别，能够在测试数据上达到和超过目前最佳情感识别模型的效果。支持声音事件检测能力，支持音乐、掌声、笑声、哭声、咳嗽、喷嚏等多种常见人机交互事件进行检测。高效推
阅读更多...
【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

【专题】2024飞行汽车技术全景报告合集PDF分享（附原数据表）

原文链接： https://tecdat.cn/?p=37628 6月16日，小鹏汇天旅航者X2在北京大兴国际机场临空经济区完成首飞，这也是小鹏汇天的产品在京津冀地区进行的首次飞行。小鹏汇天方面还表示，公司准备量产，并计划今年四季度开启预售小鹏汇天分体式飞行汽车，探索分体式飞行汽车城际通勤。阅读原文，获取专题报告合集全文，解锁文末271份飞行汽车相关行业研究报告。 据悉，业内人士对飞行汽车行业
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Java Web指的是什么

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用，主要通过Java EE（Enterprise Edition）平台来实现。  主要特点和技术包括： 1. Servlets和JSP：     Servlets 是Java编写的服务器端程序，用于处理客户端请求和生成动态网页内容。     JSP（JavaServer Pages）
阅读更多...
金融业开源技术 术语

金融业开源技术 术语

金融业开源技术  术语 1  范围 本文件界定了金融业开源技术的常用术语。 本文件适用于金融业中涉及开源技术的相关标准及规范性文件制定和信息沟通等活动。
阅读更多...
BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点：Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点：弱密码字典爆破 四种方法：   [web][极客大挑战 2019]Http 考点：Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩，我们先查看源代码
阅读更多...
EasyPlayer.js网页H5 Web js播放器能力合集

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求，要求做一款播放器，发现能力上跟EasyPlayer.js基本一致，满足要求： 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏（单屏/全屏） 多分屏（2*2） 多分屏（3*3） 多分屏（4*4） 播放控制 播放（单个或全部） 暂停（暂停时展示最后一帧画面） 停止（单个或全部） 声音控制（开关/音量调节） 主辅码流切换 辅助功能 屏
阅读更多...
AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出

AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出

AI(文生语音)-TTS 技术线路探索学习:从拼接式参数化方法到Tacotron端到端输出 在数字化时代，文本到语音（Text-to-Speech, TTS）技术已成为人机交互的关键桥梁，无论是为视障人士提供辅助阅读，还是为智能助手注入声音的灵魂，TTS 技术都扮演着至关重要的角色。从最初的拼接式方法到参数化技术，再到现今的深度学习解决方案，TTS 技术经历了一段长足的进步。这篇文章将带您穿越时
阅读更多...
系统架构设计师： 信息安全技术

系统架构设计师： 信息安全技术

简简单单 Online zuozuo： 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo ：本心、输入输出、结果 简简单单 Online zuozuo ： 文章目录 系统架构设计师： 信息安全技术前言信息安全的基本要素：信息安全的范围：安全措施的目标：访问控制技术要素：访问控制包括：等保
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2