| @@ -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; | |||
| } | |||