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