基于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的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php制作动态随机验证码
2015/02/12 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
Node.js实现数据推送
2016/04/14 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Django密码存储策略分析
2020/01/09 Python
python实现横向拼接图片
2020/03/23 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python pip 常用命令汇总
2020/10/19 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
歌舞青春观后感
2015/06/10 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis