讯飞实时语音读写,并播放录音,上传录音文件

需求描述:使用讯飞实现录音实时识别,并且可以播放以及上传。

  1. 首先想到使用到这个组件voice-input-button2,他集成了讯飞语音读写的功能 ,插件地址:https://github.com/ferrinweb/voice-input-button2
  2. 根据文档集成成功后,可以实时语音读写,但是无法获取到语音文件,不能播放和上传录音文件
  3. 解决办法:改造插件,进行二次开发

改造过程(增加保存文件流,录音播放文件变量,增加播放的方法):

  1. 首先将voice-input-button2下载到本地,下载后目录如下:在这里插入图片描述
  2. lib文件下所有文件和utils下文件copy到本地项目,可根据自己项目自定义命名,我把lib下文件和utils文件放到项目的components的voiceInputButton里,如下:在这里插入图片描述
  3. 改造recorderindex.js文件
    增加录音源文件、播放录音对象,如下:
    在这里插入图片描述
    在实例化的时候获取文件流,保存在本地
    在这里插入图片描述
    增加播放方法:
    在这里插入图片描述
    录音停止时,停止缓存文件流:
    在这里插入图片描述
    voice-input-button.vue中增加播放的方法:
    在这里插入图片描述
    引入的具体实现:
    组件引入:
    在这里插入图片描述

在这里插入图片描述
播放录音调用 this.$refs.voiceInput.toPlay();即可:
在这里插入图片描述
在最终结果方法获取录音源文件:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/136606.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TypeScrip

TypeScript强调了两个重要的特性--类型系统、适用于任何规模的项目 1、TypeScript 从名字就可以看出来,类型是其核心的特性。 我们知道,JavaScript是一门非常灵活的编程语言,他有以下一些特点: 没有类型约束,一个变量可以初始化是字符串&a…

c语言进阶部分详解(指针进阶1)

大家好!指针的初阶内容我已经写好,可移步至我的文章:c语言进阶部分详解(指针初阶)_总之就是非常唔姆的博客-CSDN博客 基本内容我便不再赘述,直接带大家进入进阶内容: 目录 一.字符指针 1.讲解…

华为云云服务器云耀L实例评测 | 从零到一:华为云云耀云服务器L实例上手体验

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

Android StateFlow初探

Android StateFlow初探 前言: 最近在学习StateFlow,感觉很好用,也很神奇,于是记录了一下. 1.简介: StateFlow 是一个状态容器式可观察数据流,可以向其收集器发出当前状态更新和新状态更新。还可通过其 …

go学习之函数知识

函数 文章目录 函数1.函数入门(1)为什么需要函数?(2)什么是函数:2.包3.函数的调用机制通俗理解调用过程:return语句递归调用 4.函数注意事项和细节讨论5.init函数6.匿名函数7.闭包8.defer9.函数参数的传递方式10.字符串中常用的函数11.时间和…

基于SSM+Vue的舞蹈网站

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用Vue技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

elment table静态表格 +表头居中加粗和表格内居中

效果图 注意的地方 表头居中加粗 header-cell-class-nameactive-header header-cell-class-name是element表格自带的参数 表格内居中cell-class-name"table-center"cell-class-name是el自带的参数 <el-table :data"tableData" style"width: 100%&…

Rhino网格如何转化成曲面?

的方法有多种&#xff0c;以下是一个常用的方法: 1.选择要转换的网格对象并右键单击: 2.选择“转换网格为曲面”选项; 3.在弹出的“转换网格为曲面”对话框中&#xff0c;选择要使用的参数并点击”确定” 另外&#xff0c;还可以通过Rhino的”ExtractWireframe"和“Ed…

理解QT信号和槽

进入QT官网&#xff0c;注册&#xff0c;创建账号&#xff0c;登录&#xff1b; 下载在线安装程序&#xff1b;10天试用版本&#xff1b;安装&#xff1b;完成后如下&#xff1b; 新建一个widgets项目&#xff0c;也就是桌面的窗口应用&#xff1b; 按向导新建完成项目&#x…

华为HCIA学习(一)

文章目录 一.根据考试题总结知识点&#xff08;一题一点&#xff09;二.上午学习三.下午学习四.今天只做了70题&#xff0c;需要的可以找我 一.根据考试题总结知识点&#xff08;一题一点&#xff09; 二.上午学习 ① VRP系统是VRP是华为公司从低端到高端的全系列路由器、交换…

iOS17正式版BUG汇总:无法正常拨打电话、小组件不可用、无线充电不可用等问题

今天凌晨 iOS 17 正式版发布&#xff0c;相信不少尝鲜派已经更新体验了iOS17的新功能了&#xff0c;但还有很多用户选择观望看是否要升级&#xff0c;小编汇总了目前已更新的用户反馈的已知BUG&#xff0c;供大家查看是否要更新iOS17正式版&#xff01; 目前已知BUG&#xff1…

基于dq0变换的三相并联有源电力滤波器模拟模型(Simulink)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Golang教程与Gin教程合集,入门到实战

GolangGin框架GormRbac微服务仿小米商城项目实战视频教程Docker Swarm K8s云原生分布式部署 介绍&#xff1a; Go即Golang&#xff0c;是Google公司2009年11月正式对外公开的一门编程语言&#xff0c;它不仅拥有静态编译语言的安全和高性能&#xff0c;而 且又达到了动态语言开…

【Linux学习】01Linux初识与安装

Linux&#xff08;B站黑马&#xff09;学习笔记 01Linux初识与安装 文章目录 Linux&#xff08;B站黑马&#xff09;学习笔记前言01Linux初识与安装操作系统简述Linux初识虚拟机介绍安装VMware Workstation虚拟化软件VMware中安装CentOS7 Linux操作系统下载CentOS操作系统VMwa…

基于YOLOv8模型的烟火目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的烟火目标检测系统可用于日常生活中检测与定位烟火目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法训练数据集…

八大排序(二)--------冒泡排序

本专栏内容为&#xff1a;八大排序汇总 通过本专栏的深入学习&#xff0c;你可以了解并掌握八大排序以及相关的排序算法。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;八大排序汇总 &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库…

分支和远程仓库

分支 查看分支 git branch -v 创建分支 git branch 分支名 切换分支 git checkout 分支名 合并分支 git merge 分支名 把指定的分支合并到当前分支上 查看当前所有远程地址别名&#xff1a; git remote -v 起别名&#xff1a; git remote add 别名 远程地址推送本地分支上的…

【Leetcode】141.环形链表

一、题目 1、题目描述 给你一个链表的头节点 head ,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达,则链表中存在环。 为了表示给定链表中的环,评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始)。 注意:po…

Vue.js和TypeScript:如何完美结合

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Middleware ❀ Hadoop功能与使用详解(HDFS+YARN)

文章目录 1、服务概述1.1 HDFS1.1.1 架构解析1.1.1.1 Block 数据块1.1.1.2 NameNode 名称节点1.1.1.3 Secondary NameNode 第二名称节点1.1.1.4 DataNode 数据节点1.1.1.5 Block Caching 块缓存1.1.1.6 HDFS Federation 联邦1.1.1.7 Rack Awareness 机架感知 1.1.2 读写操作与可…