谷歌浏览器实现网页页面语音播报功能

最新推荐文章于 2025-04-12 10:25:32 发布

xiaokuangren_

最新推荐文章于 2025-04-12 10:25:32 发布

阅读量487

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/xiaokuangren_/article/details/132147963

版权

本文介绍了谷歌浏览器在89版本之后如何通过window.speechSynthesis方法实现网页页面的语音播报功能，详细解释了如何使用_SpeechSynthesisUtterance构造函数设置文本、语言、音量、语速和音高等参数，并展示了如何启动和停止语音播报。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 谷歌浏览器实现网页页面语音播报功能
 * 谷歌89版本后使用线上服务实现语音播报功能：window.speechSynthesis方法
 * 引入：import _SpeechSynthesisUtterance from '@/utils/speechSynthesisUtterance'
 * 开启声音：_SpeechSynthesisUtterance.handleSpeak('陕A8888-报警')
 * 关闭声音：_SpeechSynthesisUtterance.handleStop()
 *------------------------------------------------------------------------------------
 * text – 要合成的文字内容，字符串。
 * lang – 使用的语言，字符串， 例如："zh-cn"
 * voiceURI – 指定希望使用的声音和服务，字符串。
 * volume – 声音的音量，区间范围是0到1，默认是1。
 * rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。
 * pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。
*/

class _SpeechSynthesisUtterance {
  constructor (option) {
    this.msg = new SpeechSynthesisUtterance()
  }
  handleSpeak = (text) => {
    this.msg.text = text // 语音播报文字内容
    this.msg.lang = 'zh-CN' // 使用的语言:中文
    this.msg.volume = 1 // 声音音量：1
    this.msg.rate = 1 // 语速：1
    this.msg.pitch = 1 // 音高：1
    window.speechSynthesis.speak(this.msg) // 播放
  }
  handleStop = (e) => {
    this.msg.text = e
    this.msg.lang = 'zh-CN'
    window.speechSynthesis.cancel(this.msg) // 停止
  }
}
export default new _SpeechSynthesisUtterance()