浏览器播放语音SpeechSynthesisUtterance

目的：因为公司项目需要来浏览器播放语音，看了科大讯飞的产品，后面有发现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，或者你直接鼠标点击页面某处就可以播放了

浏览器播放语音SpeechSynthesisUtterance相关推荐

Chome浏览器播放语音、视频无声音的解决办法
A.原因:点击桌面右下角的扬声器图标,点击"合成音(X)",查看Google Chrome是否被静音. 解决办法:取消静音 B.原因:查看当前标签页是否被静音解决办法 ...
JS 播放语音，将文本转成语音播放
function sss(){var u = new SpeechSynthesisUtterance();u.text = "你好.我要播放语音了...";u.lang = 'z ...
使用js写一个播放语音提示的功能
利用window自带的speechSynthesis编写一个播放语音提示的功能之前利用百度的在线语音合成发现改不了其中的per属性,自己装了一下node包,发现cnpm引入的时候会与vue-admi ...
web页面播放语音提示保存成功
web页面播放语音提示保存成功 <!DOCTYPE html> <html><head><title>tishiyin.html</title&g ...
微信小程序wx.createInnerAudioContext()在安卓手机不能播放语音文件问题解决
本文介绍小程序安卓手机播放语音文件错误问题的分析过程与解决方案,该问题出现较多,问题隐藏较深,按本文方案可以解决该问题. 一.问题现象微信小程序已经放弃了基于wx.createAudioContex ...
FreeSWITCH在呼叫失败的情况下如何播放语音提示
看到好多网友问到这个问题.一般我们在打电话时会听到"您拨的电话正在通话中,请稍后再拨....",或"电话无应答..."之类的提示,我们在 freeswitch ...
rtsp 测试地址_TranServer：简单实现浏览器播放RTSP流
市面上有很多浏览器播放RTSP的解决方案,参见(https://juejin.im/post/6844903877217632264). 可惜这些方式,都不太适合上百个摄像头的接入,所以自己写了个服务 ...
WPF使用Animation仿WeChat（微信）播放语音消息
WPF开发者QQ群: 340500857 前言 WPF使用Animation仿WeChat(微信)播放语音消息? 效果图: 创建MyAnimationForever.cs如下: public clas ...
php安卓直播抓取,hls,android_安卓大部分浏览器播放HLS协议直播流会从头开始，hls,android,ffmpeg,m3u8 - phpStudy...
安卓大部分浏览器播放HLS协议直播流会从头开始遇到的问题 HLS直播流在iOS系统中表现正常, 但在安卓使用大部分浏览器(UC浏览器除外)播放ffmpeg生成的HLS直播流都会发生从头播放的问题, ...
浏览器播放rtsp流媒体解决方案
浏览器播放rtsp流媒体解决方案参考文章: (1)浏览器播放rtsp流媒体解决方案 (2)https://www.cnblogs.com/gaoji/p/6872365.html 备忘一下.

浏览器播放语音SpeechSynthesisUtterance

浏览器播放语音SpeechSynthesisUtterance相关推荐

最新文章

热门文章