微信小程序实现录音功能

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

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

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);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。