uniapp实现语音识别

前言：本篇文章主要是调用录音将录音文件传递给后端进行识别

app,微信小程序实现录音功能

使用的api - uni.getRecorderManager()

uni.getRecorderManager() | uni-app官网

api在H5是并不兼容的

按钮

     <!--按钮--><view  class="bottom flex-column"><view class="tip flex-column">请按住说话</view><view class="btns flex-row"><view @touchstart="startSay" @touchend="endSay" class="button flex-column"><text class="iconfont icon-voice"></text></view></view></view>

创建初始化事件和监听录音成功

<script>
// #ifdef MP-WEIXIN
const recorderManager = uni.getRecorderManager();
// #endifexport default{data() {return {voicePath: '', //录音文件}}onLoad() {this.interValTime = 100let self = this;// #ifdef MP-WEIXINrecorderManager.onStop(function (res) {self.voicePath = res.tempFilePath;self.getData();});         // #endif},methods: {let token = uni.getStorageasync('token')uni.uploadFile({url: 'resume/voiceToText',name: 'file',filePath: this.voicePath,header: {'Authorization': `bearer ${token}`},success: (res) => {},fail: (err) => {}})}
</script>

开始录音和停止录音

           startSay() {// #ifdef MP-WEIXINrecorderManager.start();// #endif},

          endSay() { // #ifdef MP-WEIXINrecorderManager.stop();// #endif},

H5实现录音功能

uniapp的原生api是不支持h5的，因此h5要进行录音，需要借助插件

插件是通过的，不仅是unipp，其他项目依旧可以使用

npm install recorder-core

使用

   // #ifdef H5import Recorder from 'recorder-core'import 'recorder-core/src/engine/wav.js'// #endif

      data() {return {rec: null}},onLoad() {// #ifdef H5this.initRecords()// #endif},

          initRecords() {var rec = this.rec = Recorder({type: "wav",bitRate: 16,sampleRate: 32000,});rec.open(() => {}, () => {uni.showToast({title: '获取手机录音权限失败',icon: 'none'})});},

          startSay() {// #ifdef H5if (!this.rec) {return;}this.rec.start();// #endif},endSay() {// #ifdef H5if (!this.rec) {return;}this.rec.stop((blob, duration) => {const file = new File([blob], 'record.wav', {type: blob.type})this.voicePath = filethis.getData()})// #endif}

getData也是将文件上传给后端

uniapp实现语音识别相关推荐

uni-app 百度语音识别文字并展示功能
uni-app 使用百度语音识别文字功能本文主要写的是 uniapp实现语音输入并展示在页面上 , 纯前端 ,不涉及后端 1. 百度语音识别申请不啰嗦直接点击连接进去 , 进入后点击立即使用按钮 ...
uni-app微信小程序+Java实现百度语音识别
1.准备工作由于微信小程序和百度语音识别的记录博客少之又少,所以这篇博客就诞生了. 注册登录百度AI开放平台(http://ai.baidu.com/) 找到语音技术 - 应用列表,创建应用,填写相 ...
uni-app使用百度语音识别转文字
1. 准备注册登录百度AI开放平台(http://ai.baidu.com/) 找到语音技术 - 应用列表,创建应用,填写相应信息,语音包名选择不需要创建完成后,可以看到AppID.API Key ...
uniapp 使用 wechatSi 实现语音识别
1.登录微信小程序管理后台添加微信同声传译插件 2.uniapp [manifest.json] 中声明插件: 注:插件appId和插件版本号是固定的,在插件文档中可以获取到: 3.使用在需要用到同 ...
uniapp使用百度语音识别语音转文字
HBuilderX已支持讯飞语音识别和百度语音识别,这里讲下百度语音接入一:首先是百度语音识别申请这个步骤暂且省略,可以直接移步百度语音api页面自行申请,主要是为了获取语音权限以及AppID.A ...
uniapp配置百度语音识别转文字（含demo）
前言在dcloud社区已经给出了语音识别插件配置的步骤,点击前往:语音识别插件配置, 但是还是不够详细,有可能会遇到问题,所以我结合实例配置实现一下. 概述 HBuilderX已支持讯飞语音识别和百 ...
uniapp开发微信小程序实现语音识别，使用微信同声传译插件，
第一步:在微信小程序管理后台:"设置"->"第三方设置"->"插件管理"中添加插件. 但是这个地方,没有搜索到插件,就到微信服务 ...
uniapp语音识别（讯飞语音）转文字
☞ 常见应用: 游戏界面文字语音.商城导航栏的语音输入搜索框.聊天界面的语音文字输入等. 引自官方 unicloud官方语音: 语音输入接口可使得网页开发人员能快速调用设备的麦克风进行语音输入,而不 ...
uniapp开发微信小程序，使用微信同声传译插件，实现语音识别输入文本
第一步:现在微信小程序管理后台:"设置"->"第三方设置"->"插件管理"中添加插件. 但是这个地方,没有搜索到插件,就到微信服 ...
uniapp语音识别_uni-app开发APP语音播报功能
const audioTeam =[]; let audioStartSwitch= false;const getAudioUrl = 'https://tsn.baidu.com/text2aud ...

uniapp实现语音识别

app,微信小程序实现录音功能

H5实现录音功能

uniapp实现语音识别相关推荐

最新文章

热门文章