微信小程序实现录音功能


Posted in Javascript onNovember 22, 2019

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

release.wxml

<!--pages/index/release/release.wxml-->
<scroll-view>
 <view wx:if="{{voices}}" class="common-list" style="margin-bottom:120rpx;">
 <block wx:for="{{voices}}">
  <view class="board">
  <view class="cell">
   <view class="cell-bd" data-key="{{item.filePath}}" bindtap="gotoPlay">
   <view class="date">存储路径:{{item.filePath}}</view>
   <view class="date">存储时间:{{item.createTime}}</view>
   <view class="date">音频大小:{{item.size}}KB</view>
   </view>
 
  </view>
  </view>
 </block>
 </view>
</scroll-view>
 
<view wx:if="{{isSpeaking}}" class="microphone">
 <image class="sound-style" src="/images/speak.png"></image>
 <image wx:if="{{j==2}}" class="sound-style" src="/images/speak.png"></image>
 <image wx:if="{{j==3}}" class="sound-style" src="/images/speak.png"></image>
 <image wx:if="{{j==4}}" class="sound-style" src="/images/speak.png"></image>
 <image wx:if="{{j==5}}" class="sound-style" src="/images/speak_end.png"></image>
</view>
<view class="record-style">
 <button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 录音</button>
</view>

release.wxss

/* pages/index/release/release.wxss */
.microphone{ 
 position:fixed;
 left: 250rpx;
 bottom: 0;
 height: 240rpx; 
 width: 240rpx; 
 border-radius: 20rpx; 
 margin: 50% auto; 
 background: #26A5FF; 
} 
.item-style{ 
 margin-top: 30rpx; 
 margin-bottom: 30rpx; 
} 
.text-style{ 
 text-align: center; 
 
} 
.record-style{ 
 position: fixed; 
 bottom: 0; 
 left: 0; 
 height: 120rpx; 
 width: 100%; 
} 
.btn-style{ 
 margin-left: 30rpx; 
 margin-right: 30rpx; 
} 
 
.sound-style{ 
 position: absolute; 
 width: 74rpx; 
 height:150rpx; 
 margin-top: 45rpx; 
 margin-left: 83rpx; 
} 
 
 
.board { 
 overflow: hidden; 
 border-bottom: 2rpx solid #26A5FF; 
} 
/*列布局*/ 
.cell{ 
 display: flex; 
 margin: 20rpx; 
} 
.cell-hd{ 
 margin-left: 10rpx; 
 color: #885A38; 
} 
.cell .cell-bd{ 
 flex:1; 
 position: relative; 
  
} 
/**只显示一行*/ 
.date{ 
 font-size: 30rpx; 
 text-overflow: ellipsis; 
 white-space:nowrap; 
 overflow:hidden; 
}

release.js

// pages/index/release/release.js
var app = getApp()
Page({
 data: {
 j: 1,//帧动画初始图片 
 isSpeaking: false,//是否正在说话 
 voices: [],//音频数组 
 },
 onLoad: function () {
 },
 //手指按下 
 touchdown: function () {
 console.log("手指按下了...")
 console.log("new date : " + new Date)
 var _this = this;
 speaking.call(this);
 this.setData({
  isSpeaking: true
 })
 //开始录音 
 wx.startRecord({
  success: function (res) {
  //临时路径,下次进入小程序时无法正常使用 
  var tempFilePath = res.tempFilePath
  console.log("tempFilePath: " + tempFilePath)
  //持久保存 
  wx.saveFile({
   tempFilePath: tempFilePath,
   success: function (res) {
   //持久路径 
   //本地文件存储的大小限制为 100M 
   var savedFilePath = res.savedFilePath
   console.log("savedFilePath: " + savedFilePath)
   }
  })
  wx.showToast({
   title: '恭喜!录音成功',
   icon: 'success',
   duration: 1000
  })
  //获取录音音频列表 
  wx.getSavedFileList({
   success: function (res) {
   var voices = [];
   for (var i = 0; i < res.fileList.length; i++) {
    //格式化时间 
    var createTime = new Date(res.fileList[i].createTime)
    //将音频大小B转为KB 
    var size = (res.fileList[i].size / 1024).toFixed(2);
    var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size };
    console.log("文件路径: " + res.fileList[i].filePath)
    console.log("文件时间: " + createTime)
    console.log("文件大小: " + size)
    voices = voices.concat(voice);
   }
   _this.setData({
    voices: voices
   })
   }
  })
  },
  fail: function (res) {
  //录音失败 
  wx.showModal({
   title: '提示',
   content: '录音的姿势不对!',
   showCancel: false,
   success: function (res) {
   if (res.confirm) {
    console.log('用户点击确定')
    return
   }
   }
  })
  }
 })
 },
 //手指抬起 
 touchup: function () {
 console.log("手指抬起了...")
 this.setData({
  isSpeaking: false,
 })
 clearInterval(this.timer)
 wx.stopRecord()
 },
 //点击播放录音 
 gotoPlay: function (e) {
 var filePath = e.currentTarget.dataset.key;
 //点击开始播放 
 wx.showToast({
  title: '开始播放',
  icon: 'success',
  duration: 1000
 })
 wx.playVoice({
  filePath: filePath,
  success: function () {
  wx.showToast({
   title: '播放结束',
   icon: 'success',
   duration: 1000
  })
  }
 })
 }
})
//麦克风帧动画 
function speaking() {
 var _this = this;
 //话筒帧动画 
 var i = 1;
 this.timer = setInterval(function () {
 i++;
 i = i % 5;
 _this.setData({
  j: i
 })
 }, 200);
}

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

Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
JS模拟多线程
Feb 07 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
jquery实现下载图片功能
Jul 18 jQuery
小程序实现按下录音松开识别语音
Nov 22 #Javascript
小程序采集录音并上传到后台
Nov 22 #Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 #Javascript
小程序实现录音上传功能
Nov 22 #Javascript
vue使用recorder.js实现录音功能
Nov 22 #Javascript
微信小程序开发摇一摇功能
Nov 22 #Javascript
js实现录音上传功能
Nov 22 #Javascript
You might like
坏狼php学习 计数器实例代码
2008/06/15 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python装饰器常见使用方法分析
2019/06/26 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
法院先进个人事迹材料
2014/05/04 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
通报表扬范文
2015/01/17 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技