ASR长语音识别，基于vue2

asr语音识别

前端负责语音识别有长语音识别和实时语音识别，有基于js和jquery做的简单demo，这里是vue+ js-audio-recorder。第三方插件给了丰富的功能，包括采样样本，采样率，声道，浏览器录音权限等。
`

录音上传

<div style="font-size: 14px"><h3>录音时长:{{ recorder && recorder.duration.toFixed(4) }}</h3><el-button type="primary" @click="handleStart">开始录音</el-button><el-button type="info" @click="handlePause">暂停录音</el-button><el-button type="success" @click="handleResume">继续录音</el-button><el-button type="warning" @click="handleStop">停止录音</el-button><h3>播放时长:{{recorder &&(playTime > recorder.duration? recorder.duration.toFixed(4): playTime.toFixed(4))}}</h3><br /><div class="bo"><el-button type="primary" @click="handlePlay">播放录音</el-button><el-button type="info" @click="handlePausePlay">暂停播放</el-button><el-button type="success" @click="handleResumePlay">继续播放</el-button><el-button type="warning" @click="handleStopPlay">停止播放</el-button><el-button type="error" @click="handleDestroy">销毁录音</el-button><el-button type="info" @click="downWAV">下载WAV</el-button><el-button type="info" @click="downPCM">下载pcm</el-button><el-button type="primary" @click="uploadRecord">上传</el-button><el-button type="success" @click="getResults">识别结果</el-button></div><br /><br /><textareaname=""id="textarea"style="width: 100%; height: 100px"cols="30"rows="10"v-model="result"/>
</div>

<script>
import Recorder from "js-audio-recorder";
//import MyRecorder from '../js/MyRecorder'
import { v4 as uuidv4 } from "uuid";
uuidv4();
//const baseURL = "http://10.34.23.133:8899/asr/non_real";export default {data() {return {recorder: null,playTime: 0,timer: null,src: null,sessionId: "",audio: "",data: "",result: "",};},created() {},mounted() {this.dataRecorder = this.data;},methods: {// 开始录音handleStart() {const uuid = require("uuid");this.sessionId = uuid.v4();console.log(this.sessionId);this.recorder = new Recorder({sampleBits: 16, // 采样位数，支持 8 或 16，默认是16sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000numChannels: 1, // 声道，支持 1 或 2， 默认是1// compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false});Recorder.getPermission().then(() => {console.log("开始录音");this.recorder.start(); // 开始录音},(error) => {this.$message({message: "请先允许该网页使用麦克风",type: "info",});console.log(`${error.name} : ${error.message}`);});},handlePause() {console.log("暂停录音");this.recorder.pause(); // 暂停录音},handleResume() {console.log("恢复录音");this.recorder.resume(); // 恢复录音},handleStop() {console.log("停止录音");this.recorder.stop(); // 停止录音},handlePlay() {console.log("播放录音");console.log(this.recorder);this.recorder.play(); // 播放录音// 播放时长this.timer = setInterval(() => {try {this.playTime = this.recorder.getPlayTime();} catch (error) {this.timer = null;}}, 100);},handlePausePlay() {console.log("暂停播放");this.recorder.pausePlay(); // 暂停播放// 播放时长this.playTime = this.recorder.getPlayTime();this.time = null;},handleResumePlay() {console.log("恢复播放");this.recorder.resumePlay(); // 恢复播放// 播放时长this.timer = setInterval(() => {try {this.playTime = this.recorder.getPlayTime();} catch (error) {this.timer = null;}}, 100);},handleStopPlay() {console.log("停止播放");this.recorder.stopPlay(); // 停止播放// 播放时长this.playTime = this.recorder.getPlayTime();this.timer = null;},handleDestroy() {console.log("销毁实例");this.recorder.destroy(); // 毁实例this.timer = null;},downWAV() {this.recorder.downloadWAV("下载wav");},downPCM() {this.recorder.downloadPCM("下载pcm");},uploadRecord() {if (this.recorder == null || this.recorder.duration === 0) {this.$message({message: "请先录音",type: "error",});return false;}this.recorder.pause(); // 暂停录音this.timer = null;console.log("上传录音"); // 上传录音const formData = new FormData();const blob = this.recorder.getWAVBlob(); // 获取wav格式音频数据console.log(blob);// 此处获取到blob对象后需要设置fileName满足当前项目上传需求，可直接传把blob作为file塞入formDataconst newbolb = new Blob([blob], { type: "audio/wav" });const fileOfBlob = new File([newbolb], new Date().getTime() + ".wav");console.log(fileOfBlob);formData.append("file", blob);console.log(formData);const url = window.URL.createObjectURL(fileOfBlob);this.src = url;console.log(url);this.$axios({url:'url?asrType=non_real&sessionId=' + this.sessionId ,//url: this.baseURL + '/putAudio?asrType=non_real&sessionId=' + this.sessionID,method: "post",headers: {"Content-Type": "multipart/form-data",},data: formData,}).then(function (res) {if (res.data == 200) {alert("上传完成可以识别");} else {alert("上传失败请重试");}});},//识别结果getResults() {console.log("识别结果");this.$axios({url:"url/asr/non_real/getResult",method: "get",params: {sessionId: this.sessionId,}}).then((response) => (this.result = response.data));},},
};
</script>

<style scoped>
.hea1 {line-height: 20px;
}
.bo {display: flex;justify-content: space-between;flex:1
}
</style>

ASR长语音识别，基于vue2相关推荐

OCR（文字识别）功能与ASR（语音识别）的java应用开发（基于百度智能云）
百度云官网: 百度智能云-智能时代基础设施百度智能云专注云计算.智能大数据.人工智能服务,提供稳定的云服务器.云主机.云存储.CDN.域名注册.物联网等云服务,支持API对接,快速备案等专业解决方案. ...
长语音识别体验_如何为语音体验写作
长语音识别体验重点 (Top highlight) "Voice User Interface (VUI) Designer" is an increasingly promin ...
Freeswitch之ASR（语音识别）总结大全
文章目录 1.使用Pocket Sphinx进行英文语音识别 2.PocketSphinx语音识别系统语言模型的训练和声学模型的改进 3.PocketSphinx语音识别系统的编译.安装和使用 4.F ...
百度免费开放长语音识别功能
近日,百度AI开放平台向开发者免费开放长语音识别功能,通过SDK调用服务,可将长语音转换为文字.据了解,新版本SDK解除了对时间的限制,开发者无需再将长语音切割成60秒以内的分段,进行调用,提升了转写 ...
【vue】基于vue2.x的vue项目最最最基础模板
前言好久不见啊大家,今天想写这篇博客的时候才发现博客已经断更大半年了(手动滑稽) 由于去年十二月份被公司再次发配到上海出差,而且这次主要开发的是针对IE浏览器的一个插件(c++ 和 js 的交互) ...
语音识别——基于深度学习的中文语音识别tutorial（代码实践）
文章目录利用thchs30为例建立一个语音识别系统 1. 特征提取 2. 数据处理下载数据 2.1 生成音频文件和标签文件列表定义函数`source_get`,获取音频文件及标注文件列表确认相 ...
NLP之ASR：语音识别技术(Automatic Speech Recognition)的简介、发展历史、案例应用之详细攻略
NLP之ASR:语音识别技术(Automatic Speech Recognition)的简介.发展历史.案例应用之详细攻略目录语音识别技术(Automatic Speech Recognitio ...
「Android」详细全面的基于vue2.0Weex接入过程（Android视角）
本文来自尚妆Android团队路飞发表于尚妆github博客,欢迎订阅! 一.说在前面的话目前weex已在尚妆旗下的达人店app上线了一个常用的订单管理页面,截止目前Android上未发现问题,渲 ...
基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...

ASR长语音识别，基于vue2

录音上传

ASR长语音识别，基于vue2相关推荐

最新文章

热门文章