基于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 相关文章推荐
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
基于vue2.0动态组件及render详解
Mar 17 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
JavaScript实现五子棋小游戏
Oct 26 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定时计划任务的实现方法详解
2013/06/06 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
Python根据区号生成手机号码的方法
2015/07/08 Python
pandas带有重复索引操作方法
2018/06/08 Python
django 基于中间件实现限制ip频繁访问过程详解
2019/07/30 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
详解Python 中的容器 collections
2020/08/17 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
.NET面试10题
2014/02/24 面试题
军校本科大学生自我评价
2014/01/14 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2014年标准化工作总结
2014/12/17 职场文书
食品安全责任书范本
2015/05/09 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
golang中的空slice案例
2021/04/27 Golang
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
python区块链持久化和命令行接口实现简版
2022/05/25 Python