微信小程序实现录音功能

本⽂实例为⼤家分享了微信⼩程序录⾳功能的具体代码，供⼤家参考，具体内容如下release.wxml

存储路径:{{item.filePath}} 存储时间:{{item.createTime}} ⾳频⼤⼩:{{item.size}}KB

按住 录⾳

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

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。