congzc 2 年之前
父節點
當前提交
a0cd3ee7ae
共有 1 個檔案被更改,包括 104 行新增13 行删除
  1. +104
    -13
      src/views/createVideo/index.vue

+ 104
- 13
src/views/createVideo/index.vue 查看文件

@@ -310,16 +310,11 @@
v-for="item in soundOptions" v-for="item in soundOptions"
:key="item.value" :key="item.value"
:label=" :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) returnAge(item.ageType)
" "
:value="item.id" :value="item.id"
@@ -336,11 +331,11 @@
<el-option <el-option
v-for="item in soundStyleOptions" v-for="item in soundStyleOptions"
:key="item.name" :key="item.name"
:label="item.name"
:label="lanChange == 'zh-cn' ? item.name : item.engName"
:value="item.name" :value="item.name"
> >
<div style="padding: 0 20px"> <div style="padding: 0 20px">
{{ item.name }}
{{ lanChange == "zh-cn" ? item.name : item.engName }}
<span <span
style="float: right; cursor: pointer" style="float: right; cursor: pointer"
@click.stop="ListenVoices(item.url)" @click.stop="ListenVoices(item.url)"
@@ -387,6 +382,15 @@
<!-- ------------------------ 2 --> <!-- ------------------------ 2 -->
<el-tab-pane :label="$t('createVideo.uploadAudio')"> <el-tab-pane :label="$t('createVideo.uploadAudio')">
<div class="card2"> <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> <p>
<el-icon class="icon-Headset"><i-ep-Headset /></el-icon> <el-icon class="icon-Headset"><i-ep-Headset /></el-icon>
@@ -414,6 +418,15 @@
<audio controls :src="audioUrl" id="uploadAudio"></audio> <audio controls :src="audioUrl" id="uploadAudio"></audio>
</div> </div>
</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上传语音 --> <!-- 录制MP3上传语音 -->
<p> <p>
<el-icon class="icon-Mic"><i-ep-Mic /></el-icon> <el-icon class="icon-Mic"><i-ep-Mic /></el-icon>
@@ -435,10 +448,12 @@
<div v-if="isRecording" class="pointer"> <div v-if="isRecording" class="pointer">
<el-icon><i-ep-VideoPlay /></el-icon> <el-icon><i-ep-VideoPlay /></el-icon>
</div> </div>

<div v-if="!isRecording" class="pointer"> <div v-if="!isRecording" class="pointer">
<el-icon><i-ep-VideoPause /></el-icon> <el-icon><i-ep-VideoPause /></el-icon>
</div> </div>
</button> </button>
{{ formatTime(duration) }}
<button <button
class="pointer" class="pointer"
@click="stopRecording" @click="stopRecording"
@@ -485,6 +500,14 @@
<!-- ----------------------- 3 --> <!-- ----------------------- 3 -->
<el-tab-pane :label="$t('createVideo.music')"> <el-tab-pane :label="$t('createVideo.music')">
<div class="card3"> <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> <p>
<el-icon class="icon-Headset"><i-ep-Headset /></el-icon> <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 audioUrl = ref(null); // audio控件的url
const audioData = ref(""); const audioData = ref("");
const videoId = ref(null); //上传mp3的videoId,创建视频会用到 const videoId = ref(null); //上传mp3的videoId,创建视频会用到

const duration = ref(""); //实时显示录音时长
const getduration = ref(null);
const startRecording = async () => { const startRecording = async () => {
if (showAudioWhich.value != 2) { if (showAudioWhich.value != 2) {
audioUrl.value = null; audioUrl.value = null;
@@ -1165,8 +1189,30 @@ const startRecording = async () => {
} }
try { try {
await recorder.start(); await recorder.start();
duration.value = 0;
console.log("Recording started"); console.log("Recording started");
isRecording.value = false; 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) { } catch (error) {
console.error(error); console.error(error);
} }
@@ -1225,6 +1271,8 @@ let intervalId = null; // 用于存储 setInterval 的返回值
const uploadAudioTime = ref(null); // 音频时长 const uploadAudioTime = ref(null); // 音频时长
// 点击上传input // 点击上传input
function handleFileClick(e) { function handleFileClick(e) {
stopRecording();
duration.value = 0;
showAudioWhich.value = 0; showAudioWhich.value = 0;
audioUrl.value = null; audioUrl.value = null;
audioData.value = null; audioData.value = null;
@@ -2467,6 +2515,29 @@ onUnmounted(() => {
} }
} }
.card2 { .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; padding: 10px;
.el-icon { .el-icon {
flex: 1; flex: 1;
@@ -2570,6 +2641,26 @@ onUnmounted(() => {
.card3 { .card3 {
width: 100%; width: 100%;
padding: 10px; 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 { .el-icon {
vertical-align: text-top; vertical-align: text-top;
} }


Loading…
取消
儲存