基于JS开发微信网页录音功能的实例代码


Posted in Javascript onApril 30, 2019

具体代码如下所示:

wx.ready(function () {
    var startRecordflag = false
    var startTime = null

 //btnRecord 为录音按钮dom对象
    btnRecord.addEventListener('touchstart', function (event) {
      event.preventDefault();
      startTime = newDate().getTime();
      // 延时后录音,避免误操作
      recordTimer = setTimeout(function () {
        wx.startRecord({
          success: function () {
            var rainAllowRecord = sessionStorage.getItem("rainAllowRecord");//判断是否授权过允许使用录音功能
            if (!isEmpty(rainAllowRecord) && rainAllowRecord == "1") {
              //开始录音时的操作 如修改录音按钮样式等
            } else {
              //一般第一次时 都没有授权 弹出授权窗口后 无法终止录音过程 所以在这里设置rainAllowRecord 的值表示允许过录音 并且在第一次时主动停止录音
              sessionStorage.setItem("rainAllowRecord", "1");
              wx.stopRecord();
            }
            startRecordflag = true;
          },
          cancel: function () {
            startRecordflag = true;
            alert('用户拒绝授权录音');
          },
          complete: function () {
            startRecordflag = true;
          }
        });
      }, 300);
    });
    btnRecord.addEventListener('touchend', function (event) {
      event.preventDefault();
      // 间隔太短
      var timeDitance = newDate().getTime() - startTime;
      if (timeDitance < 300) {
        startTime = 0;
        // 不录音
        clearTimeout(recordTimer);
      } else {
        // 松手结束录音
        //startRecordflag 因为startRecord是个异步方法 防止没有进入startRecord 的回调就进入了这里
        var startRecordHandle = setInterval(function () {
          //startRecordflag为true 表示已经进入过startRecord的回调
          if (startRecordflag) {
            startRecordflag = false;
            clearInterval(startRecordHandle);
            wx.stopRecord({
              success: function (res) {
                voice.localId = res.localId;
                translateVoice();
              },
              fail: function (res) {
              }
            });
          }
        }, 0);
      }
    });
    wx.onVoiceRecordEnd({
      complete: function (res) {
        voice.localId = res.localId;
        alert('录音时间已超过一分钟');
      }
    });
    function translateVoice() {
      //调用微信的语音转文字接口
      wx.translateVoice({
        localId: voice.localId,
        isShowProgressTips: 0,
        complete: function (res) {
          if (res.hasOwnProperty('translateResult')) {
            alert('识别结果:' + res.translateResult);
          } else {
          }
        }
      });
    }
    function playVoice() {
      wx.playVoice({
        localId: voice.localId
      });
    }
  })

总结

以上所述是小编给大家介绍的基于JS开发微信网页录音功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 #Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 #Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 #Javascript
TypeScript开发Node.js程序的方法
Apr 30 #Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 #Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 #Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 #Javascript
You might like
PHP实现多条件查询实例代码
2010/07/17 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
vue计算属性和监听器实例解析
2018/05/10 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python使用贪婪算法解决问题
2019/10/22 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
Python实现GIF图倒放
2020/07/16 Python
python绘制高斯曲线
2021/02/19 Python
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
公司员工的自我评价范例
2013/11/01 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android