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。

相关文章

Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...
如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

《如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解》：本文主要介绍如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别的相关资料,描述了如何使用海康威视设备网络SD... 目录前言开发流程问题和解决方案dll库加载不到的问题老旧版本sdk不兼容的问题关键实现流程总结前言作为
阅读更多...
Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

Deepseek R1模型本地化部署+API接口调用详细教程(释放AI生产力)

《DeepseekR1模型本地化部署+API接口调用详细教程(释放AI生产力)》本文介绍了本地部署DeepSeekR1模型和通过API调用将其集成到VSCode中的过程,作者详细步骤展示了如何下载和... 目录前言一、deepseek R1模型与chatGPT o1系列模型对比二、本地部署步骤1.安装oll
阅读更多...
浅析如何使用Swagger生成带权限控制的API文档

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里，API
阅读更多...
解决JavaWeb-file.isDirectory()遇到的坑问题

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意：该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇
阅读更多...
一分钟带你上手Python调用DeepSeek的API

一分钟带你上手Python调用DeepSeek的API

《一分钟带你上手Python调用DeepSeek的API》最近DeepSeek非常火,作为一枚对前言技术非常关注的程序员来说,自然都想对接DeepSeek的API来体验一把,下面小编就来为大家介绍一下... 目录前言免费体验API-Key申请首次调用API基本概念最小单元推理模型智能体自定义界面总结前言最
阅读更多...
JavaWeb-WebSocket浏览器服务器双向通信方式

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏
阅读更多...
JAVA调用Deepseek的api完成基本对话简单代码示例

JAVA调用Deepseek的api完成基本对话简单代码示例

《JAVA调用Deepseek的api完成基本对话简单代码示例》：本文主要介绍JAVA调用Deepseek的api完成基本对话的相关资料,文中详细讲解了如何获取DeepSeekAPI密钥、添加H... 获取API密钥首先，从DeepSeek平台获取API密钥，用于身份验证。添加HTTP客户端依赖使用Jav
阅读更多...
C#使用DeepSeek API实现自然语言处理,文本分类和情感分析

C#使用DeepSeek API实现自然语言处理,文本分类和情感分析

《C#使用DeepSeekAPI实现自然语言处理,文本分类和情感分析》在C#中使用DeepSeekAPI可以实现多种功能,例如自然语言处理、文本分类、情感分析等,本文主要为大家介绍了具体实现步骤,... 目录准备工作文本生成文本分类问答系统代码生成翻译功能文本摘要文本校对图像描述生成总结在C#中使用Deep
阅读更多...
5分钟获取deepseek api并搭建简易问答应用

5分钟获取deepseek api并搭建简易问答应用

《5分钟获取deepseekapi并搭建简易问答应用》本文主要介绍了5分钟获取deepseekapi并搭建简易问答应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需... 目录1、获取api2、获取base_url和chat_model3、配置模型参数方法一：终端中临时将加
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2