小程序实现录音功能


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 网页水印(非图片水印)实现代码
Mar 01 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
jquery密码强度校验
Dec 02 Javascript
javascript数组去重小结
Mar 07 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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
PHP4实际应用经验篇(5)
2006/10/09 PHP
相对路径转化成绝对路径
2007/04/10 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
深入密码加salt原理的分析
2013/06/06 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
JS画线(实例代码)
2013/11/20 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Python异常处理操作实例详解
2018/05/10 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python time库基本使用方法分析
2019/12/13 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
经理秘书岗位职责
2013/11/14 职场文书
外贸英语专业求职信范文
2013/12/25 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
授权委托书范文
2014/07/31 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
会计专业求职信范文
2015/03/19 职场文书