@@ -96,6 +96,11 @@ const routes = [ | |||
name: 'chatgpt', | |||
component: () => import("@/views/chatgpt/chatgpt"), | |||
}, | |||
{ | |||
path: '/chatgpt-getmp3', | |||
name: 'chatgpt-getmp3', | |||
component: () => import("@/views/chatgpt/chatgpt-getmp3"), | |||
}, | |||
, | |||
// 音频new | |||
{ | |||
@@ -0,0 +1,59 @@ | |||
<template> | |||
<div> | |||
<input type="file" ref="fileInput" @change="handleFileSelect" accept="video/*" /> | |||
<video ref="videoPlayer" controls style="width: 200px; height: 200px"></video> | |||
<button @click="extractAudio">提取音频</button> | |||
<button @click="downloadAudio">下载音频</button> | |||
</div> | |||
</template> | |||
<script> | |||
import fluentffmpeg from 'fluent-ffmpeg'; | |||
export default { | |||
data() { | |||
return { | |||
videoFile: null, | |||
audioBlob: null | |||
}; | |||
}, | |||
methods: { | |||
handleFileSelect(event) { | |||
this.videoFile = event.target.files[0]; | |||
this.previewVideo(); | |||
}, | |||
previewVideo() { | |||
const videoPlayer = this.$refs.videoPlayer; | |||
videoPlayer.src = URL.createObjectURL(this.videoFile); | |||
}, | |||
extractAudio() { | |||
const fileInput = this.$refs.fileInput; | |||
const videoFile = fileInput.files[0]; | |||
const reader = new FileReader(); | |||
reader.onload = e => { | |||
const arrayBuffer = e.target.result; | |||
// 使用 fluent-ffmpeg 提取视频音频 | |||
fluentffmpeg(arrayBuffer) | |||
.noVideo() | |||
.format('mp3') | |||
.on('end', () => { | |||
const audioArrayBuffer = fs.readFileSync('output.mp3'); | |||
this.audioBlob = new Blob([audioArrayBuffer], { type: 'audio/mp3' }); | |||
}) | |||
.saveToFile('output.mp3'); | |||
}; | |||
reader.readAsArrayBuffer(videoFile); | |||
}, | |||
downloadAudio() { | |||
if (this.audioBlob) { | |||
const downloadLink = document.createElement('a'); | |||
downloadLink.href = URL.createObjectURL(this.audioBlob); | |||
downloadLink.download = 'audio.mp3'; | |||
downloadLink.click(); | |||
} | |||
} | |||
} | |||
}; | |||
</script> |
@@ -0,0 +1,55 @@ | |||
<!-- <template> | |||
<div> | |||
<input type="file" ref="videoInput" @change="handleVideoUpload" accept="video/*" /> | |||
<div v-if="videoUrl"> | |||
<video :src="videoUrl" controls style="width: 200px; height: 200px"></video> | |||
</div> | |||
<button @click="extractAudio" :disabled="!videoUrl">提取音频</button> | |||
<button @click="downloadAudio" :disabled="!audioUrl">下载音频</button> | |||
</div> | |||
</template> | |||
<script> | |||
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; | |||
export default { | |||
data() { | |||
return { | |||
ffmpeg: null, | |||
videoUrl: '', | |||
audioUrl: '' | |||
}; | |||
}, | |||
mounted() { | |||
this.ffmpeg = createFFmpeg({ | |||
log: true | |||
}); | |||
this.ffmpeg.load(); | |||
}, | |||
methods: { | |||
handleVideoUpload(event) { | |||
const file = event.target.files[0]; | |||
this.videoUrl = URL.createObjectURL(file); | |||
}, | |||
async extractAudio() { | |||
const file = this.$refs.videoInput.files[0]; | |||
const inputPath = '/input' + file.name; | |||
const outputPath = '/output.mp3'; | |||
await this.ffmpeg.write(inputPath, await fetchFile(file)); | |||
await this.ffmpeg.run('-i', inputPath, '-vn', '-acodec', 'libmp3lame', outputPath); | |||
const data = await this.ffmpeg.read(outputPath); | |||
const audioBlob = new Blob([data.buffer], { type: 'audio/mp3' }); | |||
this.audioUrl = URL.createObjectURL(audioBlob); | |||
}, | |||
downloadAudio() { | |||
const link = document.createElement('a'); | |||
link.href = this.audioUrl; | |||
link.download = 'audio.mp3'; | |||
link.click(); | |||
} | |||
} | |||
}; | |||
</script> --> |
@@ -6,13 +6,15 @@ | |||
<img style="width: 60%; margin-top: 20px" src="../../assets/img/logoh.png" alt="" /> | |||
</div> | |||
<div style="padding: 0 20px"> | |||
<h1 style="margin-top: 30px">提交视频生成成功</h1> | |||
<h1 style="margin-top: 30px">请耐心等待</h1> | |||
<h1 style="margin-top: 20px"> | |||
{{ countdown }}秒后将自动跳转至 | |||
<i @click="$router.push({ path: '/myPage' })">首页</i> | |||
</h1> | |||
<h4 style="display: flex; justify-content: end; margin-top: 20px"> | |||
<div style="margin-top: 10px; padding: 10px 10px 20px; border: 1px dashed #ccc; border-radius: 15px"> | |||
<h1 style="margin-top: 10px">提交视频生成成功</h1> | |||
<h2 style="margin-top: 30px">请耐心等待</h2> | |||
<h2 style="margin-top: 20px"> | |||
{{ countdown }}秒后将自动跳转至 | |||
<i @click="$router.push({ path: '/myPage' })">首页</i> | |||
</h2> | |||
</div> | |||
<h4 style="margin-top: 20px; text-align: center"> | |||
您也可以点击 | |||
<i @click="$router.push('/myPage')" class="wordColor"> 返回 </i> | |||
至 首页 | |||
@@ -82,6 +84,11 @@ export default { | |||
</script> | |||
<style lang="scss" scoped> | |||
h1, | |||
h2 { | |||
text-align: center; | |||
color: #ccc; | |||
} | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||
@@ -3,10 +3,15 @@ | |||
<div id="top"></div> | |||
<HeadTop /> | |||
<div style="padding: 0 20px"> | |||
<h1 style="margin-top: 30px">视频生成失败</h1> | |||
<h1 style="margin-top: 30px; margin-bottom: 10px">失败原因是:</h1> | |||
<div style="text-indent: 2em; font-size: 14px">{{ message }}</div> | |||
<h1 style="margin-top: 20px"> | |||
<div style="display: flex; justify-content: space-around"> | |||
<img style="width: 60%; margin-top: 20px" src="../../assets/img/logoh.png" alt="" /> | |||
</div> | |||
<div style="margin-top: 10px; padding: 10px 10px 20px; border: 1px dashed #ccc; border-radius: 15px"> | |||
<h1 style="margin-top: 10px">视频生成失败</h1> | |||
<h2 style="margin-top: 10px; margin-bottom: 10px">失败原因是:</h2> | |||
<div style="font-size: 14px; text-align: center; color: #ccc">{{ message }}</div> | |||
</div> | |||
<h2 style="margin-top: 20px"> | |||
<i | |||
@click=" | |||
$router.push({ | |||
@@ -20,8 +25,8 @@ | |||
class="wordColor"> | |||
重新编辑 | |||
</i> | |||
</h1> | |||
<h4 style="display: flex; justify-content: end; margin-top: 20px"> | |||
</h2> | |||
<h4 style="margin-top: 20px; text-align: center"> | |||
您也可以点击 | |||
<i @click="$router.push(`myPage`)" class="wordColor"> 返回 </i> | |||
至 首页 | |||
@@ -75,6 +80,15 @@ export default { | |||
</script> | |||
<style lang="scss" scoped> | |||
h1, | |||
h2 { | |||
text-align: center; | |||
color: #ccc; | |||
i { | |||
width: 100%; | |||
text-align: center; | |||
} | |||
} | |||
.page { | |||
transform: translateX(30%); | |||
opacity: 0; | |||