微信小程序实现录音功能


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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
小程序实现按下录音松开识别语音
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 SQL Injection with MySQL
2011/02/27 PHP
PHP仿盗链代码
2012/06/03 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
document.all与WEB标准
2020/05/13 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
python实现按任意键继续执行程序
2016/12/30 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
Europcar比利时:租车
2019/08/26 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
暑假安全保证书
2015/02/28 职场文书
党员承诺书范文2015
2015/04/27 职场文书
刑事起诉书范文
2015/05/19 职场文书
文化大革命观后感
2015/06/17 职场文书