congzc 1 year ago
parent
commit
a0cd3ee7ae
1 changed files with 104 additions and 13 deletions
  1. +104
    -13
      src/views/createVideo/index.vue

+ 104
- 13
src/views/createVideo/index.vue View File

@@ -310,16 +310,11 @@
v-for="item in soundOptions"
:key="item.value"
:label="
item.displayName +
`  (${
item.sex == 1
? lanChange == 'zh-cn'
? `男`
: `male`
: lanChange == 'zh-cn'
? `女`
: `female`
})` +
(lanChange == 'zh-cn'
? item.displayName +
`  (${item.sex == 1 ? '男' : '女'})`
: item.localName +
`  (${item.sex == 1 ? 'male' : 'female'})`) +
returnAge(item.ageType)
"
:value="item.id"
@@ -336,11 +331,11 @@
<el-option
v-for="item in soundStyleOptions"
:key="item.name"
:label="item.name"
:label="lanChange == 'zh-cn' ? item.name : item.engName"
:value="item.name"
>
<div style="padding: 0 20px">
{{ item.name }}
{{ lanChange == "zh-cn" ? item.name : item.engName }}
<span
style="float: right; cursor: pointer"
@click.stop="ListenVoices(item.url)"
@@ -387,6 +382,15 @@
<!-- ------------------------ 2 -->
<el-tab-pane :label="$t('createVideo.uploadAudio')">
<div class="card2">
<!-- 免费用户时长提示 -->
<div class="overtimeTips">
<img src="../../assets/img/tips.png" alt="" />
{{
lanChange == "zh-cn"
? `免费用户上传音频时长限制为60秒!`
: `Free users upload audio time limit of 60 seconds!`
}}
</div>
<!-- 上传音频 -->
<p>
<el-icon class="icon-Headset"><i-ep-Headset /></el-icon>
@@ -414,6 +418,15 @@
<audio controls :src="audioUrl" id="uploadAudio"></audio>
</div>
</div>
<!-- 免费用户时长提示 -->
<div class="overtimeTips">
<img src="../../assets/img/tips.png" alt="" />
{{
lanChange == "zh-cn"
? `免费用户录音时长限制为60秒!`
: `Free user recording duration is limited to 60 seconds!`
}}
</div>
<!-- 录制MP3上传语音 -->
<p>
<el-icon class="icon-Mic"><i-ep-Mic /></el-icon>
@@ -435,10 +448,12 @@
<div v-if="isRecording" class="pointer">
<el-icon><i-ep-VideoPlay /></el-icon>
</div>

<div v-if="!isRecording" class="pointer">
<el-icon><i-ep-VideoPause /></el-icon>
</div>
</button>
{{ formatTime(duration) }}
<button
class="pointer"
@click="stopRecording"
@@ -485,6 +500,14 @@
<!-- ----------------------- 3 -->
<el-tab-pane :label="$t('createVideo.music')">
<div class="card3">
<div class="overtimeTips" v-if="musicTabActive == 2">
<img src="../../assets/img/tips.png" alt="" />
{{
lanChange == "zh-cn"
? `免费用户上传音乐时长限制为60秒!`
: `Free users can upload music for 60 seconds!`
}}
</div>
<!-- 选择音乐 -->
<p>
<el-icon class="icon-Headset"><i-ep-Headset /></el-icon>
@@ -1156,7 +1179,8 @@ const isRecording = ref(true);
const audioUrl = ref(null); // audio控件的url
const audioData = ref("");
const videoId = ref(null); //上传mp3的videoId,创建视频会用到

const duration = ref(""); //实时显示录音时长
const getduration = ref(null);
const startRecording = async () => {
if (showAudioWhich.value != 2) {
audioUrl.value = null;
@@ -1165,8 +1189,30 @@ const startRecording = async () => {
}
try {
await recorder.start();
duration.value = 0;
console.log("Recording started");
isRecording.value = false;
getduration.value = setInterval(() => {
if (isRecording.value == true) {
clearInterval(getduration.value);
return;
}
if (duration.value >= 60) {
ElMessage.error(
lanChange.value == "zh-cn"
? `免费用户录音时长限制为60秒!`
: `Free user recording duration is limited to 60 seconds!`
);
clearInterval(getduration.value);
stopRecording();
return;
}
duration.value = Math.floor(recorder.duration);
// console.log(duration.value);
}, 500);
onUnmounted(() => {
clearInterval(duration.value);
});
} catch (error) {
console.error(error);
}
@@ -1225,6 +1271,8 @@ let intervalId = null; // 用于存储 setInterval 的返回值
const uploadAudioTime = ref(null); // 音频时长
// 点击上传input
function handleFileClick(e) {
stopRecording();
duration.value = 0;
showAudioWhich.value = 0;
audioUrl.value = null;
audioData.value = null;
@@ -2467,6 +2515,29 @@ onUnmounted(() => {
}
}
.card2 {
.overtimeTips {
font-size: 16px;
// width: 60%;
// display: inline-block;
padding: 5px;
margin-bottom: 10px;
background-color: #ccc;
border-radius: 5px;
line-height: 20px;
color: #000;
text-align: center;
img {
width: 16px;
height: 16px;
vertical-align: text-top;
margin-right: 5px;
}
border: none;
box-shadow: none;
&:hover {
transform: translateY(0);
}
}
padding: 10px;
.el-icon {
flex: 1;
@@ -2570,6 +2641,26 @@ onUnmounted(() => {
.card3 {
width: 100%;
padding: 10px;
.overtimeTips {
font-size: 16px;
// width: 60%;
// display: inline-block;
padding: 5px;
margin-bottom: 10px;
background-color: #ccc;
border-radius: 5px;
line-height: 20px;
color: #000;
text-align: center;
img {
width: 16px;
height: 16px;
vertical-align: text-top;
margin-right: 5px;
}
border: none;
box-shadow: none;
}
.el-icon {
vertical-align: text-top;
}


Loading…
Cancel
Save