H5实现移动端语音录制功能

H5实现移动端语音录制功能作者:purewater2014,微信高清音频处理链接。

前言:

年前做了一期语音口令的年度活动,从语音录制、上传到智能检测,以及后续的语音播放组件,语音录制的实现的方式是基于微信的JSSDK,本篇主要把语音录制板块整理了一下,供大家参考;

下一篇-音频组件

各位看官先上眼:

H5实现移动端语音录制功能

功能梳理:

视图层
  • 定义动态效果状态标识
    区分几种录制状态
    isAudioState: 0 // 0 未录制or检测完毕 1 录制中 2 检测中
    :未录制or检测完毕     / 0 无动效
    :录制中               / 1 波浪纹
    :检测中               / 2 环形检测
    
  • 设置动态效果切换状态
    通过监听touchstart/touchend事件去切换动态效果
    
逻辑层
 录制、上传、检测功能
 时间限制(时间区间)、内容为空的兼容处理
  • touchstart事件中做了哪些事
    1.开启录音
    2.切换录音中状态
    3.开始计时,用于记录音频时长
    
  • touchend事件中做了哪些事
    1.停止录音
    2.智能检测
    3.控制录音时长
    4.上传音频
    5.切换录音结束状态(是否开始检测)
    
USE API(JS-SDK)
 开始录制 startRecord
 停止录制 stopRecord
 智能检测 translateVoice (将语音转文字)
 上传音频 uploadVoice (将录制的临时音频文件上传至微信服务,供服务)

这里就不赘述了,可以去猫一眼微信的官方文档 点击前往

代码层:

 注:所有逻辑均在此组件,父级组件引入即可
 
<template>
 <div>
   <div class="audio-img" @touchstart="audioStart" @touchend="audioEnd">
       <!-- 未录制 -->
       <img src="data:image/png;base64,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" alt="">
      <!-- 录制中 -->
       <div class="wave-wrap" v-show="isAudioState === 1">
         <div class="wave wave-1"></div>
         <div class="wave wave-2"></div>
         <div class="wave wave-3"></div>
       </div>
       <!-- 校验中 -->
       <div class="roate-wrap" v-show="isAudioState === 2">
         <img src="data:image/png;base64,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" alt="">
       </div>
      </div>
      <!-- 状态 -->
     <div class="audio-text">{{isAudioState === 0 ? '长按开始' : isAudioState === 1 ? '录制中...' : '识别中...'}}</div>
 </div>
</template>

<script> let vm = null import _wx from '../../../static/wx.js' // JS-SDK require('es6-promise').polyfill() export default { data () { return { isAudioState: 0, // 0 未录制or检测完毕 1 录制中 2 检测中 secondNum: 0 // 音频时长 } }, filters: { }, created: function () { vm = this }, methods: { audioStart (e) { // 开始录制 e.preventDefault() // 解决touch时触发下拉 松开后无法touchend的情况 _wx.startRecord() this.count_time() this.isAudioState = 1 }, audioEnd () { // 结束录制 vm.isAudioState = 0 clearInterval(this.setIvWrap) vm.isAudioState = 2 // 方便本地观测 动态 测试通过后注释即可 var params = { async success (res) { this.limit_time() // 时间限制 vm.isAudioState = 2 // 实际检测动效 const testdata = await vm.check_text(res) if (!testdata.translateResult) { // 未检测语音 console.log('人家没听明白你说啥,再读一下') return } _wx.uploadVoice({ localId: res.localId, isShowProgressTips: 0, success (updata) { console.log('上传成功') } }) } } _wx.stopRecord(params) }, check_text (res) { // 智能校验 return new Promise((resolve, reject) => { _wx.translateVoice({ localId: res.localId, isShowProgressTips: 0, success (testdata) { resolve(testdata) } }) }) }, count_time () { // 计算音频时长 clearInterval(this.setIvWrap) this.secondNum = 0 this.setIvWrap = setInterval(() => { this.secondNum ++ if (this.secondNum >= 15) { this.audioEnd() } }, 1000) }, limit_time () { // 音频时长限制 if (vm.secondNum >= 15 || vm.secondNum <= 3) { console.log(vm.secondNum ? '最多录制15s' : '录制时长不得小于3s') return } } }, mounted () { }, components: { } } </script>

<style lang="scss"> img{ pointer-events: none; } // 取消某些浏览器的默认事件 .audio-img{ width: 1.4rem; height: 1.4rem; margin: 0 auto; position: relative; img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .mark-image{ position: absolute; left: 0; top: 0; width: 100%;height: 100%; z-index: 1; } .wave-wrap{ position: absolute; left: 0; top: 0; width: 100%;height: 100%; z-index: 0; .wave{ position: absolute; left: 1%; top: 1%; width: 98%; height: 98%; border-radius: 50%; z-index: 1; } .wave-1{ background: #d6382f; animation: scale-wave1 2s linear infinite; } .wave-2{ background: #e37f6a; animation: scale-wave2 2s linear infinite; } .wave-3{ background: #e37f6a; animation: scale-wave2 2s 1s linear infinite; } } .roate-wrap{ position: absolute; left: -0.21rem; top: -0.21rem; width: 100%; height: 100%; padding: 0.25rem; z-index: 0; animation: roate-test 2s linear infinite; -webkit-animation: roate-test 2s linear infinite; } } .audio-text{ margin-top: 0.3rem; color: #fff; text-align: center; } @keyframes scale-wave1 { 0%{ opacity: 1; transform: scale(1) } 100%{ transform: scale(1.35); opacity: 0; } } @keyframes scale-wave2 { 0%{ opacity: 1; transform: scale(1) } 100%{ opacity: 0; transform: scale(1.9) } } @keyframes roate-test { 0%{ transform: rotate(0); } 100%{ transform: rotate(360deg); } } </style>

注意事项:

  • 上述逻辑中均为同步操作,以应对服务端异步获取当次录音的音频文件(目的在于需确报本次音频上传成功后再与服务端交互);
  • 微信音频格式为speex,需转格;
  • 部分浏览器存在touch img呈现预览模式的解决方案,img{ pointer-events: none; };
  • audioStart时,部分浏览器存在用户同时触发下拉动作后松手无法touchend的情况,需preventDefault操作;
  • 米8在触发上传、检测api时,会造成检测动画的卡顿,(其他机型没问题),初步怀疑是线程阻塞,有兴趣的可以一块研究一下~(方案:动画轨迹被阻塞/dom渲染被打断(gif),所以回调后,可以使用时间戳的方式重新绘制图片;其他类似场景也可以使用这种方案,当然针对性场景,具体情况还要重新定义~)

服务端针对微信speek格式音频优化

针对微信的speex高清音频格式,服务端的小可爱做了以下处理; 处理音频为前端可识别格式wav,并转格为mp3,并再次压缩;友好前端格式、提高的效率的同时又极大的节约了成本;有兴趣的同学可以去看一下, 作者:purewater2014,微信高清音频处理链接

结语:

本篇简要概述了H5语音的录制模块,下一篇说一下本次活动中,类微信语音列表的render方式组件的实现;感谢,不当之处欢迎指正交流~

今天的文章H5实现移动端语音录制功能分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/22247.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注