最近在做小程序,需求有上传录音,并且上传多条音频成功后,可以播放,暂停。刚开始接到时,感觉头都大了。但是还好小程序文档的api也很全面
1.上传功能
<view bindtouchstart='sayVideo' bindtouchend="sayVideoEnd">按住说话</view >
2.用触控事件,来监听按住说话。松开发送。首先要获取全局唯一的录音管理器 RecorderManager。参考文档
(https://developers.weixin.qq.com/miniprogram/dev/api/RecorderManager.html)
const recorderManager = wx.getRecorderManager();
//监听事件 按住说话
sayVideo: function(e) {
//按住说话
sayVideo: function(e) {
var that = this;
const options = {
duration: 60000,
sampleRate: 16000,
numberOfChannels: 1,
encodeBitRate: 96000,
format: 'mp3',
frameSize: 50
};
if (this.data.status != 2) {
//没有授权
wx.authorize({
scope: 'scope.record',
success() {
console.log("录音授权成功");
//第一次成功授权后 状态切换为2
that.setData({
status: 2,
})
},
fail() {
wx.openSetting({
success: (res) => {
console.log(res.authSetting);
if (!res.authSetting['scope.record']) {
//未设置录音授权
console.log("未设置录音授权");
wx.showModal({
title: '提示',
content: '您未授权录音,功能将无法使用',
showCancel: false,
success: function(res) {},
});
} else {
//第二次才成功授权
console.log("设置录音授权成功");
that.setData({
status: 2,
})
recorderManager.start(options);
}
},
fail: function() {
console.log("授权设置录音失败");
}
})
}
});
}else{
recorderManager.start(options);
}
}
3.松开上传
//松开
sayVideoEnd: function (e) {
var that= this;
recorderManager.stop(); //先停止录音
recorderManager.onStop((res) => { //监听录音停止的事件
if (res.duration < 1000) {
api.showToast('录音时间太短');
return;
} else {
wx.showLoading({
title: '发送中...',
});
var tempFilePath = res.tempFilePath; // 文件临时路径
var temp = tempFilePath.replace('.mp3', '') //转换格式 默认silk后缀
wx.uploadFile({
url: '*****', //上传服务器的地址
filePath: tempFilePath, //临时路径
name: 'file',
header: {
contentType: "multipart/form-data", //按需求增加
},
formData: null,
success: function (res) {
wx.hideLoading();
},
fail:function(err){
wx.hideLoading();
console.log(err.errMsg);//上传失败
}
});
}
});
},
4.获取上传成功后音频数据进行播放,暂停。/需全局 创建内部 audio
上下文 [InnerAudioContext
],参考文档
(https://developers.weixin.qq.com/miniprogram/dev/api/InnerAudioContext.html)
const recorderManager = wx.getRecorderManager();
//播放 或是暂停语音
playAudio: function (e) {
// 因全局已经 注册过上下文 直接用innerAudioContext就可以
// 在wxml中 需要传 data-item="{{item}}" 循环出来的当前信息
let item = e.currentTarget.dataset.item;
//音频地址
innerAudioContext.src = item.AudioSrc;
//在ios下静音时播放没有声音,默认为true,改为false就好了。
innerAudioContext.obeyMuteSwitch = false;
if (item.isPlay === false) {
//点击播放
innerAudioContext.play();
} else {
//点击暂停
innerAudioContext.stop();
};
// //播放结束
innerAudioContext.onEnded(() => {
innerAudioContext.stop();
});
},
以上就是上传,播放,暂停功能。还有很多细节,就要根据自己的需求来改写了。希望可以帮助到你们,也欢迎大家前来指点!