基于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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
vue实现图片按比例缩放问题操作
Aug 11 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
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 file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
php文件包含的几种方式总结
2019/09/19 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
python之mock模块基本使用方法详解
2019/06/27 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
精通CAD能手自荐书
2014/01/31 职场文书
关于安全的演讲稿
2014/05/09 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
致青春观后感
2015/06/09 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
节水宣传标语口号
2015/12/26 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS