浏览器播放语音SpeechSynthesisUtterance

article/2025/9/13 10:44:42

目的:因为公司项目需要来浏览器播放语音,看了科大讯飞的产品,后面有发现html5有原生的api,更加方便,所以使用了

一、语音合成和语音识别

     “语音识别(Speech Recognition)”目前的就Chrome浏览器和Opera浏览器默认支持,但是,“语音合成(Speech Synthesis)”的兼容性要好上太多了Chrome,FF,Edge,Safari等等都是支持的。

二、代码

var mess = '语音合成测试'var msg = new SpeechSynthesisUtterance(mess)msg.volume = 100  // 声音的音量msg.rate = 1 // 语速,数值,默认值是1,范围是0.1到10msg.pitch = 1.5 // 表示说话的音高,数值,范围从0(最小)到2(最大)。默认值为1speechSynthesis.speak(msg)

三、遇到的问题

 

 

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

[Deprecation] speechSynthesis.speak() without user activation is no longer allowed since M71, around December 2018. See https://www.chromestatus.com/feature/5687444770914304 for more details

解决方法: 进去必须有一个激活动作,如点击事件click,或者你直接鼠标点击页面某处就可以播放了


http://chatgpt.dhexx.cn/article/C38UpUuv.shtml

相关文章

使用 Nginx 服务器配置 flv、mp4,可以直接浏览器播放

由于需求,需要提供浏览器播放 mp4 和 flv 视频功能。首先浏览器直接支持 flv 和 mp4 格式。只需要在对应的 WEB 服务上完成配置即可。 注意,我的需求是通过浏览器直接播放 MP4,而不是服务器提供 RTMP 功能,使用 RTMP 又是另外一种…

浏览器兼容video视频播放的多种方法

前言: 在 HTML 中播放视频并不容易!因为直到现在,仍然不存在一项旨在网页上显示视频的标准。今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 比如win…

关于浏览器播放视频的些许理解

浏览器地址栏输入服务器端视频的url即可播放。刚开始觉得还有点神奇,追踪network请求,发现视频还没下载完就可以播放,还可以拖动进度条到指定时间。分析了一下网络请求和视频格式,得出些许领悟。 1.服务器端支持文件的分块传输。即…

浏览器中如何让视频倍速播放

浏览器中视频免费倍速播放 文章目录 浏览器中视频免费倍速播放1.打开Edge的扩展页面2.安装global speed 3.安装tampermonkey beta4.打开tampermonkey5.安装某盘视频播放器脚本6.打开播放链接 此篇教程只针对于某盘网页版,浏览器为Edge 1.打开Edge的扩展页面 2.安装g…

rtsp流浏览器播放方案

rtsp流在主流浏览器并不支持直接播放。比如大华的视频流:rtsp://admin:123456 192.168.10.129/cam/realmonitor?channel1&subtype0,用vlc可以直接播放。但在浏览器会报ERR_UNKNOWN_URL_SCHEME。那如何在浏览器中播放呢。 以下列出几种方案。 1、安…

浏览器播放rtsp视频流解决方案

解决获取到海康摄像头的rtsp视频流,在浏览器播放问题。采用ffmpegnginxvideo.js解决方案(Windows环境) 资源下载 ffmpeg百度云资源:链接:https://pan.baidu.com/s/15pq8ErLZg9UcOgjqTkJZtw 提取码:8kyg…

IAR基础教程之函数跳转

IAR基础教程之函数跳转 一、编译 二、编译过程 三、等待内部链接 在编译完成后,等待绿条读满。 注意: 如果绿条没有完成,部分函数可能无法跳转。 如果工程编译出错,则无法完成如上工作。 四、函数跳转 右键单击 点击“Defini…

IAR安装使用教程

仅仅用于学习交流,非用于商业,如有异议,请联系我。 IAR 和谐 和谐工具:IARkg_Unis.exe ---------1.双击打开 IARkg_Unis.exe 文件。点击”Generate”生成序列号,每个电脑生成的不同,将序列号复制保存下来以…

IAR 安装教程

学校的物联网技术实验需要IAR for 51工具,起初一直找不到下载窗口在哪,最后终于找到并下载安装成功,就分享一下 1.官网下载安装包 https://www.iar.com/ 寻找对应设备版本: 不清楚的话可以在下面寻找设备进行查询,像…

IAR教程之IAR安装

IAR安装 1.下载 1.1打开官网 1.2找到要下载的版本 1.3下载 同学们除了可以下载最新版本尝鲜之外,还可以下载之前的版本。低版本IAR打开高版本IAR工程,工程配置会错乱,导致编译报错问题,所以一定要使用比推荐版本高的IAR 单片机I…

Iar新建工程配置使用教程

Iar新建工程配置使用教程 wangxl20180809 新建工程 打开demo目录,重新复制led目录并改成自己的工程名,如:demoled;(本模板适合stm32f10X的芯片使用) 运行iar软件,进入demoled\Project目录选project.eww进行打开; 工程配置 修改…

IAR for STM8安装教程

先附上下载链接和提取码哈: 链接:https://pan.baidu.com/s/1x5n_nYP2RcN2N_G9p4qz2Q 提取码:h135 1、软件安装 解压完后点击安装包下的:EWSTM8-3104-Autorun.exe文件进行安装 在这我们选择第一个选项,记住有些安装…

IAR for 8051安装教程

安装步骤: 安装前先关闭杀毒软件和360卫士,注意安装路径不能有中文,安装包路径也不要有中文。 安装前请断网。 试装系统:win10 64bit 1.解压安装包。 2.选择你需要安装的IAR for 8051的版本,一般选择安装最新的版…

IAR for STM8的基本使用教程

很多第一次接触硬件的小伙伴们对于如何利用IAR编写程序并烧录到板子上感觉很困扰,今天我们就从IAR的基本使用来讲起,希望能给大家带来一定的帮助。 1. 创建新的工作环境: 2. 在工作环境下创建自己的工程: 如果有已存在的工程&…

Iar工程调试使用教程

Iar工程调试使用教程 wangxl20180809 打开工程 运行iar软件,进入demoled\Project目录选project.eww进行打开; 二、调试 1、设置断点 在代码左边点击要设置断点的语句,或点击要设置断点的语句,按鼠标右键,选择Toggle Breakpoi…

IAR for ARM系列教程(一)_新建软件工程详细过程

推荐 分享一个大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来!http://www.captainbed.net/strongerhuang 我的网站:https://www.strongerhuang.com 我的知乎…

IAR 系列教程

https://www.strongerhuang.com/categories/EWSTM8%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B/ https://blog.csdn.net/ybhuangfugui/article/details/81436533

IAR操作指南

IAR中的参数变量表 __iar_program_start在哪里定义/main之前做了什么 在main()之前,IAR都做了啥 cortex-m3启动代码详解 在IAR中利用AStyle插件格式化代码 IAR配色方案 --styleallman --pad-oper --max-code-length150 --add-braces --align-pointername --max-con…

IAR 使用教程 –以KS22为例

IAR 使用教程 –以KS22为例 IAR 版本: 1 新建立一个工程 1.1打开IAR ,如果之前已经建立过工程想新建立一个工程,那么按照如下操作: 1.2 新建一个工程: 1.3 新建一个空的工程,或者可以选择其他的,其他的会加…

IAR环境配置教程(CC2530版)

我们先来看一下如何创建在IAR中创建一个我们自已的工程。 注意:本教程只是配置在线调试。 温馨提示:在建立工作区和新建工程以及C语言文件的时候会产生多个文件及文件夹,可以提前建立一个文件夹,方便保存哦。 1、建立自已的工程…