小程序实现录音功能


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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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获取从html表单传递数组的方法
2015/03/20 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python僵尸进程产生的原因
2017/07/21 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
Java的基础面试题附答案
2016/01/10 面试题
教师自荐信
2013/12/10 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
小学科学教学反思
2014/01/26 职场文书
销售内勤岗位职责
2015/02/10 职场文书
司机个人年终总结
2015/03/03 职场文书
python可视化之颜色映射详解
2021/09/15 Python
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android