iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >步骤详解Vue怎么实现语音播报(附代码)
  • 529
分享到

步骤详解Vue怎么实现语音播报(附代码)

speak-tts插件Vue 2022-11-22 23:11:48 529人浏览 八月长安
摘要

Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)场景speak-tts插件https://www.npmjs.com/package/speak-tts(学习视频分享:Vue视频教程) 实现点击按钮触发语音

Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)

场景

speak-tts插件

https://www.npmjs.com/package/speak-tts(学习视频分享:Vue视频教程

实现点击按钮触发语音播报,播报指定的文字内容。

为什么不能实现自动语音播报。

chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能。

严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频。

不光是这样,在页面加载完毕的情况下,用户没有click、dbclick、touch等主动交互行为,

使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException;

实现

1、参考官方说明安装依赖

npm install speak-tts

2、在页面中引入

import Speech from 'speak-tts'

3、声明speech对象

  data() {    return {
      speech: null,
    };

4、页面加载完调用初始化方法

mounted() {
    this.speechInit();
  },
  methods: {
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {});
    },

5、页面添加按钮

<el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>

6、按钮点击事件中调用播放方法

    speakTtsSpeech() {      this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
        console.log("读取成功");
      });
    },

7、完整示例代码

<template>
  <el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>
</template>
<script>
import Speech from "speak-tts"; // es6
export default {
  name: "SpeechDemo",
  data() {
    return {
      speech: null,
    };
  },
  mounted() {
    this.speechInit();
  },
  methods: {
    speakTtsSpeech() {
      this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
        console.log("读取成功");
      });
    },
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {});
    },
  },
};
</script>

<style scoped>
</style

以上就是步骤详解Vue怎么实现语音播报(附代码)的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: 步骤详解Vue怎么实现语音播报(附代码)

本文链接: https://www.lsjlt.com/news/173486.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 步骤详解Vue怎么实现语音播报(附代码)
    Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)场景speak-tts插件https://www.npmjs.com/package/speak-tts(学习视频分享:vue视频教程) 实现点击按钮触发语音...
    99+
    2022-11-22
    speak-tts插件 Vue
  • 图文详解Vue3实现全局搜索框步骤(附代码)
    @charset "UTF-8";@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.markdown-body{word-break:break-word...
    99+
    2023-05-14
    vue3
  • 一文详解vue怎么实现v-model(附代码示例)
    本篇文章给大家带来了关于vue的相关知识,其中主要给大家介绍了我们为什么使用v-model?用vue怎么实现v-model的,感兴趣的朋友一起来看一下吧,希望对大家有帮助。为什么使用v-model v-model作为双向绑定指令也是vue两...
    99+
    2023-05-14
    前端 Vue.js
  • C语言实现红黑树详细步骤+代码
    目录红黑树的概念红黑树的性质红黑树的定义与树结构插入新增结点插入后维护红黑树性质的主逻辑拆解讨论:旋转验证红黑树与AVl树的比较红黑树的应用总结红黑树的概念 红黑树,是一种二叉搜索树...
    99+
    2024-04-02
  • vscode扩展代码定位实现步骤详解
    目录前言整体思路文件查询项目内查询已打开文件中内容查询根据内容查询根据所在行数(+文件名)查询语言层面查询符号(变量)查询函数、类、接口的声明与实现(调用)前言 欢迎来到 vscod...
    99+
    2022-11-13
    vscode扩展代码定位 vscode代码定位
  • 实例详解uniapp如何实现电话录音功能(附代码)
    本篇文章给大家带来了关于uniapp的相关知识,其中主要介绍了怎么用uniapp实现拨打电话并且还能同步录音的功能,感兴趣的朋友一起来看一下吧,希望对大家有帮助。uniapp 实现打电话录音功能最近需要实现一个通过 uniapp 调用手机拨...
    99+
    2023-05-14
    uni-app
  • 详解uniapp实现打电话录音功能(附核心代码)
    本篇文章给大家带来了关于uniapp的相关知识,其中主要跟大家介绍uniapp怎么实现打电话录音功能,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。最近需要实现一个通过uniapp调用手机拨打电话的功能,拨打之后同时录音,挂断电话之后将...
    99+
    2023-05-14
    uniapp
  • Python3.7 + Yolo3怎么实现识别语音播报功能
    这篇文章将为大家详细讲解有关Python3.7 + Yolo3怎么实现识别语音播报功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、利用Python调用系统win10...
    99+
    2023-06-22
  • python实现语音常用度量方法的代码详解
    语音信号处理一般都要进行主观评价实验和客观评价实验。 主观评价:邀请测听者对语音进行测听,给出主观意见得分 客观评价:根据算法来衡量语音质量 主观投票受多种因素影...
    99+
    2024-04-02
  • Vue实现轮播图效果的代码怎么写
    今天小编给大家分享一下Vue实现轮播图效果的代码怎么写的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Vue 过渡Vue 的过...
    99+
    2023-07-04
  • 怎么用Python代码实现文字转语音
    这篇文章主要讲解了“怎么用Python代码实现文字转语音”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用Python代码实现文字转语音”吧!前言:开发环境:WindowsPython版本...
    99+
    2023-06-29
  • Vue3解析markdown并实现代码高亮显示的详细步骤
    目录具体实现步骤如下:一、安装依赖库二、在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令三、在Vue组件中应用marked解析及实现代码高亮四、显示...
    99+
    2024-04-02
  • C语言实现扫雷小游戏完整算法详解(附完整代码)
    目录前言1.算法基本思路2.算法详解1.初始化数组与打印数组2.设置雷3.排查与标记4.CountMine函数计算周围雷的个数 5.ExpandMine函数递归展开周围所有...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作