基于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 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
JS实现随机抽取三人
Nov 06 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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中的函数嵌套层数限制分析
2011/06/13 PHP
分享php分页的功能模块
2015/06/16 PHP
yii用户注册表单验证实例
2015/12/26 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
python动态网页批量爬取
2016/02/14 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
敏捷开发的主要原则都有哪些
2015/04/26 面试题
文员岗位职责
2013/11/09 职场文书
男方父母证婚词
2014/01/12 职场文书
董事长秘书职责
2014/01/31 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
python for循环赋值问题
2021/06/03 Python
Django路由层如何获取正确的url
2021/07/15 Python