小程序实现录音功能


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 相关文章推荐
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
jquery获取radio值实例
Oct 16 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
electron 安装,调试,打包的具体使用
Nov 06 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
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
laravel5.6实现数值转换
2019/10/23 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
vue的滚动条插件实现代码
2019/09/07 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
微信小程序实现购物车小功能
2020/12/30 Javascript
Python函数式编程指南(四):生成器详解
2015/06/24 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
英国著名书店:Foyles
2018/12/01 全球购物
恶搞卫生巾广告词
2014/03/18 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
会计工作能力自我评价
2015/03/05 职场文书
工作服管理制度范本
2015/08/06 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python