前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。
领导想听网页内容~
这几天，领导找到了我们，说能不能在现阶段公司内部的一些资讯类网页系统，加一个“朗读”功能，把这些网页上的咨询朗读给他们听，我觉得这个要求很合理，毕竟现阶段很多的大平台也都设置了朗读功能，所以我们马上进行了开发~
微信也有类似功能
前几天我在微信公众号的文章那里，发现了一个东西，点进去之后，能把整篇文章朗读给你听~~ 所以我想现阶段JavaScript应该有提供这样的 API 来完成这个功能吧~~
speechSynthesis & SpeechSynthesisUtterance
于是我去 MDN 上查了一下，还真有，我查到了两个东西 speechSynthesis、SpeechSynthesisUtterance，我们可以简单理解这两个东西：
- **SpeechSynthesisUtterance：**生成朗读的配置信息，比如语言、内容、语速等
- **speechSynthesis：**根据上面生成的配置，进行朗读
他们的用法也是非常的简单，简直就是无脑上手！！！
朗读 & 取消朗读
我们先来看看应该如何去播放一个文本，首先我们需要创建一个 SpeechSynthesisUtterance 的实例，并且设置一些属性，比如：
- **text：**朗读的文本
- **lang：**朗读的语言
- **rate：**朗读的语速
接着，我们需要把这个实例，也就是准备好的朗读配置，传入speechSynthesis的方法中：
- **speak：**开始朗读
- **cancel：**取消朗读
<template>
<div style="width: 300px; margin-left: 100px; margin-top: 100px">
<div></div>
<el-button @click="startSpeech" type="primary"> 朗读 </el-button>
<el-button @click="cancel"> 取消朗读 </el-button>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const text = `我是林三心，React一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
一个偏前端的全干工程师；
一个不正经的掘金作者；
逗比的B站up主；
不帅的小红书博主；
喜欢打铁的篮球菜鸟；
喜欢历史的乏味少年；
喜欢rap的五音不全弱鸡
`
onMounted(() => {
initSpeechMessage()
})
const speechMessage = ref<null | SpeechSynthesisUtterance>(null)
const synth = window.speechSynthesis
const initSpeechMessage = () => {
const utterance = new SpeechSynthesisUtterance()
utterance.text = text // 内容
utterance.lang = 'zh-CN' // 设置语言为中文
utterance.rate = 1.0 // 设置语速
speechMessage.value = utterance
}
const startSpeech = () => {
if (!speechMessage.value) return
synth.speak(speechMessage.value)
}
const cancel = () => {
synth.cancel()
}
</script>
暂停朗读 & 继续朗读
同时他也支持暂停、继续的功能，需要用到speechSynthesis的两个方法：
- **pause：**暂停朗读
- **resume：**继续朗读
<el-button @click="pauseSpeech"> 暂停 </el-button>
<el-button @click="resumeSpeech"> 继续 </el-button>
const pauseSpeech = () => {
synth.pause()
}
const resumeSpeech = () => {
synth.resume()
}
播放进度
我们可以使用监听 SpeechSynthesisUtterance 实例身上的 boundary 事件，来监听播放进度
<el-progress :percentage="progress" />
const progress = ref(0)
const initSpeechMessage = () => {
const utterance = new SpeechSynthesisUtterance()
utterance.text = text
utterance.lang = 'zh-CN' // 设置语言为中文
utterance.rate = 1.0 // 设置语速
// 添加 onboundary 事件监听器以获取播放进度
+ utterance.addEventListener('boundary', onBoundary)
speechMessage.value = utterance
}
const onBoundary = (event) => {
if (!speechMessage.value) return
const charIndex = event.charIndex
const charLength = speechMessage.value.text.length
const percentage = Math.round((charIndex / charLength) * 1000) / 10
// 更新播放进度展示
progress.value = percentage
}
记得 cancel
当你播放之后，刷新页面，你会发现依旧还在朗读，并没有自动取消，所以，在组件销毁的时候，记得手动执行一次cancel
const initSpeechMessage = () => {
const utterance = new SpeechSynthesisUtterance()
utterance.text = text
utterance.lang = 'zh-CN' // 设置语言为中文
utterance.rate = 1.0 // 设置语速
// 添加 onboundary 事件监听器以获取播放进度
utterance.addEventListener('boundary', onBoundary)
+ window.addEventListener('beforeunload', cancel)
speechMessage.value = utterance
}
属性 & 方法
speechSynthesis、SpeechSynthesisUtterance 身上的一些有用的方法或者属性，我总的介绍一下
SpeechSynthesisUtterance
- lang： 属性，语言
- text： 属性，内容
- rate： 属性，语速
- voice： 属性，声音风格
- volume： 属性，音量
- boundary： 播放中监听
- start： 开始播放监听
- end： 结束播放监听
- pause： 暂停播放监听
- resume： 继续播放监听
- mark： 触发标记监听
- error： 报错监听
speechSynthesis
- paused： 属性值，暂停时为 true
- pending： 属性值，语音还没说完时为 true
- speaking： 属性值，播放时为 true
- speak： 方法，播放
- pause： 方法，暂停
- resume： 方法，继续
- getVoices： 方法，获取声音风格
结语 & 加学习群 & 摸鱼群
我是林三心
- 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
- 一个偏前端的全干工程师；
- 一个不正经的掘金作者；
- 一个逗比的B站up主；
- 一个不帅的小红书博主；
- 一个喜欢打铁的篮球菜鸟；
- 一个喜欢历史的乏味少年；
- 一个喜欢rap的五音不全弱鸡
如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点
