基于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 相关文章推荐
农历与西历对照
Sep 06 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
vue中v-show和v-if的异同及v-show用法
Jun 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
论坛头像随机变换代码
2006/10/09 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
thinkPHP5.0框架开发规范简介
2017/03/25 PHP
Bootstrap每天必学之基础排版
2015/11/20 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
python实现dict版图遍历示例
2014/02/19 Python
python的类方法和静态方法
2014/12/13 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python实现双色球随机选号
2020/01/01 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
环境工程大学生个人的自我评价
2013/10/08 职场文书
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
创意活动策划书
2014/01/15 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js