<template>
|
<view class="uni-audio-record" :class="{'uni-audio-record-hidden':!recording}">
|
<view class="uni-panel-recording" :class="{'hidden':willStop}">
|
<view class="uni-panel-record-icon fu-voice"></view>
|
</view>
|
<view class="uni-panel-record-cancel" :class="{'hidden':!willStop}">
|
<view class="uni-panel-record-icon2 fu-chexiao"></view>
|
</view>
|
<view class="uni-panel-record-tis" :class="{'change':willStop}">{{recordTis}}</view>
|
</view>
|
</template>
|
|
|
<script>
|
import TaskInit from "@/common/extend.js"
|
export default {
|
name: "audioRecord",
|
components: {},
|
emits: ['recordEnd'],
|
props: {
|
directionMoveCancel: {
|
type: String,
|
default () {
|
return "top";
|
}
|
},
|
},
|
data() {
|
return {
|
recordTis: "",
|
recording: false,
|
willStop: false,
|
initPoint: {
|
identifier: 0,
|
Y: 0
|
},
|
recordTimer: null,
|
recordLength: 0,
|
recorderManager: null,
|
|
}
|
},
|
computed: {
|
moveCancelTis() {
|
if (this.directionMoveCancel == "bottom")
|
return "手指下滑 取消发送"
|
else
|
if (this.directionMoveCancel == "left")
|
return "手指左滑 取消发送"
|
else
|
if (this.directionMoveCancel == "right")
|
return "手指右滑 取消发送"
|
else
|
return "手指上滑 取消发送"
|
}
|
},
|
mounted() {
|
const _this = this
|
|
//#ifndef MP-DINGTALK
|
// 创建对象--录音机
|
this.recorderManager = uni.getRecorderManager();
|
//录音开始事件
|
this.recorderManager.onStart((e) => {
|
console.log('audioRecord onStart', e);
|
_this.recordBegin(e);
|
})
|
//录音结束事件
|
this.recorderManager.onStop((e) => {
|
console.log('audioRecord onStop', e);
|
_this.recordEnd(e);
|
})
|
//#endif
|
|
},
|
|
methods: {
|
setData: function(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
//录音开始UI效果
|
voiceStart(e) {
|
console.log("audioRecord voiceStart", e)
|
if (e.touches.length > 1) {
|
return;
|
}
|
this.initPoint.X = e.touches[0].clientX;
|
this.initPoint.Y = e.touches[0].clientY;
|
this.initPoint.identifier = e.touches[0].identifier;
|
//#ifdef MP-DINGTALK
|
const _this = this
|
let rm = dd.getRecorderManager()
|
rm.onstart = (e) => {
|
_this.recordBegin(e);
|
}
|
rm.onerror = (e) => {
|
console.log('audioRecord voiceStart onerror', e);
|
}
|
rm.start({
|
format: "mp3",
|
duration: 60
|
})
|
//#endif
|
//#ifndef MP-DINGTALK
|
this.recorderManager.start({
|
format: "mp3",
|
duration: 60
|
}); //录音开始,
|
//#endif
|
},
|
// 录音中(判断是否触发上滑取消发送)
|
voiceIng(e) {
|
console.log("voiceIng", e)
|
if (!this.recording) {
|
return;
|
}
|
let cancelFlag = false
|
let touche = e.touches[0];
|
if (this.directionMoveCancel == "bottom") {
|
cancelFlag = touche.clientY - this.initPoint.Y >= uni.upx2px(100)
|
} else if (this.directionMoveCancel == "left") {
|
cancelFlag = this.initPoint.X - touche.clientX >= uni.upx2px(100)
|
} else if (this.directionMoveCancel == "right") {
|
cancelFlag = touche.clientX - this.initPoint.X >= uni.upx2px(100)
|
} else {
|
cancelFlag = this.initPoint.Y - touche.clientY >= uni.upx2px(100)
|
}
|
//上滑一个导航栏的高度触发上滑取消发送
|
if (cancelFlag) {
|
this.willStop = true;
|
this.recordTis = '松开手指 取消发送'
|
} else {
|
this.willStop = false;
|
this.recordTis = this.moveCancelTis
|
}
|
},
|
// 结束录音
|
voiceEnd(e) {
|
console.log("audioRecord voiceEnd", e)
|
|
if (!this.recording) {
|
setTimeout(() => {
|
this.voiceFinish()
|
}, 100)
|
return;
|
}
|
this.voiceFinish()
|
|
},
|
// 录音被打断
|
voiceCancel() {
|
console.log("audioRecord voiceCancel")
|
this.willStop = true; //不发送录音
|
this.voiceFinish()
|
|
},
|
voiceFinish() {
|
this.recording = false;
|
this.recordTis = this.moveCancelTis
|
//#ifdef MP-DINGTALK
|
const _this = this
|
let rm = dd.getRecorderManager()
|
rm.onstop = (e) => {
|
_this.recordEnd(e);
|
}
|
rm.onerror = (e) => {
|
console.log('audioRecord voiceEnd onerror', e);
|
}
|
rm.stop(); //录音结束
|
//#endif
|
//#ifndef MP-DINGTALK
|
this.recorderManager.stop(); //录音结束
|
//#endif
|
},
|
//录音开始UI效果
|
recordBegin(e) {
|
console.log("audioRecord recordBegin")
|
this.$emit('recordStart')
|
this.recording = true;
|
this.recordLength = 0;
|
this.recordTimer = setInterval(() => {
|
this.recordLength++;
|
}, 1000)
|
|
},
|
//录音结束(回调文件)
|
recordEnd(e) {
|
console.log("audioRecord recordEnd")
|
clearInterval(this.recordTimer);
|
if (!this.willStop) {
|
console.log("recordEnd: ", e);
|
if (this.recordLength < 1) {
|
showToast("说话时间太短！")
|
} else {
|
let msg = {
|
fileType: 'audio',
|
duration: 0,
|
path: e.tempFilePath,
|
size: e.fileSize
|
}
|
msg.duration = this.recordLength;
|
this.$emit('recordEnd', msg)
|
}
|
} else {
|
console.log('取消发送录音');
|
}
|
this.willStop = false;
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.uni-audio-record-hidden {
|
display: none !important;
|
}
|
|
.uni-audio-record {
|
width: 40vw;
|
height: 40vw;
|
position: fixed;
|
top: 55%;
|
left: 30%;
|
background-color: rgba(0, 0, 0, .6);
|
border-radius: 20rpx;
|
|
.uni-panel-recording {
|
width: 100%;
|
height: 30vw;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
@keyframes volatility {
|
0% {
|
background-position: 0% 130%;
|
}
|
|
20% {
|
background-position: 0% 150%;
|
}
|
|
30% {
|
background-position: 0% 155%;
|
}
|
|
40% {
|
background-position: 0% 150%;
|
}
|
|
50% {
|
background-position: 0% 145%;
|
}
|
|
70% {
|
background-position: 0% 150%;
|
}
|
|
80% {
|
background-position: 0% 155%;
|
}
|
|
90% {
|
background-position: 0% 140%;
|
}
|
|
100% {
|
background-position: 0% 135%;
|
}
|
}
|
|
.uni-panel-record-icon {
|
background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
|
background-size: 100% 200%;
|
animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
font-size: 150rpx;
|
color: #f09b37;
|
}
|
|
.uni-panel-record-cancel {
|
width: 100%;
|
height: 30vw;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.uni-panel-record-icon2 {
|
color: #fff;
|
font-size: 150rpx;
|
}
|
|
.uni-panel-record-tis {
|
width: 100%;
|
height: 10vw;
|
display: flex;
|
justify-content: center;
|
font-size: 28rpx;
|
color: #fff;
|
|
}
|
|
.uni-panel-record-tis .change {
|
color: #f09b37;
|
}
|
|
.hidden {
|
display: none !important;
|
}
|
|
}
|
</style>
|
