上传声音 微信小程序_微信小程序实现录制、试听、上传音频功能（带波形图）...

最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是getBackgroundAudioManager,声音录制和播放波形图是用css实现的，效果图及详细设计代码如下：

xml文件

录制提示

00:00:{ {currentTime}}

开始

录好了

试听

上传

上传中

重新录制

js文件

let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度

let screenWidth = wx.getSystemInfoSync().screenWidth

let screenHeight = wx.getSystemInfoSync().screenHeight

let contentHeight = ((windowHeight / screenWidth) * 750 - 184 - 166) + "rpx";

const recorderManager = wx.getRecorderManager()

const backgroundAudioManager = wx.getBackgroundAudioManager()

Page({

/**

* 页面的初始数据

*/

data: {

startClick:false,

contentHeight: contentHeight,

voiceState:false,

tempFilePath:'',

recordingTimeqwe:0,//录音计时

setInter:"",//录音名称

isplay:true, //播放状态 true--播放中 false--暂停播放

uploadState:false,

showhandle1:true,

showhandle2:false,

showWaveView:false,

currentLeft:10,

currentTime:'00'

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

this.initRecord()

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

initRecord:function(){

recorderManager.onStart(() => {

console.log('开始录音')

})

recorderManager.onPause(() => {

console.log('暂停录音')

})

recorderManager.onStop((res) => {

clearInterval(this.data.setInter);

this.setData({voiceState:true,currentLeft:10})

console.log('结束录音', res)

const { tempFilePath } = res

this.data.tempFilePath = tempFilePath

})

recorderManager.onFrameRecorded((res) => {

const { frameBuffer } = res

console.log('frameBuffer.byteLength', frameBuffer.byteLength)

})

},

recordingTimer:function(){

var that = this;

//将计时器赋值给setInter

this.data.setInter = setInterval(

function () {

let time = that.data.recordingTimeqwe + 1;

if(time>10){

wx.showToast({

title: '录音时长最多10s',

duration:1500,

mask:true

})

clearInterval(that.data.setInter);

that.shutRecord();

return;

}

// console.l