基于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 相关文章推荐
jQuery技巧总结
Jan 01 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 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 Javascript
php下使用SMTP发邮件的代码
2008/01/10 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
在Echarts图中给坐标轴加一个标识线markLine
2020/07/20 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Python reques接口测试框架实现代码
2020/07/28 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Golang获取List列表元素的四种方式
2022/04/20 Golang