基于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 相关文章推荐
JavaScript入门之对象与JSON详解
Oct 21 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
20分钟打造属于你的Bootstrap站点
Jul 27 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
第二节 对象模型 [2]
2006/10/09 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
Prototype Object对象 学习
2009/07/12 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
jQuery中layer分页器的使用
2017/03/13 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
mint-ui在vue中的使用示例
2018/04/05 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
Python数据结构之单链表详解
2017/09/12 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python变量命名的7条建议
2019/07/04 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
animation和transition的区别
2020/10/12 HTML / CSS
关于母亲节的感言
2014/02/04 职场文书
简历的自我评价范文
2014/02/04 职场文书
幼教求职信
2014/03/12 职场文书
Python机器学习之逻辑回归
2021/05/11 Python