小程序实现录音功能
⼩程序实现录⾳功能本⽂实例为⼤家分享了⼩程序录⾳功能的具体代码，供⼤家参考，具体内容如下release.wxml
<!--pages/index/release/release.wxml-->
<scroll-view>
<view wx:if="{{voices}}" class="common-list" >
<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">存储时间:{{ateTime}}</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 = pFilePath
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
})
//获取录⾳⾳频列表
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 = at(voice);
}
_this.setData({
voices: voices
})
}
})
},
fail: function (res) {
//录⾳失败
wx.showModal({
title: '提⽰',
content: '录⾳的姿势不对!',
showCancel: false,
success: function (res) {
if (firm) {
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);
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。