基于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常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 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下封装较好的数字分页方法
2010/11/23 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
vue.js中created方法作用
2018/03/30 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
入学申请自荐信范文
2014/02/26 职场文书
高三毕业寄语
2014/04/10 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
化工工艺设计求职信
2014/06/25 职场文书
关于安全的广播稿
2014/10/23 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis