<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>语音播报</title></head><body><h1>语音播报</h1><input id="btn1" type="button" value ="点我" onclick="speak();"/><input id="txt_content" type="text" name="txt_content"/>
</body></html><script>var x=  document.getElementById("txt_content");function speak(){const sos =x.value;const synth = window.speechSynthesis;let msg = new SpeechSynthesisUtterance(sos);msg.lang = "zh-CN";  // 使用的语言:中文msg.volume = 100;      // 声音音量：1msg.rate = 0.75;        // 语速：1msg.pitch = 9;       // 音高：1、synth.speak(msg)}
</script>

详解

SpeechSynthesisUtterance 是 Web Speech API 的接口，表示语音请求。它包含语音服务应阅读的内容以及有关如何阅读的信息（例如语言，音调和音量）。

构造函数

SpeechSynthesisUtterance.SpeechSynthesisUtterance()
返回一个新的 SpeechSynthesisUtterance 对象实例。

属性

SpeechSynthesisUtterance 还从其父接口 EventTarget 继承了属性。

SpeechSynthesisUtterance.lang
获取和设置说话时的语言。

SpeechSynthesisUtterance.pitch
获取和设置说话时的音调。

SpeechSynthesisUtterance.rate
获取和设置说话时的速度。

SpeechSynthesisUtterance.text
获取和设置在说出语音时将要合成的文本。

Gets and sets the text that will be synthesised when the utterance is spoken.

SpeechSynthesisUtterance.voice
获取和设置将用于说出语音的声音。

SpeechSynthesisUtterance.volume
获取和设置说话的音量。

事件

使用 addEventListener() 或通过为此接口的 oneventname 属性分配事件监听器来监听这些事件

boundary
当语音达到单词或句子边界时触发。也可以通过 onboundary 属性处理。

end
语音说完后触发。也可以通过 onend 属性处理。

error
当发生错误而无法成功发声时触发。也可以通过 onerror 属性处理。

mark
当语音到达指定的 SSML “标记” 标签时触发。也可以通过 onmark 属性处理。

pause
语音在途中暂停时触发。也可以通过 onpause 属性处理。

resume
恢复暂停的语音时触发。也可通过 onresume 属性处理。

start
在开始说出语音时触发。也可以通过 onstart` 属性处理。

浏览器兼容性

SpeechSynthesisUtterance实现语音播报相关推荐

StompJS+SpeechSynthesis实现前端消息实时语音播报
前言前端消息的实时推送我相信很多人不陌生,我们可以想到利用WebSocket,服务端主动向客户端推送数据,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输.其 ...
SpeechSynthesisUtterance文字转语音播报
一.介绍 SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等二.基本属性 var sp ...
vue js 语音播报语音读文字 window.speechSynthesis new SpeechSynthesisUtterance (补充无声音问题解决办法)
存在问题1 : 在google chrome 89版本之后默认使用的线上服务来合成语音所以在国内可能会没有声音解决办法 : 通过getVoices 获取 localService为true 的字 ...
vue实现自动语音播报功能，未解决。（已用js解决20220210）
这个放不出来 <template><div><i @click="reader" class="el-icon-microphone&quo ...
使用谷歌浏览器的speechSynthesis的API，实现语音播报功能
今天给大家分享一个,使用谷歌自带的API实现语音播报的功能,可以在项目预警上使用! 实现效果: 代码如下: <!DOCTYPE html> <html><head> ...
前端HTML5语音播报
HTML5语音播报获取html本地video this.localAudio = window.speechSynthesis; 声明语音播报 this.audioService = new Spe ...
js API语音播报笔记
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
python androidhelper 语音识字_Android语音播报、后台播报、语音识别
Android语音播报.后台播报.语音识别本文介绍使用讯飞语音实现语音播报.语音识别功能. 程序效果图: 简单的XML布局 xml version="1.0" encoding= ...
android 语音自动播报,Android 语音播报实现
文章主要讲的是以前做项目时实现的来短信或来电话时语音播报的功能实现,记录下来做个总结. 1.实现语音播报的关键 -- 语音播报工具类(TtsUtil.java) 为了方便文章主要讲的是以前做项目时实 ...

SpeechSynthesisUtterance实现语音播报

详解

构造函数

属性

事件

浏览器兼容性

SpeechSynthesisUtterance实现语音播报相关推荐

最新文章

热门文章