- Welcome to Journal web site.
- 开发无止境 -
Data: 2019-08-10 10:50:28Form: JournalClick: 13
最近被小程序的录音->播放坑惨了，赶紧总结下，希望对正在做录音事件的小伙伴们有帮助
//开始录音
startRecord:function(){
var that = this;
const recorderManager = wx.getRecorderManager()
const options = {
duration: 6000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3',
frameSize: 2048
}
wx.setStorageSync('hasRecord', "1");
//修改状态为录音中...
that.setData({
status: 2,
recordingShow: "block",
statusShow: "none",
startSrc: app.globalData.url + "ear.png",
})
//录音开始
recorderManager.start(options);
setTimeout(function () {
console.log("6秒后进入自动停止录音");
wx.showLoading({
title: '评分中',
})
that.setData({
showCover: "block",
})
recorderManager.stop();
//获取录音文件
recorderManager.onStop((res) => {
const tempFilePath = res
console.log(res);
that.setData({
recordFile: res.tempFilePath
})
//**重点重点**：录音完成后直接创建 播放 this.***为全局变量，可以在其他方法中调用
this.innerAudioContext = wx.createInnerAudioContext()
this.innerAudioContext.src = that.data.recordFile;
})
recorderManager.onError((res)=>{
console.log("录音错误");
wx.showToast({
title: '评分超时',
image: app.globalData.wrongSrc,
duration: 2000
})
that.setData({
showCover: "none",
})
})
recorderManager.onFrameRecorded((res) => {
console.log(res);
const { frameBuffer } = res
// console.log('frameBuffer.byteLength', frameBuffer.byteLength)
// console.log('frameBuffer', frameBuffer)
that.setData({
recordData: frameBuffer
})
})
}.bind(this), 6000)
},
//开始播放录音
startListen2: function () {
var that = this;
console.log(that.data.recordFile);
if (!that.data.recordFile){
wx.showToast({
title: '播放错误',
image: app.globalData.wrongSrc,
duration: 2000
})
return;
}
//this.data.bindAnimation2Status 0为要播放 1为要停止
if (this.data.bindAnimation2Status == 0) {
console.log('切换到播放1')
this.setData({
bindAnimation2Status: 1
})
console.log(this.innerAudioContext);
// this.innerAudioContext.autoplay = true;用它播放iphone播放不了，不支持，安卓可以播放
this.innerAudioContext.play();//兼容起见用它
this.innerAudioContext.onPlay(() => {
console.log("播放");
})
} else {
console.log('切换到停止1')
this.setData({
bindAnimation2Status: 0
})
this.innerAudioContext.pause();
this.innerAudioContext.onPause(() => {
console.log("暂停");
})
return;
}
//自然结束后
this.innerAudioContext.onEnded(() => {
console.log('结束');
that.audioEnd2();
return;
})
this.innerAudioContext.onError((res) => {
console.log('播放错误')
console.log(res.errMsg)
console.log(res.errCode)
wx.showToast({
title: '播放错误',
image: app.globalData.wrongSrc,
duration: 2000
})
return;
//下面为播放按钮的动态效果，有需要的小伙伴可以直接调用
var animation2_1 = wx.createAnimation({
duration: 1000,
timingFunction: 'linear',
delay: 5
})
var animation2_2 = wx.createAnimation({
duration: 1000,
timingFunction: 'linear',
delay: 5
})
animation2_1.opacity(0.2).opacity(0.5).opacity(1).step()
animation2_2.opacity(1).opacity(0.5).opacity(0.2).step()
this.setData({
animationData2_1: animation2_1.export(),
animationData2_2: animation2_2.export(),
animationStatus: 1,
})
// 循环========
var listen = setInterval(function () {
if (this.data.bindAnimation2Status == 0) {
console.log("tz")
clearInterval(listen);
animation2_1.opacity(1).step()
animation2_2.opacity(1).step()
this.setData({
animationData2_1: animation2_1.export(),
animationData2_2: animation2_2.export(),
})
} else {
console.log("jixu");
if (this.data.animationStatus == 1) {
animation2_1.opacity(1).opacity(0.5).opacity(0.2).opacity(0).step()
animation2_2.opacity(0.2).opacity(0.5).opacity(1).step();
this.setData({
animationData2_1: animation2_1.export(),
animationData2_2: animation2_2.export(),
animationStatus: 2,
})
} else {
animation2_1.opacity(0.2).opacity(0.5).opacity(1).step();
animation2_2.opacity(1).opacity(0.5).opacity(0.2).step()
this.setData({
animationData2_1: animation2_1.export(),
animationData2_2: animation2_2.export(),
animationStatus: 1,
})
}
}
}.bind(this), 1000);
},
