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