小程序实现录音功能


Posted in Javascript onSeptember 22, 2020

本文实例为大家分享了小程序实现录音功能的具体代码,供大家参考,具体内容如下

首先判断权限

getPermission: function() {
  var that = this;
    wx.getSetting({
     success(res) {
      console.log(res.authSetting)
      if (res.authSetting["scope.record"] === false) {
       wx.showModal({
        title: '是否录音',
        content: '是否录音',
        success: function (tip) {
         if (tip.confirm) {
          wx.openSetting({
           success: function (data) {
            if (data.authSetting["scope.record"] === true) {
             wx.showToast({
              title: '授权成功',
              icon: 'success',
              duration: 1000
             })
             that.startLuYin()
             //授权成功之后,再调用chooseLocation选择地方
            } else {
             wx.showToast({
              title: '授权失败',
              icon: 'success',
              duration: 1000
             })
            }
           }
          })
         }
        }
       })
      }else{
       that.startLuYin()
      }
     }
    })
 },

授权成功后开始录音

startLuYin(){
  const options = {
   duration: 10000 * 6 * 10, //指定录音的时长,单位 ms
   sampleRate: 16000, //采样率
   numberOfChannels: 1, //录音通道数
   encodeBitRate: 96000, //编码码率
   format: 'mp3', //音频格式,有效值 aac/mp3
   frameSize: 50, //指定帧大小,单位 KB
  }
  //开始录音
  recorderManager.start(options);
  recorderManager.onStart(() => {
   console.log('recorder start');
   Countdown(this); //开始计时
  });
  //错误回调
  recorderManager.onError((res) => {
   console.log('recorder出错:' + res);
   console.log(res);
   clearTimeout(timer); //出错时停止计时
  })
 },

暂停录音

// 暂停录音
 pause: function() {
  var that = this;
  recorderManager.pause()
  recorderManager.onPause((res) => {
   console.log(res)
   console.log('暂停录音')
   clearTimeout(timer);
  })
 },

继续录音

//继续录音
 jixu: function() {
  var that = this;
  recorderManager.resume()
  Countdown(that); //开始计时
  recorderManager.onResume((res) => {
  })
 },

停止录音

//停止录音
 stop: function() {
  recorderManager.stop();
  recorderManager.onStop((res) => {
   this.tempFilePath = res.tempFilePath;
   console.log('停止录音', res.tempFilePath)
   clearTimeout(timer);
  })
 },

播放声音

//播放声音
 play: function() {
  innerAudioContext.autoplay = true
  innerAudioContext.src = this.tempFilePath,
   innerAudioContext.onPlay(() => {
    console.log('开始播放')
   })
  innerAudioContext.onError((res) => {
   console.log(res.errMsg)
   console.log(res.errCode)
  })
 },
// 倒计时
function Countdown(that) {
 timer = setTimeout(function() {
  console.log("----secondes----" + formatSeconds(secondes));
  secondes++;
  if (secondes >= 600) {
   recorderManager.stop();
   clearTimeout(timer);
  }
  that.setData({
   times: formatSeconds(secondes)
  });
  Countdown(that);
 }, 1000);
};
// 时间展示
function formatSeconds(value) {
 var secondTime = parseInt(value); // 秒
 var minuteTime = 0; // 分
 var hourTime = 0; // 小时
 if (secondTime > 60) { //如果秒数大于60,将秒数转换成整数
  //获取分钟,除以60取整数,得到整数分钟
  minuteTime = parseInt(secondTime / 60);
  //获取秒数,秒数取佘,得到整数秒数
  secondTime = parseInt(secondTime % 60);
  //如果分钟大于60,将分钟转换成小时
  if (minuteTime > 60) {
   //获取小时,获取分钟除以60,得到整数小时
   hourTime = parseInt(minuteTime / 60);
   //获取小时后取佘的分,获取分钟除以60取佘的分
   minuteTime = parseInt(minuteTime % 60);
  }
 }
 var result;
 //时间的展示方式为00:00
 if (secondTime < 10) {
  result = "0" + parseInt(secondTime);
 } else {
  result = "" + parseInt(secondTime);
 }
 if (minuteTime > 0) {
  if (minuteTime < 10) {
   result = "0" + parseInt(minuteTime) + ":" + result;
  } else {
   result = "" + parseInt(minuteTime) + ":" + result;
  }
 } else {
  result = "00:" + result;
 }
 //由于限制时长最多为三分钟,小时用不到
 if (hourTime > 0) {
  result = "" + parseInt(hourTime) + ":" + result;
 }
 return result;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 #Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 #Javascript
JS实现无限轮播无倒退效果
Sep 21 #Javascript
js+canvas绘制图形验证码
Sep 21 #Javascript
vue中路由跳转不计入history的操作
Sep 21 #Javascript
JS实现放大镜效果
Sep 21 #Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 #Javascript
You might like
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
详解PHP PDO简单教程
2019/05/28 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python 2.7.14安装图文教程
2018/04/08 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
django中forms组件的使用与注意
2019/07/08 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
个人租房协议书
2014/04/09 职场文书
销售团队激励口号
2014/06/06 职场文书
委托书怎么写
2014/07/31 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
出国留学单位推荐信
2015/03/26 职场文书