这篇“小程序聊天室功能怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“小程序聊天室功能怎么实现”文章吧。
首先在头部定义 ...
1.index.js 使用的是微信自带的api,首先在头部定义一个 const recorderManager = wx.getRecorderManager()//获取全局唯一的录音管理器const createInnerAudioContext = wx.createInnerAudioContext()//由于使用的是wx.getRecorderManager录音,所以在播放录音的时候需要使用此api播放录音 // 需要用户同意授权录音 方法
_checkRecordAuth(cbOk, cbError) {
wx.getSetting({
success: (res) => { if (!res.authSetting['scope.record']) {
wx.authorize({
scope: 'scope.record',
success: (res) => { // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问
console.log('同意', res);
}, fail: res => { console.log('拒绝', res);
cbError && cbError();
}
})
} else {
cbOk && cbOk();
}
}
})
}, // 长按
_longClickVoicebtn(e) { var that = this;
that._checkRecordAuth( () => { //调出取消弹窗
that.setData({
text: '松开 发送',
isShowVoice1: true,
singleVoiceTimeCount: 0,
duration: "00:00",
is_clock: true,//长按时应设置为true,为可发送状态
startPoint: e.touches[0],//记录触摸点的坐标信息
}); //开始录音
recorderManager.start(options);
recorderManager.onStart(()=>{ let date = new Date(); let s = date.getTime();//注意:使用的是当前的时间戳 - 时长
console.log(s); //记录时长
that.data.timer = setInterval(() => { let voiceTimeCount = (new Date()).getTime() - s
voiceTimeCount = voiceTimeCount/1000
that.setData({
duration: formatSecond(voiceTimeCount),
singleVoiceTimeCount: voiceTimeCount
})
}, 100);
})
}, (res) => { //录音失败
console.error('录音拒绝授权');
clearInterval(this.data.timer); this._endRecord();
wx.showModal({
title: '您未授权语音功能',
content: '暂时不能使用语音',
confirmText: '去设置',
success: res => { if (res.confirm) {
wx.openSetting({
success: res => { if (res.authSetting['scope.record']) {
}
}
});
} else {
}
}
});
});
},// 移动 如果移动到tabar上面了,就显示 松开手指,取消发送
_sendVoiceMoveEvent(e) { //计算距离,当滑动的垂直距离大于 tabBarHeight 时,则取消发送语音
if (Math.abs(e.touches[0].clientY - this.data.startPoint.clientY) > this.data.tabBarHeight) { this.setData({
is_clock: false,//设置为不发送语音
isShowVoice2: true,
isShowVoice1: false,
cance: 1, //已取消
})
} else { this.setData({
is_clock: true,//设置为不发送语音
isShowVoice2: false,
isShowVoice1: true,
cance: 0, //不取消
});
}
}, // 松开div 录音结束
_sendVoiceMoveEndEvent(e) { console.log('松开div 录音结束') var that = this
clearInterval(this.data.timer);
that.setData({
text: '按住 说话',
isShowVoice1: false,
isShowVoice2: false,
singleVoiceTimeCount: 0,
duration: "00:00"
});
recorderManager.stop()//结束录音
//对停止录音进行监控
recorderManager.onStop((res) => {
//此时先判断是否需要发送录音
if (that.data.is_clock == true) { console.log('发送语音') //对录音时长进行判断,少于2s的不进行发送,并做出提示
if (res.duration < 1000) {
that.showToast("录音时间太短,请长按录音");
} else { //进行语音发送
const { tempFilePath, duration, fileSize } = res;
wx.showLoading({
title: '上传中...',
mask: true
})
uploadFile(tempFilePath).then(res => { console.log(res); this._sendMessage({
commentContent: res,
orgId: that.data.orgId,
resId: that.data.childId,
commentContentType: "audio",
fileSize: fileSize,
fileTime: parseInt(duration/1000)
})
})
}
}
})
}, 2.wxml中,给view添加上 <view catch:longpress="_longClickVoicebtn" catch:touchmove="_sendVoiceMoveEvent" catch:touchend="_sendVoiceMoveEndEvent"hover-class="btn-voice-press"> |
3、index.js 播放录音
createInnerAudioContext.autoplay = truecreateInnerAudioContext.src = src //src就是传的播放地址
以上就是关于“小程序聊天室功能怎么实现”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.xuebuyuan.com/3290893.html