基于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键盘
May 02 Javascript
Prototype使用指南之selector.js说明
Oct 26 Javascript
JSON 数据格式介绍
Jan 13 Javascript
屏蔽script注入小例子
Nov 12 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
JS常见算法详解
Feb 28 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
js判断两个日期是否相等的方法
2013/09/10 Javascript
js读取cookie方法总结
2014/10/31 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
公司门卫管理制度
2014/02/01 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
《胡杨》教学反思
2014/02/16 职场文书
运动会稿件100字
2014/09/24 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
zabbix监控mysql的实例方法
2021/06/02 MySQL
你真的会用Mysql的explain吗
2022/03/31 MySQL
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL