基于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 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
javascript中this的四种用法
May 11 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
了解重排与重绘
May 29 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
OpenLayers3实现地图显示功能
Sep 25 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
php curl 上传文件代码实例
2015/04/27 PHP
JS array 数组详解
2009/03/22 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python中字符串的格式化方法小结
2016/05/03 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
python自动识别文本编码格式代码
2019/12/26 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
你对IPv6了解程度
2016/02/09 面试题
事业单位公务员的职业生涯规划
2014/01/15 职场文书
致800米运动员广播稿
2014/02/16 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
退伍军人感言
2015/08/01 职场文书