基于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 相关文章推荐
表单填写时用回车代替TAB的实现方法
Oct 09 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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
风格模板初级不完全修改教程
2006/10/09 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
Javascript Object.extend
2010/05/18 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python中有帮助函数吗
2020/06/19 Python
巴西网上药房:onofre
2016/11/21 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
四种会话跟踪技术
2015/05/20 面试题
超市营业员求职简历的自我评价
2013/10/17 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
村创先争优活动总结
2014/08/28 职场文书
逃课检讨书范文
2015/05/06 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers