390 lines
9.9 KiB
Vue
390 lines
9.9 KiB
Vue
<template>
|
||
<view>
|
||
<!-- #ifdef APP-PLUS ||MP-WEIXIN -->
|
||
|
||
<view class="record-btn" @longpress="startRecord" @touchend="endRecord" hover-class="record-btn-hover"
|
||
hover-start-time="200" hover-stay-time="150" :style="[
|
||
btnStyle,
|
||
{
|
||
'--btn-hover-fontcolor': btnHoverFontcolor,
|
||
'--btn-hover-bgcolor': btnHoverBgcolor
|
||
}
|
||
]">
|
||
{{ btnTextContent }}
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<view class="record-popup" :style="{
|
||
'--popup-height': popupHeight,
|
||
'--popup-width': upx2px(popupMaxWidth),
|
||
'--popup-bottom': upx2px(popupFixBottom),
|
||
'--popup-bg-color': popupBgColor
|
||
}">
|
||
<view class="inner-content" v-if="recordPopupShow">
|
||
<view class="title">{{ popupTitle }}</view>
|
||
<view class="voice-line-wrap" v-if="recording" :style="{
|
||
'--line-height': upx2px(lineHeight),
|
||
'--line-start-color': lineStartColor,
|
||
'--line-end-color': lineEndColor
|
||
}">
|
||
<view class="voice-line one"></view>
|
||
<view class="voice-line two"></view>
|
||
<view class="voice-line three"></view>
|
||
<view class="voice-line four"></view>
|
||
<view class="voice-line five"></view>
|
||
<view class="voice-line six"></view>
|
||
<view class="voice-line seven"></view>
|
||
<view class="voice-line six"></view>
|
||
<view class="voice-line five"></view>
|
||
<view class="voice-line four"></view>
|
||
<view class="voice-line three"></view>
|
||
<view class="voice-line two"></view>
|
||
<view class="voice-line one"></view>
|
||
</view>
|
||
<view class="cancel-icon" v-if="!recording">+</view>
|
||
<view class="tips">{{ recording ? popupDefaultTips : popupCancelTips }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
var that;
|
||
// #ifdef APP-PLUS || MP-WEIXIN
|
||
const recorderManager = uni.getRecorderManager();
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
// 引入权限判断
|
||
import permision from '../../js_sdk/wa-permission/permission.js';
|
||
// #endif
|
||
export default {
|
||
name: 'nbVoiceRecord',
|
||
/**
|
||
* 录音交互动效组件
|
||
* @property {Object} recordOptions 录音配置
|
||
* @property {Object} btnStyle 按钮样式
|
||
* @property {Object} btnHoverFontcolor 按钮长按时字体颜色
|
||
* @property {String} btnHoverBgcolor 按钮长按时背景颜色
|
||
* @property {String} btnDefaultText 按钮初始文字
|
||
* @property {String} btnRecordingText 录制时按钮文字
|
||
* @property {Boolean} vibrate 弹窗时是否震动
|
||
* @property {String} popupTitle 弹窗顶部文字
|
||
* @property {String} popupDefaultTips 录制时弹窗底部提示
|
||
* @property {String} popupCancelTips 滑动取消时弹窗底部提示
|
||
* @property {String} popupMaxWidth 弹窗展开后宽度
|
||
* @property {String} popupMaxHeight 弹窗展开后高度
|
||
* @property {String} popupFixBottom 弹窗展开后距底部高度
|
||
* @property {String} popupBgColor 弹窗背景颜色
|
||
* @property {String} lineHeight 声波高度
|
||
* @property {String} lineStartColor 声波波谷时颜色色值
|
||
* @property {String} lineEndColor 声波波峰时颜色色值
|
||
* @event {Function} startRecord 开始录音回调
|
||
* @event {Function} endRecord 结束录音回调
|
||
* @event {Function} cancelRecord 滑动取消录音回调
|
||
* @event {Function} stopRecord 主动停止录音
|
||
*/
|
||
props: {
|
||
recordOptions: {
|
||
type: Object,
|
||
default () {
|
||
return {
|
||
duration: 600000
|
||
}; // 请自行查看各端的的支持情况，这里全部使用默认配置
|
||
}
|
||
},
|
||
btnStyle: {
|
||
type: Object,
|
||
default () {
|
||
return {
|
||
width: '300rpx',
|
||
height: '80rpx',
|
||
borderRadius: '20rpx',
|
||
backgroundColor: '#409EFF',
|
||
border: '1rpx solid whitesmoke',
|
||
permisionState: false
|
||
};
|
||
}
|
||
},
|
||
btnHoverFontcolor: {
|
||
type: String,
|
||
default: '#000' // 颜色名称或16进制色值
|
||
},
|
||
btnHoverBgcolor: {
|
||
type: String,
|
||
default: 'whitesmoke' // 颜色名称或16进制色值
|
||
},
|
||
btnDefaultText: {
|
||
type: String,
|
||
default: '长按开始录音'
|
||
},
|
||
btnRecordingText: {
|
||
type: String,
|
||
default: '录音中'
|
||
},
|
||
vibrate: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// #ifdef APP-PLUS || MP-WEIXIN
|
||
popupTitle: {
|
||
type: String,
|
||
default: '正在录制音频'
|
||
},
|
||
popupDefaultTips: {
|
||
type: String,
|
||
default: '松手结束录音'
|
||
},
|
||
// #endif
|
||
popupCancelTips: {
|
||
type: String,
|
||
default: '松手取消录音'
|
||
},
|
||
popupMaxWidth: {
|
||
type: Number,
|
||
default: 600 // 单位为rpx
|
||
},
|
||
popupMaxHeight: {
|
||
type: Number,
|
||
default: 300 // 单位为rpx
|
||
},
|
||
popupFixBottom: {
|
||
type: Number,
|
||
default: 200 // 单位为rpx
|
||
},
|
||
popupBgColor: {
|
||
type: String,
|
||
default: 'whitesmoke'
|
||
},
|
||
lineHeight: {
|
||
type: Number,
|
||
default: 50 // 单位为rpx
|
||
},
|
||
lineStartColor: {
|
||
type: String,
|
||
default: 'royalblue' // 颜色名称或16进制色值
|
||
},
|
||
lineEndColor: {
|
||
type: String,
|
||
default: 'indianred' // 颜色名称或16进制色值
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
stopStatus: true, // 是否已被父页面通知主动结束录音
|
||
btnTextContent: this.btnDefaultText,
|
||
startTouchData: {},
|
||
popupHeight: '0px', // 这是初始的高度
|
||
recording: true, // 录音中
|
||
recordPopupShow: false,
|
||
recordTimeout: null, // 录音定时器
|
||
h5start: false
|
||
};
|
||
},
|
||
created() {
|
||
// 请求权限
|
||
this.checkPermission();
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
upx2px(upx) {
|
||
return uni.upx2px(upx) + 'px';
|
||
},
|
||
async checkPermission() {
|
||
var that = this;
|
||
// #ifdef APP-PLUS
|
||
// 先判断os
|
||
let os = uni.getSystemInfoSync().osName;
|
||
if (os == 'ios') {
|
||
this.permisionState = await permision.judgeIosPermission('record');
|
||
} else {
|
||
this.permisionState = await permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
|
||
}
|
||
if (this.permisionState !== true && this.permisionState !== 1) {
|
||
uni.showToast({
|
||
title: '请先授权使用录音',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
uni.authorize({
|
||
scope: 'scope.record',
|
||
success(e) {
|
||
that.permisionState = true;
|
||
// that.startRecord();
|
||
},
|
||
fail() {
|
||
uni.showToast({
|
||
title: '请授权使用录音',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
|
||
startRecord() {
|
||
if (!this.permisionState) {
|
||
this.checkPermission();
|
||
return;
|
||
}
|
||
this.stopStatus = false;
|
||
setTimeout(() => {
|
||
this.popupHeight = this.upx2px(this.popupMaxHeight);
|
||
setTimeout(() => {
|
||
this.recordPopupShow = true;
|
||
this.btnTextContent = this.btnRecordingText;
|
||
// 开始录音
|
||
// recorderManager.start(this.recordOptions);
|
||
// 设置定时器
|
||
this.recordTimeout = setTimeout(
|
||
() => {
|
||
// 如果定时器先结束，则说明此时录音时间超限
|
||
this.stopRecord(); // 结束录音动画（实际上录音的end回调已经先执行）
|
||
this.recordTimeout = null; // 重置
|
||
},
|
||
this.recordOptions.duration ? this.recordOptions.duration : 600000
|
||
);
|
||
|
||
this.$emit('startRecord');
|
||
}, 100);
|
||
}, 200);
|
||
},
|
||
endRecord() {
|
||
var that = this;
|
||
if (this.stopStatus) {
|
||
return;
|
||
}
|
||
this.popupHeight = '0px';
|
||
this.recordPopupShow = false;
|
||
this.btnTextContent = this.btnDefaultText;
|
||
this.$emit('endRecord');
|
||
},
|
||
stopRecord() {
|
||
// 用法如你录音限制了时间，那么将在结束时强制停止组件的显示
|
||
this.endRecord();
|
||
this.stopStatus = true;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.record-btn {
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: 0.25s all;
|
||
border: 1rpx solid whitesmoke;
|
||
}
|
||
|
||
.record-btn-hover {
|
||
color: var(--btn-hover-fontcolor) !important;
|
||
background-color: var(--btn-hover-bgcolor) !important;
|
||
}
|
||
|
||
.record-popup {
|
||
position: absolute;
|
||
bottom: var(--popup-bottom);
|
||
left: calc(50vw - calc(var(--popup-width) / 2));
|
||
z-index: 1;
|
||
width: var(--popup-width);
|
||
height: var(--popup-height);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
background: var(--popup-bg-color);
|
||
color: #000;
|
||
transition: 0.2s height;
|
||
|
||
.inner-content {
|
||
height: var(--popup-height);
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.tips {
|
||
color: #999;
|
||
padding: 20rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cancel-icon {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 44rpx;
|
||
line-height: 44rpx;
|
||
background-color: pink;
|
||
border-radius: 50%;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
.voice-line-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.voice-line {
|
||
width: 5rpx;
|
||
height: var(--line-height);
|
||
border-radius: 3rpx;
|
||
margin: 0 5rpx;
|
||
}
|
||
|
||
.one {
|
||
animation: wave 0.4s 1s linear infinite alternate;
|
||
}
|
||
|
||
.two {
|
||
animation: wave 0.4s 0.9s linear infinite alternate;
|
||
}
|
||
|
||
.three {
|
||
animation: wave 0.4s 0.8s linear infinite alternate;
|
||
}
|
||
|
||
.four {
|
||
animation: wave 0.4s 0.7s linear infinite alternate;
|
||
}
|
||
|
||
.five {
|
||
animation: wave 0.4s 0.6s linear infinite alternate;
|
||
}
|
||
|
||
.six {
|
||
animation: wave 0.4s 0.5s linear infinite alternate;
|
||
}
|
||
|
||
.seven {
|
||
animation: wave 0.4s linear infinite alternate;
|
||
}
|
||
}
|
||
|
||
@keyframes wave {
|
||
0% {
|
||
transform: scale(1, 1);
|
||
background-color: var(--line-start-color);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(1, 0.2);
|
||
background-color: var(--line-end-color);
|
||
}
|
||
}
|
||
</style> |