首页 前端知识 在Js中如何实现文本朗读即文字转语音功能实现

在Js中如何实现文本朗读即文字转语音功能实现

2024-03-21 15:03:18 前端知识 前端哥 629 637 我要收藏

9db8024d6145b123a8efc1db27986da1.jpeg

前言

平时在做项目的过程中,有遇到场景是客户要求播放语音的场景,比如:无障碍朗读,整篇文章实现朗读,文字转语音,文字转语音播放等等。

在不使用第三方API接口的情况下,这里需要js来实现文字转语音播放的功能。能想到的也就是利用html5的个APISpeechSynthesis

SpeechSynthesis用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等等

SpeechSynthesis实例对象属性

  1. lang 获取并设置话语的语言

  2. pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)

  3. rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)

  4. text 获取并设置说话时的文本

  5. voice 获取并设置说话的声音

  6. volume 获取并设置说话的音量

SpeechSynthesis方法

  1. speak() 将对应的实例添加到语音队列中

  2. cancel() 删除队列中所有的语音.如果正在播放,则直接停止

  3. pause()暂停语音

  4. resume() 恢复暂停的语音

  5. getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效

实例对象中的方法

  1. onstart – 语音合成开始时候的回调。

  2. onpause – 语音合成暂停时候的回调。

  3. onresume – 语音合成重新开始时候的回调。

  4. onend – 语音合成结束时候的回调

简单实现

如果想让浏览器读出“书以启智,技于谋生,活出斜杠”的声音,可以下面的js代码:

let utterThis = new SpeechSynthesisUtterance('书以启智,技于谋生,活出斜杠');
speechSynthesis.speak(utterThis);

实现这个语音朗读,需要用构造器函数SpeechSynthesisUtterance方法,实例对象下,调用speak方法,即可实现语音的播报

除了使用speak方法,我们还可以实例对象属性text,因此上面的代码也可以写成

let utterThis = new SpeechSynthesisUtterance();
utterThis.text = '书以启智,技于谋生,活出斜杠';
utterThis.lang = 'en-US';//汉语
utterThis.rate = 0.7;//语速
speechSynthesis.speak(utterThis);

具体实例代码

<template>
    <div class="speech-wrap">
       <div>
            <span class="demonstration">音量</span>
            <el-slider @input="handleVoinceInput" v-model="voinceValue"  vertical height="200px"></el-slider>
       </div>
       <div>
             <el-input class="inseret-input" clearable placeholder="请输入内容" v-model="input"></el-input>
             <el-select @change="handleSelectChange" v-model="selectVal" slot="prepend" placeholder="请选择语言">
                 <el-option label="zh-CN" value="zh-CN"></el-option>
                 <el-option label="en-US" value="en-US"></el-option>
            </el-select>
            <el-button slot="append" @click="handleTransYuYin">转语音</el-button>
            <el-button  @click="handleStopYuYin">暂停</el-button>
            <el-button  @click="handleHuiFuYuYin">恢复</el-button>
       </div>  
    </div>
 </template>
 <script>
 export default {
     name: 'speechSynthesisUtterance',
     data() {
         return {
             input: '书以启智,技于谋生,活出斜杠',
             voinceValue: 30,
             selectVal: 'zh-CN',
         }
     },
 
     methods: {
         handleTransYuYin() {
            if(this.input) {
                let msg = new SpeechSynthesisUtterance(this.input);
                msg.volume = this.voinceValue;
                msg.rate = this.voinceValue;
                msg.pitch = this.voinceValue;
                this.throttle(window.speechSynthesis.speak(msg),2000);
            }else {
                this.$message.error('输入框内容不能为空');
            }
           
         },

 
         handleVoinceInput(val) {
             this.voinceValue = val;
         },
 
          handleSelectChange(val) {
             this.selectVal = val;
          },
 
          handleStopYuYin() {
              window.speechSynthesis.pause();
          },

          handleHuiFuYuYin() {
            window.speechSynthesis.resume();
          },
 
          throttle(fn,delay) {
             let last = 0
             return function() {
                 const now = new Date()
                 if(now - last > delay) {
                     fn.apply(this,arguments)
                     last = now
                 }
             }
         }  
         
     }
 }
 </script>
 <style scoped>
 .speech-wrap {
    display:flex;
    justify-content:start;
    align-items: center;
    
 }

 .speech-wrap .inseret-input {
    width: 400px;
 }
 </style>

window.speechSynthesis来创建语音,xxx.volume 获取并设置说话的音量,xxx.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢),xxx.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)

window.speechSynthesis.speak(msg) 播放语音,msg 是一个SpeechSynthesisUtterance对象,msg.text 设置要播放的话, msg.lang 设置语言,msg.volume 设置音量,msg.rate 设置语速,msg.pitch 设置音调

上面使用了throttle函数来限制播放的频率,防止播放过快,导致浏览器卡顿

如果不使用接口的方式,在项目中加入文本转语音,可以用这种方式实现,但是要注意兼容性问题,这个API是不兼容IE浏览器的

关于山东33岁小伙自绑双脚跳河自尽

2023-10-19

fa50f54314ea2450e0175c7f44076c5e.jpeg

聊一下湖北黄石当街锤人事件

2023-10-18

594f5dc5ad986470f83192361a816a64.jpeg

聊下读完《如何成为一名运营大牛》这本书后感

2023-10-12

315d0df234592d3224d355eda532f0c3.jpeg

聊一下读完“优势成长”这本书后感

2023-10-08

daae65a9d13e2e8752ab038738d70ca5.jpeg

函数的防抖与节流

2023-10-07

6bef494a2823be51eb1ca7e3a033247a.jpeg

vuejs中使用axios时如何实现滑动滚动条来动态加载列表数据

2023-10-06

1b113a71d9e18ca25d037def416b4089.jpeg

0164a5d81ca2217a1e034ee36434d828.png

(能绘画,能问答)

953c832fc4d896f51c9ce5487dad9712.png

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4009.html
标签
评论
发布的文章

jQuery和CSS选择器的使用

2024-04-15 09:04:55

HTML前端表单校验的方法

2024-04-15 09:04:46

使用jQuery写一个注册界面

2024-04-15 09:04:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!