当前位置: 首页 > news >正文

微信小程序--------语音识别(前端自己也能玩)

一、背景

作为一名前端同学有时候感觉挺可怜的,复杂的操作都依赖后端同学在服务器端完成。那么,有一天我们自己想玩一个新技术或者后端同学不搭理我们,怎么办?绝望中.....

二、小程序语音识别

 接到这个需求,我们明确两个问题:
  1. 小程序录音支持什么格式

由小程序文档可知:只支持 mp3格式和 aac格式
微信小程序录音文档
clipboard.png

  1. 科大讯飞平台需要什么格式的音频
    支持的格式 pacm或者wav, speex和 speex-web 格式
    科大讯飞语音听写api

clipboard.png

3. 目标 将小程序的录音转为 科大讯飞能识别的音频格式

  import Mp3 from '@/utils/js-mp3/decode'
  import { md5 } from '@/utils/md5.js'
  import pcm from 'pcm-util'
录音
    // 获取录音权限
    this.getRecordAuth()
    // 获取录音对象
    const that = this;
    this.recorderManager = wx.getRecorderManager()
    this.recorderManager.onStart(() => {
      console.log('recorder start')
    })
    // 录音的格式参数
     const options = {
      duration: 11000,
      sampleRate: 32000,
      numberOfChannels: 1,
      encodeBitRate: 64000,
      format: 'mp3',
      frameSize: 6
    }
    this.recorderManager.start(options)
    this.recorderManager.onStop(res => {
      const tempFilePath = res.tempFilePath
      that.duration = res.duration
      const fs = wx.getFileSystemManager()
      console.log('record stop')
      console.log(res)
      // 从临时文件中读取音频
      fs.readFile({
        filePath: tempFilePath,
        success (res) {
          console.log('read success')
          that.mp3ToPcm(res.data)
        },
        fail (e) {
          console.log('read fail')
          console.log(e)
        }
      })
    })


转格式
mp3ToPcm (mp3AB) {
    var that = this
    var decoder = Mp3.newDecoder(mp3AB)
    var pcmArrayBuffer = decoder.decode()
    // 和录音的格式一样
    const fromFormat = {
      channels: 1,
      sampleRate: 32000,
      interleaved: true,
      float: false,
      samplesPerFrame: 1152,
      signed: true
    }
    // 目标音频的格式
    const toFormat = {
      channels: 1,
      sampleRate: 16000,
      bitDepth: 8,
      interleaved: true,
      float: false,
      samplesPerFrame: 576,
      signed: true
    }
    var pcmAB = pcm.convert(pcmArrayBuffer, fromFormat, toFormat)
    const base64 = wx.arrayBufferToBase64(pcmAB)
    var millTime = (new Date().setMilliseconds(0) / 1000) + ''
    /** 调用科大讯飞平台的语音识别
        请求参数都是自己申请应用的参数
    */
    wx.request({
      url: 'http://api.xfyun.cn/v1/service/v1/iat',
      method: 'POST',
      data: {
        audio: base64
      },
      header: {
        'X-Appid': '5be4162d',    
        'X-CurTime': millTime,
        'X-Param': 'eyJlbmdpbmVfdHlwZSI6ICJzbXMxNmsiLCJhdWUiOiAicmF3In0=',
        'X-CheckSum': md5('b243cb9e1ea9d9eb40847967a8ebeef2' + millTime + 'eyJlbmdpbmVfdHlwZSI6ICJzbXMxNmsiLCJhdWUiOiAicmF3In0='),
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success (res) {
        console.log('turn success')
        console.log(res)
        console.log(res.data)
      },
      fail: function (res) {
        console.log('turn fail')
        console.log(res)
      }
    })
  }
},

注意:

  1. 首先在科大讯飞平台申应用申请应用
  2. 请求参数的文档语音识别的接口文档
  3. 录音一定在真机上测试,模拟器不行

js-mp3
pcm工具包

相关文章:

  • IoC组件Unity再续~根据类型字符串动态生产对象
  • Netty+SpringBoot+FastDFS+Html5实现聊天App(六)
  • 什么是API网关 如何设计亿万级统一网关
  • React的组件模式
  • passportjs 源码分析
  • Google Play 下架 App 之后的替身制作
  • 安卓应用性能调试和优化经验分享
  • Redis 懒删除(lazy free)简史
  • vue全家桶+Koa2开发笔记(8)--开发网页
  • Mycat - 实现数据库的读写分离与高可用
  • 理解 JavaScript 中的 this
  • 块级、内联、内联块级
  • Spring Boot 运作原理
  • 虚拟机网络不通故障解决
  • 原型模式深入探讨-【设计模式4】
  • 分享的文章《人生如棋》
  • axios请求、和返回数据拦截,统一请求报错提示_012
  • export和import的用法总结
  • Javascript设计模式学习之Observer(观察者)模式
  • JS基础篇--通过JS生成由字母与数字组合的随机字符串
  • k个最大的数及变种小结
  • Promise初体验
  • Python爬虫--- 1.3 BS4库的解析器
  • redis学习笔记(三):列表、集合、有序集合
  • swift基础之_对象 实例方法 对象方法。
  • vuex 笔记整理
  • Windows Containers 大冒险: 容器网络
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 记一次用 NodeJs 实现模拟登录的思路
  • 深度解析利用ES6进行Promise封装总结
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • # Panda3d 碰撞检测系统介绍
  • #define MODIFY_REG(REG, CLEARMASK, SETMASK)
  • #Z0458. 树的中心2
  • (2020)Java后端开发----(面试题和笔试题)
  • (BFS)hdoj2377-Bus Pass
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (每日持续更新)jdk api之FileFilter基础、应用、实战
  • (四)汇编语言——简单程序
  • .FileZilla的使用和主动模式被动模式介绍
  • .Net Attribute详解(上)-Attribute本质以及一个简单示例
  • .net 按比例显示图片的缩略图
  • .Net的C#语言取月份数值对应的MonthName值
  • .NET上SQLite的连接
  • [3D游戏开发实践] Cocos Cyberpunk 源码解读-高中低端机性能适配策略
  • [C#][DevPress]事件委托的使用
  • [C/C++]数据结构 栈和队列()
  • [CareerCup] 2.1 Remove Duplicates from Unsorted List 移除无序链表中的重复项
  • [ERROR] Plugin 'InnoDB' init function returned error
  • [Godot] 3D拾取
  • [HITCON 2017]SSRFme perl语言的 GET open file 造成rce
  • [IE技巧] IE 中打开Office文件的设置
  • [Invalid postback or callback argument]昨晚调试程序时出现的问题,MARK一下
  • [iOS]把16进制(#871f78)颜色转换UIColor
  • [iOS]中字体样式设置 API