vue使用WEB自带TTS实现语音文字互转的操作方法

 更新时间:2024年01月26日 11:33:32   作者:相与还  
这篇文章主要介绍了vue使用WEB自带TTS实现语音文字互转,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

前言

时隔多日,自己已经好久没更新文章了;今年一直跟随公司的政策[BEI YA ZHA]中,做了一个又一个的需求,反而没有多少自己的时间,更别说突破自己

˚‧º·(˚ ˃̣̣̥᷄⌓˂̣̣̥᷅ )‧º·˚(雾)

然后最近,我朋友突然和我说有没有做过TTS,我第一反应是???

ʕ •ᴥ•ʔ……
一脸无辜

于是就出现我们今天主题的
什么是TTS?

去调查了一番,简单的说就是一种语音文本互转的技术

这里涉及到语音合成的概念.语音合成是通过机械的、电子的方法产生人造语音的技术。TTS技术(又称文语转换技术)隶属于语音合成而WEB,也就是我们的浏览器,已经给我们封装好了TTS,能够很方便的调用API,基本上,我们能够使用原生的前端元素直接实现文本转语音,语音转文字

因此任何前端框架都可以使用该套逻辑实现TTS

WEB自带TTS

它是有自己的官方文档的,我们可以很轻易的就通过该API文档来找到我们需要的实现的逻辑

WEB自带TTS官方中文文档API

基础事件

文字转语音基础事件

这里给大家列出几个常用的基础事件,更多可访问上面的API文档

// 创建 SpeechSynthesisUtterance 对象
var speechUtterance = new SpeechSynthesisUtterance('Hello, how are you?');
// 创建 SpeechSynthesis 对象
var synthesis = window.speechSynthesis;
// 设置语音合成的事件处理函数
// 开始语音合成
speechUtterance.onstart = function(event) {
  console.log('Speech synthesis started.');
};
// 结束语音合成
speechUtterance.onend = function(event) {
  console.log('Speech synthesis ended.');
};
// 暂停语音合成
speechUtterance.onpause = function(event) {
  console.log('Speech synthesis paused.');
};
// 恢复语音合成
speechUtterance.onresume = function(event) {
  console.log('Speech synthesis resumed.');
};
// 分段语音合成
speechUtterance.onboundary = function(event) {
  console.log('Speech boundary reached at character index ' + event.charIndex + '.');
};
// 启动语音合成
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  synthesis.speak(speechUtterance);
});

语音转文字基础事件

// 创建 SpeechRecognition 对象
var recognition = new window.SpeechRecognition();
// 设置语音识别的事件处理函数
// 开始语音识别
recognition.onstart = function(event) {
  console.log('Speech recognition started.');
};
// 结束语音识别
recognition.onend = function(event) {
  console.log('Speech recognition ended.');
};
// 识别到语音结果
recognition.onresult = function(event) {
  var transcript = event.results[0][0].transcript;
  console.log('Recognized speech: ' + transcript);
};
// 启动语音识别
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  recognition.start();
});

VUE项目

我有将本次研究的成果放到我的git上,以下为我项目中的截图

还有一个文本跟随朗读变色的实际上是我朋友需要的研究的功能,其实界面是差不多的,结尾我会放出我项目的git链接,以供大家参考

语音转文字

在我的项目中,vue实现语音转文字的代码如下:

界面

<template>
  <div>
    <el-page-header @back="goBack" content="语音转文字"/>
    <div class="bank"></div>
    <el-card header="语音转文字">
      <el-card>
        <el-input :readonly="true" id="word" v-model="word"></el-input>
      </el-card>
      <el-card>
        <el-button type="primary" @click="audioCHangeWord"><span v-if="isListening">语音识别中...</span><span v-else>语音识别</span></el-button>
      </el-card>
    </el-card>
  </div>
</template>

逻辑

<script>
export default {
  name: "AudioToWord",
  data() {
    return {
      word: "",
      isListening: false, // 判断是否在语音监听中
    }
  },
  methods: {
    audioCHangeWord() { 
      var that = this;
      that.word = "";
      // 创建SpeechRecognition对象
      // eslint-disable-next-line no-undef
      var recognition = new webkitSpeechRecognition();
      if (!recognition) { 
        // eslint-disable-next-line no-undef
        recognition = new SpeechRecognition();
      }
      // 设置语言
      recognition.lang = 'zh-CN';
      // 开始语音识别
      recognition.start();
      that.isListening = true;
      // 监听识别结果
      recognition.onresult = function (event) {
        var result = event.results[0][0].transcript;
        that.word = result;
      };
      // 监听错误事件
      recognition.onerror = function (event) {
        that.isListening = false;
        that.$message("监听语音失败:"+event.error);
        console.error(event.error);
      };
      // 监听结束事件(包括识别成功、识别错误和用户停止)
      recognition.onend = function () {
        that.isListening = false;
        console.log("语音识别停止");
      };
    },
    goBack() {
      this.$router.push({ path: "/entry" })
    }
  }
}
</script>

文字转语音

界面

