391 lines
9.1 KiB
Vue
391 lines
9.1 KiB
Vue
<template>
|
||
<view class="jsfun-record" @tap="showPicker">
|
||
<slot></slot>
|
||
<!-- 遮罩层 -->
|
||
<view class="mask" @tap.stop="closePicker" v-if="isShow" @touchmove.stop.prevent="moveHandle"></view>
|
||
<!-- 多选控件 -->
|
||
<view class="conbox record" :class="{'pickerShow':isShow}">
|
||
<!-- 此处可放置倒计时，可根据需要自行添加 -->
|
||
<view class="time">
|
||
{{showRecordTime}}
|
||
</view>
|
||
<view class="c999">
|
||
最短{{minTime}}秒，最长{{maxTime}}秒
|
||
</view>
|
||
<view class="record-box" @touchstart="start" @longpress="record" @touchend="end"
|
||
@touchmove.stop.prevent="moveHandle">
|
||
<span class="stop" @touchstart.stop="stopVoice" v-if="voicePath && playing==1"></span>
|
||
<span class="paly" @touchstart.stop="playVoice" v-if="voicePath && playing==0"></span>
|
||
<canvas class="canvas" canvas-id="canvas">
|
||
<span class="recording"></span>
|
||
</canvas>
|
||
<span class="confirm" @touchstart.stop="okClick" v-if="voicePath"></span>
|
||
</view>
|
||
<view class="c666 fz32 domess">长按录音</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
const recorderManager = uni.getRecorderManager(); //录音
|
||
var innerAudioContext; //播放
|
||
|
||
export default {
|
||
name: 'jsfun-record',
|
||
props: {
|
||
maxTime: { // 录音最大时长，单位秒
|
||
type: Number,
|
||
default: 15
|
||
},
|
||
minTime: { // 录音最大时长，单位毫秒
|
||
type: Number,
|
||
default: 5
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
isShow: false,
|
||
frame: 50, // 执行绘画的频率，单位毫秒
|
||
recordTime: 0, //录音时长
|
||
recordTime1: 0, //播放录音倒计时
|
||
isshowyuan: false, //是否显示圆圈
|
||
playing: 0, //是否播放中
|
||
timeObj: null, //计时id
|
||
drawObj: null, //画布动画id
|
||
countdownObj: null, //倒计时id
|
||
voicePath: '',
|
||
ctx: ''
|
||
}
|
||
},
|
||
computed: {
|
||
showRecordTime() {
|
||
var strs = "";
|
||
var m = Math.floor(this.recordTime / 60);
|
||
if (m < 10) strs = "0" + m;
|
||
|
||
var s = this.recordTime % 60;
|
||
strs += (s < 10) ? ":0" + s : ":" + s;
|
||
|
||
return strs
|
||
},
|
||
|
||
},
|
||
watch: {},
|
||
onLoad() {
|
||
var _this = this;
|
||
|
||
//获取录音权限
|
||
uni.authorize({
|
||
scope: 'scope.record',
|
||
success() {}
|
||
})
|
||
|
||
//初始化
|
||
_this.initValue();
|
||
|
||
},
|
||
mounted() {
|
||
innerAudioContext = uni.createInnerAudioContext(); //播放
|
||
let _this = this;
|
||
|
||
//录音停止事件
|
||
recorderManager.onStop(function(res) {
|
||
console.log('recorder stop' + res.tempFilePath);
|
||
_this.voicePath = res.tempFilePath;
|
||
});
|
||
|
||
//根据canvas 动态中心点
|
||
let query = uni.createSelectorQuery().in(this);
|
||
query.select(".canvas").boundingClientRect()
|
||
query.exec(function(res) {
|
||
_this.tempw = res[0].width; //使用canvas的宽度计算中心点的位置
|
||
_this.temph = res[0].height;
|
||
})
|
||
//根据中心图片的大小计算圆环的大小
|
||
query.select(".recording").boundingClientRect()
|
||
query.exec(function(res) {
|
||
_this.tempw1 = res[0].width; //使用点按图形的宽度计算圆环的宽高
|
||
})
|
||
},
|
||
beforeDestroy() {
|
||
innerAudioContext.destroy();
|
||
},
|
||
methods: {
|
||
moveHandle() {
|
||
return false;
|
||
},
|
||
//组件数据初始化 进入时、关闭时调用初始化
|
||
initValue() {
|
||
this.recordTime = 0
|
||
},
|
||
//显示组件
|
||
showPicker() {
|
||
setTimeout(() => {
|
||
this.isShow = true;
|
||
// this.$emit('show');
|
||
}, 100);
|
||
},
|
||
//关闭组件
|
||
closePicker() {
|
||
this.isShow = false;
|
||
//点遮罩 点取消关闭说明用户不想修改，所以这里对数据进行初始化
|
||
this.initValue();
|
||
this.stopVoice();
|
||
},
|
||
//点击确定
|
||
okClick() {
|
||
// var data = {},list = {},textStr = "",indexStr = "";
|
||
this.$emit('okClick', this.voicePath)
|
||
this.$emit('start', 2)
|
||
//确定后更新默认初始值,这样再次进入默认初值就是最后选择的
|
||
// this.defaultArr = textStr;
|
||
//关闭
|
||
this.closePicker();
|
||
},
|
||
start() {
|
||
console.log('start')
|
||
this.stopVoice();
|
||
this.voicePath = ""; //音频地址
|
||
this.recordTime = 0;
|
||
//生成canvas对象
|
||
this.ctx = uni.createCanvasContext('canvas',this);
|
||
},
|
||
end() {
|
||
console.log('end')
|
||
let recordTime = this.recordTime;
|
||
this.recordTime1 = this.recordTime;
|
||
|
||
clearInterval(this.timeObj); //清除计时器
|
||
clearInterval(this.drawObj); //清除画布动画
|
||
// this.recordTime = 0; //清除计时
|
||
this.isshowyuan = false; //隐藏圆圈
|
||
//清除canvas内容 方式一：不知道为啥 不起作用
|
||
//this.ctx.clearRect(0,0,this.ctx.width,this.ctx.height);
|
||
//清除canvas内容 方式二：填充canvas为白色
|
||
this.ctx.setFillStyle('#fff')
|
||
this.ctx.fillRect(0, 0, this.ctx.width, this.ctx.height)
|
||
this.ctx.draw()
|
||
|
||
if (recordTime < this.minTime) {
|
||
if (recordTime <= 0) {
|
||
//==点击事件==;
|
||
return false;
|
||
}
|
||
//==小于5秒==;
|
||
uni.showToast({
|
||
title: "不能小于" + this.minTime + "秒,请重新录制",
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
recorderManager.stop();
|
||
},
|
||
record: function() {
|
||
console.log('record')
|
||
let _this = this;
|
||
|
||
_this.isshowyuan = true
|
||
// 开始录音
|
||
recorderManager.start({
|
||
format: "mp3"
|
||
});
|
||
|
||
_this.timeObj = setInterval(function() {
|
||
_this.recordTime++;
|
||
if (_this.recordTime == _this.maxTime) _this.end();
|
||
}, 1000);
|
||
|
||
//中心点坐标 这里如果直接除2发现位置有偏差，目前还没明白为什么要减1
|
||
let pianyi = 0
|
||
switch (uni.getSystemInfoSync().platform) {
|
||
case 'android':
|
||
pianyi = 0;
|
||
break;
|
||
case 'ios':
|
||
pianyi = 1;
|
||
break;
|
||
default:
|
||
pianyi = 1;
|
||
break;
|
||
}
|
||
// #ifdef APP-PLUS
|
||
let centerX = _this.tempw / 2 + pianyi;
|
||
let centerY = _this.temph / 2 + pianyi;
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
let centerX = _this.tempw / 2 + pianyi-1;
|
||
let centerY = _this.temph / 2 + pianyi-1;
|
||
// #endif
|
||
let yuanhuanW = _this.tempw1 / 2 -6; //圆环的半径 中间图片的宽度/2 + 4
|
||
|
||
// 录音过程圆圈动画的背景园
|
||
_this.ctx.beginPath();
|
||
_this.ctx.setStrokeStyle("#1789FD");
|
||
_this.ctx.setGlobalAlpha(0.3)
|
||
_this.ctx.setLineWidth(3);
|
||
_this.ctx.arc(centerX, centerY, yuanhuanW, 0, 2 * Math.PI);
|
||
_this.ctx.stroke();
|
||
_this.ctx.draw();
|
||
|
||
// 录音过程圆圈动画
|
||
let angle = -0.5;
|
||
_this.drawObj = setInterval(function() {
|
||
_this.ctx.beginPath();
|
||
_this.ctx.setStrokeStyle("#1789FD");
|
||
_this.ctx.setGlobalAlpha(1)
|
||
_this.ctx.setLineWidth(3);
|
||
_this.ctx.arc(centerX, centerY, yuanhuanW, -0.5 * Math.PI, (angle += 2 / (_this
|
||
.maxTime * 1000 / _this.frame)) * Math.PI, false);
|
||
_this.ctx.stroke();
|
||
_this.ctx.draw(true);
|
||
}, _this.frame);
|
||
},
|
||
playVoice() {
|
||
if (this.voicePath && this.playing === 0) {
|
||
innerAudioContext.src = this.voicePath;
|
||
|
||
innerAudioContext.stop(); //todo 第一次play时若不先stop则播放不出来,未知原因
|
||
innerAudioContext.play();
|
||
|
||
this.playing = 1;
|
||
this.recordTime = this.recordTime1;
|
||
this.countdownObj = setInterval(() => {
|
||
this.recordTime--;
|
||
if (this.recordTime === 0) {
|
||
this.stopVoice()
|
||
return;
|
||
}
|
||
}, 1000)
|
||
}
|
||
},
|
||
stopVoice() {
|
||
innerAudioContext.stop();
|
||
this.playing = 0;
|
||
this.recordTime = 0;
|
||
clearInterval(this.countdownObj);
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.jsfun-record {
|
||
|
||
.mask {
|
||
position: fixed;
|
||
z-index: 1000;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.conbox {
|
||
transition: all .3s ease;
|
||
transform: translateY(100%);
|
||
|
||
&.pickerShow {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
position: fixed;
|
||
z-index: 1000;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
background: #fff;
|
||
}
|
||
|
||
.c666 {
|
||
color: #666;
|
||
}
|
||
|
||
.c999 {
|
||
color: #999;
|
||
}
|
||
|
||
.fz28 {
|
||
font-size: 28upx;
|
||
}
|
||
|
||
.fz32 {
|
||
font-size: 32upx;
|
||
}
|
||
|
||
|
||
.record {
|
||
text-align: center;
|
||
|
||
.time {
|
||
text-align: center;
|
||
font-size: 60upx;
|
||
color: #000;
|
||
line-height: 100upx;
|
||
margin-top: 50upx;
|
||
}
|
||
|
||
.domess {
|
||
margin-bottom: 50upx;
|
||
}
|
||
|
||
|
||
.record-box {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
}
|
||
|
||
canvas {
|
||
margin: 10upx 60upx;
|
||
position: relative;
|
||
width: 200upx;
|
||
height: 200upx;
|
||
z-index: 10;
|
||
|
||
.recording {
|
||
position: absolute;
|
||
top: 20upx;
|
||
left: 20upx;
|
||
width: 160upx;
|
||
height: 160upx;
|
||
border: 1px dashed #1789FD;
|
||
border-radius: 100upx;
|
||
background: #1789FD url(../../static/jsfun-record/recording.png) no-repeat 50% 50%;
|
||
background-size: 50% 50%;
|
||
z-index: 100;
|
||
}
|
||
}
|
||
|
||
.btncom {
|
||
margin-top: 70upx;
|
||
width: 80upx;
|
||
height: 80upx;
|
||
border-radius: 80upx;
|
||
}
|
||
|
||
.stop {
|
||
@extend .btncom;
|
||
background: #1789FD url(../../static/jsfun-record/stop.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.paly {
|
||
@extend .btncom;
|
||
background: #1789FD url(../../static/jsfun-record/play.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.confirm {
|
||
@extend .btncom;
|
||
background: url(../../static/jsfun-record/confirm.png) no-repeat 100% 100%;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
}
|
||
</style>
|