基于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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
ExtJS的FieldSet的column列布局
Nov 20 Javascript
JsDom 编程小结
Aug 09 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
js里面的变量范围分享
Jul 18 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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
基于mysql的bbs设计(四)
2006/10/09 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python Flask-web表单使用详解
2017/11/18 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python对象与引用的介绍
2019/01/24 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
python中时间模块的基本使用教程
2019/05/14 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
后勤采购员岗位职责
2013/12/19 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
委托函范文
2015/01/29 职场文书
大学生团员个人总结
2015/02/14 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers