You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
334 lines
8.5 KiB
334 lines
8.5 KiB
<template>
|
|
<view class="yuyin">
|
|
<view class="a" v-if="!yuyinInfo.voice">
|
|
<view class="item">
|
|
<image class="img1" v-if="isPlays == false" @click="toDo(5)" src="@/static/yuying-04.png"></image>
|
|
<image class="img2" v-else @click="toDo(6)" src="@/static/yuying-02.png"></image>
|
|
<view class="txt">{{isPlays?'停止录音':'点击录音'}}</view>
|
|
<view class="txt" v-if="isPlays">{{yuyinInfo.voiceTime}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="a" v-else>
|
|
<view class="items" @click="toDo(1)">
|
|
<image src="/static/yuying-05.png"></image>
|
|
<view class="txt">重新录制</view>
|
|
</view>
|
|
<view class="item">
|
|
<image class="img1" v-if="isPlay == false" @click="toDo(3)" src="@/static/yuying-04.png"></image>
|
|
<image class="img2" v-else @click="toDo(4)" src="@/static/yuying-02.png"></image>
|
|
<view class="txt" v-if="isPlay == false">{{counts?counts:yuyinInfo.voiceTime}}</view>
|
|
<view class="txt" v-else>{{counts}}</view>
|
|
</view>
|
|
<view class="items" @click="toDo(51)" v-if="isRest">
|
|
<image src="/static/yuying-03.png"></image>
|
|
<view class="txt">保存提交</view>
|
|
</view>
|
|
<view class="items" v-else></view>
|
|
</view>
|
|
<u-popup v-model="show" mode="top" :mask-close-able='false' :zIndex="5">
|
|
<view class="permissions_box">
|
|
当您使用APP时，为了使用录音的功能，我们需要申请麦克风权限。
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import permision from "@/js_sdk/wa-permission/permission.js"
|
|
const recorderManager = uni.getRecorderManager();
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
innerAudioContext.autoplay = true;
|
|
let timer = 0;
|
|
export default {
|
|
data() {
|
|
return {
|
|
baseUrl: "",
|
|
count: 0,
|
|
show: false,
|
|
isPlay: false,
|
|
isPlays: false,
|
|
yuyinInfo: {},
|
|
isRest: false,
|
|
counts: 0,
|
|
isPlay1: false
|
|
};
|
|
},
|
|
onReady() {
|
|
const that = this;
|
|
that.yuyinInfo = uni.getStorageSync("yuyinInfo");
|
|
console.log(that.yuyinInfo)
|
|
that.yuyinInfo.voiceTime = that.formatFun(that.yuyinInfo.voiceTime);
|
|
that.baseUrl = that.$baseUrl;
|
|
recorderManager.onStop(function (res) {
|
|
that.yuyinInfo.voice = res.tempFilePath;
|
|
that.isPlays = false;
|
|
that.count = 0;
|
|
that.counts = 0;
|
|
that.isPlay = false;
|
|
clearInterval(timer);
|
|
that.$forceUpdate();
|
|
console.log('that.yuyinInfo:' +JSON.stringify(that.yuyinInfo));
|
|
console.log(that.yuyinInfo.voice)
|
|
console.log(that.yuyinInfo.voiceTime)
|
|
});
|
|
innerAudioContext.onEnded(res=>{
|
|
that.isPlay = false
|
|
})
|
|
innerAudioContext.onTimeUpdate(res=>{
|
|
console.log(innerAudioContext.currentTime)
|
|
that.counts = that.formatFun(Math.ceil(innerAudioContext.currentTime.toFixed(0)))
|
|
})
|
|
uni.$on("onPopup",res=>{
|
|
if(res == 1){
|
|
that.show = false
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
recorderAuthModal: function () {
|
|
const that = this;
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '为了麦克风的功能，我们需要申请麦克风权限，请您确认授权，否则无法使用该功能~',
|
|
cancelText: '关闭',
|
|
confirmText: '去授权',
|
|
success(res) {
|
|
that.show=false
|
|
if (res.confirm) {
|
|
permision.gotoAppPermissionSetting()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
async requestAndroidPermission(permisionID) {
|
|
const that = this;
|
|
var result = await permision.requestAndroidPermission(permisionID);
|
|
if(result != 1){
|
|
that.recorderAuthModal();
|
|
}else{
|
|
that.show =false
|
|
}
|
|
},
|
|
toDo(index){
|
|
const that = this;
|
|
if(index == 1){
|
|
// APP检查权限
|
|
if(uni.getSystemInfoSync().platform == 'android') {
|
|
plus.android.checkPermission(
|
|
'android.permission.RECORD_AUDIO',
|
|
granted => {
|
|
if (granted.checkResult==-1){
|
|
that.show=true
|
|
}else{
|
|
that.show=false
|
|
that.yuyinInfo.voice = ""
|
|
that.yuyinInfo.voiceTime = that.formatFun(0);
|
|
that.yuyinInfo.voiceTimes = 0;
|
|
that.counts = 0;
|
|
that.count = 0;
|
|
that.isRest = true;
|
|
if(that.isPlay1){
|
|
console.log(1111)
|
|
innerAudioContext.pause();
|
|
that.isPlay1 = false
|
|
}
|
|
}
|
|
},
|
|
error => {
|
|
console.error('Error checking permission:', error.message);
|
|
}
|
|
);
|
|
that.requestAndroidPermission('android.permission.RECORD_AUDIO')
|
|
return ;
|
|
}
|
|
that.counts = 0;
|
|
that.count = 0;
|
|
that.yuyinInfo.voice = ""
|
|
that.yuyinInfo.voiceTime = that.formatFun(0);
|
|
that.yuyinInfo.voiceTimes = 0;
|
|
that.isRest = true;
|
|
}else if(index == 2){
|
|
recorderManager.stop();
|
|
}else if(index == 3){
|
|
console.log(111,innerAudioContext)
|
|
if(innerAudioContext){
|
|
console.log(innerAudioContext.src)
|
|
}
|
|
innerAudioContext.src = that.yuyinInfo.voice;
|
|
that.isPlay = true;
|
|
innerAudioContext.play();
|
|
that.isPlay1 = true;
|
|
}else if(index == 4){
|
|
console.log(222,innerAudioContext)
|
|
that.isPlay = false;
|
|
that.isPlay1 = false;
|
|
innerAudioContext.pause();
|
|
}else if(index == 5){
|
|
// APP检查权限
|
|
if(uni.getSystemInfoSync().platform == 'android') {
|
|
plus.android.checkPermission(
|
|
'android.permission.RECORD_AUDIO',
|
|
granted => {
|
|
if (granted.checkResult==-1){
|
|
that.show=true
|
|
}else{
|
|
that.show=false
|
|
that.yuyinInfo.voice = ""
|
|
that.yuyinInfo.voiceTime = that.formatFun(0);
|
|
that.isPlays = true;
|
|
clearInterval(timer)
|
|
timer = setInterval(()=>{
|
|
that.count++
|
|
that.yuyinInfo.voiceTime = that.formatFun(that.count)
|
|
},1000)
|
|
recorderManager.start({
|
|
format: "mp3"
|
|
})
|
|
}
|
|
},
|
|
error => {
|
|
console.error('Error checking permission:', error.message);
|
|
}
|
|
);
|
|
that.requestAndroidPermission('android.permission.RECORD_AUDIO')
|
|
return ;
|
|
}
|
|
that.yuyinInfo.voice = ""
|
|
that.yuyinInfo.voiceTime = that.formatFun(0)
|
|
that.isPlays = true;
|
|
clearInterval(timer)
|
|
timer = setInterval(()=>{
|
|
that.count++
|
|
that.yuyinInfo.voiceTime = that.formatFun(that.count)
|
|
that.yuyinInfo.voiceTimes = that.count
|
|
},1000)
|
|
recorderManager.start({
|
|
format: "mp3"
|
|
})
|
|
}else if(index == 6){
|
|
recorderManager.stop();
|
|
}else if(index == 51){
|
|
// 可以在此上传到服务端
|
|
uni.uploadFile({
|
|
url: that.$baseUrl+'/prod-api/api/user/voiceSign',
|
|
filePath: that.yuyinInfo.voice,
|
|
name: 'file',
|
|
formData: {
|
|
userId: uni.getStorageSync("userInfo").id,
|
|
voiceTime: that.formatFun2(that.yuyinInfo.voiceTime)
|
|
},
|
|
complete: (res) => {
|
|
console.log({
|
|
userId: uni.getStorageSync("userInfo").id,
|
|
voiceTime: that.formatFun2(that.yuyinInfo.voiceTime)
|
|
})
|
|
console.log(res)
|
|
if(res.statusCode == 200){
|
|
const {code, fileName, url, msg} = JSON.parse(res.data);
|
|
if(code == 200){
|
|
uni.showToast({
|
|
title: "上传成功"
|
|
})
|
|
that.isRest = false;
|
|
uni.$emit("changVioce",111)
|
|
setTimeout(()=>{
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},2000)
|
|
}else{
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: "上传失败"
|
|
})
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
icon: "error",
|
|
title: "上传失败"
|
|
})
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
},
|
|
formatFun(num){
|
|
let str = "",h,m,s;
|
|
h=Math.floor(num/3600);
|
|
m=Math.floor((num-h*3600)/60);
|
|
s=(num-h*3600-m*60);
|
|
str = (h<=9?'0'+h:h)+":"+(m<=9?'0'+m:m)+":"+(s<=9?'0'+s:s)
|
|
return str;
|
|
},
|
|
formatFun2(num){
|
|
let str = "",h,m,s,arr = num.split(":");
|
|
h=parseInt(arr[0])*3600;
|
|
m=parseInt(arr[1])*60;
|
|
s=parseInt(arr[2]);
|
|
str = h+m+s
|
|
return str;
|
|
},
|
|
},
|
|
destroyed() {
|
|
if (innerAudioContext) {
|
|
try {
|
|
|
|
} catch (e) {
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page{
|
|
background-color: #fff;
|
|
}
|
|
.yuyin{
|
|
.a{
|
|
margin-top: 360rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.item{
|
|
flex: 1;
|
|
text-align: center;
|
|
image{
|
|
width: 178rpx;
|
|
height: 178rpx;
|
|
margin: 0 auto;
|
|
}
|
|
.txt{
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
.items{
|
|
flex: 1;
|
|
text-align: center;
|
|
image{
|
|
width: 125rpx;
|
|
height: 125rpx;
|
|
margin: 0 auto;
|
|
&.img1{
|
|
display: block;
|
|
}
|
|
&.img2{
|
|
display: none;
|
|
}
|
|
}
|
|
.txt{
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|