<template>
  <div>
    <el-page-header @back="goBack" content="文字转语音"/>
    <div class="bank"></div>
    <el-card header="文字转语音">
      <el-input
        id="word"
        type="textarea"
        placeholder="请输入文本"
        v-model="word"
        maxlength="300"
        rows="4"
        show-word-limit
      >
      </el-input>
      <div class="bank"></div>
      <el-card>
        <el-button @click="changeToAudio" type="primary">转为语音</el-button>
      </el-card>
      <div class="bank"></div>
      <el-card>
          <el-button @click="pause" type="warning">暂停</el-button>
          <el-button @click="resume" type="success">继续</el-button>
          <el-button @click="cancel" type="info">取消</el-button>
      </el-card>
      <div class="bank"></div>
      <el-card>
        <el-button @click="getvoice" type="primary">获取语音合成数据(F12)</el-button>
      </el-card>
    </el-card>
  </div>
</template>

逻辑

<script>
export default {
  name: "WordToAudio",
  data() {
    return {
      word: "",
      isPaused: false, // 判断是否暂停
    }
  },
  methods: {
    // 选
    changeToAudio() {
      if (!this.word) {
        this.$message("请输入文本");
        return;
      }
      if (this.isPaused) {
        this.$message("当前语音已暂停,请点击继续!");
        return;
      } else if (window.speechSynthesis.speaking) {
        this.$message("当前已有正在播放的语音!");
        return;
      }
      // 为了防止在暂停状态下转语音,调用前设置继续播放
      window.speechSynthesis.resume();
      // 设置播放
      var textArea = document.getElementById('word');
      var range = document.createRange();
      range.selectNodeContents(textArea);
      var speech = new SpeechSynthesisUtterance();
      speech.text = this.word; // 内容
      speech.lang = "zh-cn"; // 语言
      speech.voiceURI = "Microsoft Huihui - Chinese (Simplified, PRC)"; // 声音和服务
      // eslint-disable-next-line no-irregular-whitespace
      speech.volume = 0.7; // 声音的音量区间范围是​​0​​​到​​1默认是​​1​​
      // eslint-disable-next-line no-irregular-whitespace
      speech.rate = 1; // 语速,数值,默认值是​​1​​​,范围是​​0.1​​​到​​10​​​,表示语速的倍数,例如​​2​​表示正常语速的两倍
      // eslint-disable-next-line no-irregular-whitespace
      speech.pitch = 1; // 表示说话的音高,数值,范围从​​0​​​(最小)到​​2​​​(最大)。默认值为​​1​​。
      window.speechSynthesis.speak(speech);
      var highlight = document.createElement('span');
      highlight.style.backgroundColor = 'red';
      range.surroundContents(highlight);
    },
    // 暂停
    pause() {
      this.isPaused = true;
      window.speechSynthesis.pause();
    },
    // 继续
    resume() {
      this.isPaused = false;
      window.speechSynthesis.resume();
    },
    // 取消
    cancel() {
      window.speechSynthesis.cancel();
    },
    getvoice() {
      console.log(window.speechSynthesis.getVoices());
    },
    goBack() { 
      this.$router.push({path: "/entry"})
    }
  }
}
</script>
<style>
.bank {
  padding: 10px;
}
</style>

git链接

WEB自带TTS实现语音文字互转git

结语

以上为我用vue实现WEB自带TTS来实现语音文字互转的过程,如有更多内容会在本文章更新

到此这篇关于vue使用WEB自带TTS实现语音文字互转的文章就介绍到这了,更多相关vue TTS语音文字互转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 简述vue状态管理模式之vuex

    简述vue状态管理模式之vuex

    这篇文章主要介绍了简述vue状态管理模式之vuex,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue事件修饰符native、self示例详解

    Vue事件修饰符native、self示例详解

    这篇文章主要给大家介绍了关于Vue事件修饰符native、self的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • vue修饰符v-model及.sync原理及区别详解

    vue修饰符v-model及.sync原理及区别详解

    这篇文章主要为大家介绍了vue修饰符v-model及.sync原理及使用区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue.js实现选项卡切换

    vue.js实现选项卡切换

    这篇文章主要为大家详细介绍了vue.js实现选项卡切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue中两种生成二维码(带logo)并下载方式总结

    Vue中两种生成二维码(带logo)并下载方式总结

    与后端生成二维码相比,前端生成二维码更具有灵活性,下面这篇文章主要给大家介绍了关于Vue中两种生成二维码(带logo)并下载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • Vue3中echarts无法缩放的问题及解决方案

    Vue3中echarts无法缩放的问题及解决方案

    很多朋友在使用vue3+echarts5技术时会遇到echarts无法绽放的问题,今天小编就给大家分享下问题描述及解决方案,感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • Vue前端vue.config.js简介

    Vue前端vue.config.js简介

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载,本文重点介绍VUE前端vue.config.js简介,感兴趣的朋友跟随小编一起看看吧
    2023-01-01
  • springboot+vue实现文件上传下载

    springboot+vue实现文件上传下载

    这篇文章主要为大家详细介绍了springboot+vue实现文件上传下载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • ant design vue的table取消自带分页问题

    ant design vue的table取消自带分页问题

    这篇文章主要介绍了ant design vue的table取消自带分页问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue项目接入高德地图点击地图获取经纬度以及省市区功能

    vue项目接入高德地图点击地图获取经纬度以及省市区功能

    这篇文章主要给大家介绍了关于vue项目接入高德地图点击地图获取经纬度以及省市区功能的相关资料,开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,需要的朋友可以参考下
    2023-08-08

最新评论