|
|
@@ -41,7 +41,8 @@ |
|
|
|
</div> |
|
|
|
<div v-if="!compressionImgLoad" class="upload inmiddle"> |
|
|
|
<p> |
|
|
|
<el-icon><i-ep-FolderAdd /></el-icon> |
|
|
|
<!-- <el-icon><i-ep-FolderAdd /></el-icon> --> |
|
|
|
<img src="../../assets/img/uploadImg.png" alt="" /> |
|
|
|
</p> |
|
|
|
<span>{{ $t("createVideo.uploadImgTip1") }}</span> |
|
|
|
<span>{{ $t("createVideo.uploadImgTip2") }}</span> |
|
|
@@ -334,7 +335,7 @@ |
|
|
|
v-for="item in soundOptions" |
|
|
|
:key="item.value" |
|
|
|
:label=" |
|
|
|
item.displayName + ` (${item.sex == 1 ? '男' : '女'})` |
|
|
|
item.displayName + ` (${item.sex == 1 ? '♂' : '♀'})` |
|
|
|
" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
@@ -393,7 +394,10 @@ |
|
|
|
audioUrl && showAudioWhich == 1 ? 'uploadAudioAvtion2' : '' |
|
|
|
" |
|
|
|
> |
|
|
|
<el-icon><i-ep-FolderAdd /></el-icon> |
|
|
|
<!-- <el-icon><i-ep-FolderAdd /></el-icon> --> |
|
|
|
<!-- <div> |
|
|
|
</div> --> |
|
|
|
<img src="../../assets/img/uploadImg.png" alt="" /> |
|
|
|
<!-- fileInput.value.files[0] e.target.value = null --> |
|
|
|
<input |
|
|
|
accept="audio/*" |
|
|
@@ -424,6 +428,12 @@ |
|
|
|
@click="startRecording" |
|
|
|
> |
|
|
|
{{ $t("createVideo.startRecorded") }} |
|
|
|
<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> |
|
|
|
<button |
|
|
|
class="pointer" |
|
|
@@ -431,6 +441,9 @@ |
|
|
|
:disabled="isRecording" |
|
|
|
> |
|
|
|
{{ $t("createVideo.stopRecorded") }} |
|
|
|
<div class="pointer"> |
|
|
|
<el-icon><i-ep-SwitchButton /></el-icon> |
|
|
|
</div> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<div class="AudioBox" v-if="audioUrl && showAudioWhich == 2"> |
|
|
@@ -492,12 +505,15 @@ |
|
|
|
</div> |
|
|
|
<!-- 上传音乐 --> |
|
|
|
<div v-if="musicTabActive == 2" class="uploadVideo"> |
|
|
|
<el-icon><i-ep-FolderAdd /></el-icon> |
|
|
|
<!-- <el-icon><i-ep-FolderAdd /></el-icon> --> |
|
|
|
<div class="imgInCenter"> |
|
|
|
<img src="../../assets/img/uploadImg.png" alt="" /> |
|
|
|
</div> |
|
|
|
<input |
|
|
|
accept="audio/*" |
|
|
|
type="file" |
|
|
|
ref="fileMusicInput" |
|
|
|
@click="e.target.value = null" |
|
|
|
@click="handleFileMusicClick" |
|
|
|
@change="uploadMusic" |
|
|
|
/> |
|
|
|
</div> |
|
|
@@ -644,8 +660,9 @@ |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
<!-- 试听的mp3 --> |
|
|
|
<div style="opacity: 0; width: 0"> |
|
|
|
<audio autoplay :src="previewAudioUrl" id="audio"></audio> |
|
|
|
<!-- style="opacity: 0; width: 0" --> |
|
|
|
<div> |
|
|
|
<audio muted autoplay :src="previewAudioUrl" id="audio"></audio> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
@@ -999,6 +1016,7 @@ async function getPreviewAudio() { |
|
|
|
} |
|
|
|
previewAudioUrl.value = res.data.data; |
|
|
|
let audioA = document.getElementById("audio"); |
|
|
|
audioA.muted = false; // 将 muted 属性设置为 false |
|
|
|
audioA.addEventListener("loadedmetadata", function () { |
|
|
|
audioA.play(); |
|
|
|
}); |
|
|
@@ -1118,22 +1136,22 @@ const handleFileChange = async () => { |
|
|
|
// 进行大小时长限制 |
|
|
|
await countAudioTime(audio2); |
|
|
|
// 限制60秒 |
|
|
|
if (uploadAudioTime.value > 960) { |
|
|
|
if (uploadAudioTime.value > 60) { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `上传失败,您上传的文件时长与您的权益不匹配` |
|
|
|
: `The upload failed because the duration of the file you uploaded did not match your entitlements` |
|
|
|
? `上传失败,上传音频时长最多为60秒` |
|
|
|
: `Description Failed to upload audio files. The maximum duration of uploading audio files is 60 seconds` |
|
|
|
); |
|
|
|
audioUrl.value = null; |
|
|
|
audioData.value = null; |
|
|
|
return; |
|
|
|
} |
|
|
|
// 限制3mb |
|
|
|
if (file.size / 1048576 > 93) { |
|
|
|
if (file.size / 1048576 > 3) { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `上传失败,您上传的文件大小与您的权益不匹配` |
|
|
|
: `Upload failed, the file size you uploaded does not match your entitlements` |
|
|
|
? `上传失败,上传音频大小最大为3MB` |
|
|
|
: `Description Upload failed. The maximum size of uploaded audio is 3MB` |
|
|
|
); |
|
|
|
audioUrl.value = null; |
|
|
|
audioData.value = null; |
|
|
@@ -1163,7 +1181,10 @@ async function uploadProgress(videoId, isSaveVideo) { |
|
|
|
if (res.data == "complete") { |
|
|
|
clearInterval(intervalId); |
|
|
|
try { |
|
|
|
const res2 = await saveAudioApi({ videoId: videoId }); |
|
|
|
const res2 = await saveAudioApi({ |
|
|
|
videoId: videoId, |
|
|
|
sendType: showAudioWhich.value, |
|
|
|
}); |
|
|
|
afterSaveAudioId.value = res2.data.id; // 得到id |
|
|
|
} catch (error) { |
|
|
|
ElMessage.error(error); |
|
|
@@ -1360,6 +1381,9 @@ async function findById(findId) { |
|
|
|
const res = await findByIdApi(findId); |
|
|
|
id.value = res.data.id; |
|
|
|
title.value = res.data.title; //标题回显 |
|
|
|
showAudioWhich.value = res.data.voiceMaterial |
|
|
|
? res.data.voiceMaterial.sendType |
|
|
|
: null; |
|
|
|
faceItemActive.value = res.data.personPhotoId; //aiface高亮和图片id |
|
|
|
tabFrom.value = res.data.voiceFrom; //输入文案还是上传mp3模式 |
|
|
|
textareaContent.value = res.data.paperwork; //文案内容 |
|
|
@@ -1368,6 +1392,7 @@ async function findById(findId) { |
|
|
|
audioUrl.value = res.data.voiceMaterialUrl; // mp3回显 |
|
|
|
musicItemAction.value = res.data.musicId; //音乐id回显 |
|
|
|
language.value = res.data.voiceInfo ? res.data.voiceInfo.languageId : null; |
|
|
|
|
|
|
|
if (language.value) { |
|
|
|
await chooseType(language.value); |
|
|
|
} |
|
|
@@ -1444,6 +1469,12 @@ function handleTime(time) { |
|
|
|
} |
|
|
|
return m + ":" + s; |
|
|
|
} |
|
|
|
// 点击上传音乐 |
|
|
|
// 点击上传input |
|
|
|
function handleFileMusicClick(e) { |
|
|
|
musicData.value = null; |
|
|
|
e.target.value = null; |
|
|
|
} |
|
|
|
// 选择文件上传音乐 |
|
|
|
async function uploadMusic() { |
|
|
|
const file = fileMusicInput.value.files[0]; |
|
|
@@ -1451,6 +1482,29 @@ async function uploadMusic() { |
|
|
|
musicData.value = file; |
|
|
|
let formData = new FormData(); |
|
|
|
formData.append("file", musicData.value, file.name + ".mp3"); |
|
|
|
const videoUrl = URL.createObjectURL(file); |
|
|
|
const audio2 = new Audio(); |
|
|
|
audio2.src = videoUrl; |
|
|
|
// 进行大小时长限制 |
|
|
|
await countAudioTime(audio2); |
|
|
|
// 限制60秒 |
|
|
|
if (uploadAudioTime.value > 60) { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `上传失败,上传音频时长最多为60秒` |
|
|
|
: `Description Failed to upload audio files. The maximum duration of uploading audio files is 60 seconds` |
|
|
|
); |
|
|
|
return; |
|
|
|
} |
|
|
|
// 限制3mb |
|
|
|
if (file.size / 1048576 > 3) { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `上传失败,上传音频大小最大为3MB` |
|
|
|
: `Description Upload failed. The maximum size of uploaded audio is 3MB` |
|
|
|
); |
|
|
|
return; |
|
|
|
} |
|
|
|
try { |
|
|
|
const res = await videoUpload(formData); |
|
|
|
if (res) { |
|
|
@@ -1777,21 +1831,25 @@ onUnmounted(() => { |
|
|
|
font-size: 50px; |
|
|
|
line-height: 100px; |
|
|
|
text-align: center; |
|
|
|
background-color: #ccc; |
|
|
|
background-color: rgba(204, 204, 204, 0.1); |
|
|
|
border-radius: 30px; |
|
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px; |
|
|
|
box-shadow: rgba(108, 120, 238, 0.3) 0px 0px 5px 5px; |
|
|
|
p { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
z-index: -1; |
|
|
|
opacity: 0.1; |
|
|
|
opacity: 0.5; |
|
|
|
.el-icon { |
|
|
|
width: 200px; |
|
|
|
height: 200px; |
|
|
|
font-size: 150px; |
|
|
|
} |
|
|
|
img { |
|
|
|
max-width: 60%; |
|
|
|
max-height: 60%; |
|
|
|
} |
|
|
|
} |
|
|
|
span { |
|
|
|
display: block; |
|
|
@@ -2232,7 +2290,7 @@ onUnmounted(() => { |
|
|
|
padding: 20px; |
|
|
|
// margin-top: 30px; |
|
|
|
margin-bottom: 20px; |
|
|
|
height: 70px; |
|
|
|
// height: 70px; |
|
|
|
.btnBox { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
@@ -2245,16 +2303,20 @@ onUnmounted(() => { |
|
|
|
} |
|
|
|
button { |
|
|
|
border-radius: 10px; |
|
|
|
height: 30px; |
|
|
|
// height: 30px; |
|
|
|
line-height: 22px; |
|
|
|
padding: 5px 10px; |
|
|
|
background-color: #fff; |
|
|
|
transition: all 0.3s; |
|
|
|
cursor: pointer; |
|
|
|
&:hover { |
|
|
|
background-color: #000; |
|
|
|
|
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.el-icon { |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.uploadAudioAvtion { |
|
|
@@ -2275,6 +2337,11 @@ onUnmounted(() => { |
|
|
|
font-weight: 700; |
|
|
|
line-height: 100px; |
|
|
|
transition: all 0.3s; |
|
|
|
img { |
|
|
|
margin: auto; |
|
|
|
max-width: 80%; |
|
|
|
max-height: 80%; |
|
|
|
} |
|
|
|
input { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|