congzc 2 年之前
父節點
當前提交
d1a0602bc5
共有 5 個文件被更改,包括 153 次插入13 次删除
  1. +5
    -0
      src/router/index.js
  2. +59
    -0
      src/views/chatgpt/chatgpt-getmp3 copy.vue
  3. +55
    -0
      src/views/chatgpt/chatgpt-getmp3.vue
  4. +14
    -7
      src/views/model/videoCreate.vue
  5. +20
    -6
      src/views/model/videoFail.vue

+ 5
- 0
src/router/index.js 查看文件

@@ -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
{


+ 59
- 0
src/views/chatgpt/chatgpt-getmp3 copy.vue 查看文件

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

+ 55
- 0
src/views/chatgpt/chatgpt-getmp3.vue 查看文件

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

+ 14
- 7
src/views/model/videoCreate.vue 查看文件

@@ -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">&nbsp;&nbsp;返回&nbsp;&nbsp;</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;


+ 20
- 6
src/views/model/videoFail.vue 查看文件

@@ -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">&nbsp;&nbsp;返回&nbsp;&nbsp;</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;


Loading…
取消
儲存