diff --git a/package.json b/package.json
index d58f989..6b00c2f 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"axios": "^1.3.4",
"echarts": "^5.2.2",
"element-plus": "^2.3.1",
+ "js-audio-recorder": "^1.0.7",
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
"path-to-regexp": "^6.2.0",
diff --git a/src/apis/createVideo.js b/src/apis/createVideo.js
new file mode 100644
index 0000000..6d9bc39
--- /dev/null
+++ b/src/apis/createVideo.js
@@ -0,0 +1,22 @@
+import request from "@/utils/request.js";
+
+/**
+ * @description 上传图片
+ * @params ticket
+ * @returns data
+ */
+export function awsImgUpload(formData) {
+ return request({
+ url: `/api/upload/awsImgUpload`,
+ method: 'post',
+ data: formData
+ })
+}
+
+export function awsMp3Upload(formData) {
+ return request({
+ url: `/api/upload/awsImgUpload`,
+ method: 'post',
+ data: formData
+ })
+}
\ No newline at end of file
diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts
index f95a529..d380dbe 100644
--- a/src/lang/package/en.ts
+++ b/src/lang/package/en.ts
@@ -40,7 +40,8 @@ export default {
languages: "Languages",
voices: "Voices",
styles: "Styles",
- reload: "Reload",
+ reselect: "reselect",
+ sureUpload:'Confirm upload',
generateVideo: "Generate Video",
},
diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts
index a37681e..728da26 100644
--- a/src/lang/package/zh-cn.ts
+++ b/src/lang/package/zh-cn.ts
@@ -32,7 +32,7 @@ export default {
createVideo: {
title: "创作视频",
typeScript: "输入文案",
- uploadAudio: "上传视频",
+ uploadAudio: "上传音频",
aiScript: "AI生成文本",
typeTitle: "输入标题",
confirm: "确定",
@@ -40,7 +40,8 @@ export default {
languages: "选择语言",
voices: "选择声音",
styles: "选择风格",
- reload: "重新上传",
+ reselect: "重新选择",
+ sureUpload:'确认上传',
generateVideo: "生成视频",
},
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 45f3b15..0d3a5c4 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -55,6 +55,7 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
// https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component
.left-top-box {
+ height: 80px;
background-color: #000;
}
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index c973cb8..4d4fb74 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -76,7 +76,7 @@ function routerTo(url: RouteLocationRaw) {
diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue
index ffca4c3..91d07f9 100644
--- a/src/views/createVideo/index.vue
+++ b/src/views/createVideo/index.vue
@@ -15,10 +15,15 @@
-
+
+
+
+
@@ -34,7 +39,17 @@
+
-
+
+
@@ -51,10 +66,15 @@
Generate By Ai
@@ -64,19 +84,117 @@
- 111111111111111111
+
+
+
+
+ {{ $t("createVideo.confirm") }}
+
+
+
+
+
+
+
{{ $t("createVideo.languages") }}
+
+
+
+
{{ $t("createVideo.voices") }}
+
+
+
+
{{ $t("createVideo.styles") }}
+
+
+
+
{{
+ $t("createVideo.generateVideo")
+ }}
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传视频
-
+
-
+
import { ref } from "vue";
import { getCurrentInstance } from "vue";
+import Recorder from "js-audio-recorder";
+import axios from "axios";
+import { awsImgUpload, awsMp3Upload } from "@/apis/createVideo";
+import { ElMessage } from "element-plus";
+// 获取AI头像
+const AiFace = ref([]);
+function getAiFace() {
+ axios({
+ url: "https://photo.metavatar.cc/C//api/personPhoto/list?pageNum=1&pageSize=1",
+ method: "get",
+ }).then((res) => {
+ AiFace.value = res.data.data.list;
+ console.log(res.data.data.list);
+ });
+}
+getAiFace();
+
// 标题
let title = ref("");
// 上传图片
let imgUrl = ref("");
-function changeFile(e) {
+const imgData = ref("");
+// 预览图片
+function lookImg(e) {
imgUrl.value = URL.createObjectURL(e.target.files[0]);
+ imgData.value = e.target.files[0];
+}
+// 上传图片
+async function changeFile() {
+ imgUrl.value = URL.createObjectURL(imgData.value);
+ let formData = new FormData();
+ const timestamp = Date.now();
+ formData.append("file", imgData.value, timestamp + ".png");
+ try {
+ const res = await awsImgUpload(formData);
+ ElMessage.success("上传成功!");
+ } catch (error) {
+ ElMessage.error(error);
+ }
}
-// $t在script中的使用
+// 点击aifece
+function setImgUrl(url) {
+ imgUrl.value = url;
+}
-const {
- appContext: {
- config: { globalProperties },
- },
-} = getCurrentInstance();
+// 录制MP3上传语音
+const parameter = {
+ sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
+ sampleRate: 8000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
+ numChannels: 1, // 声道,支持 1 或 2, 默认是1
+};
+const recorder = new Recorder(parameter);
+const isRecording = ref(true);
+const audioUrl = ref(null);
+const audioData = ref("");
+
+const startRecording = async () => {
+ try {
+ await recorder.start();
+ console.log("Recording started");
+ isRecording.value = false;
+ } catch (error) {
+ console.error(error);
+ }
+};
+
+const stopRecording = async () => {
+ try {
+ const recording = await recorder.stop();
+ audioUrl.value = URL.createObjectURL(recorder.getWAVBlob());
+ audioData.value = recorder.getWAVBlob();
+ isRecording.value = true;
+ } catch (error) {
+ console.error(error);
+ }
+};
-const string = "createVideo.typeScript";
-const t = globalProperties.$t(string);
+const playRecording = () => {
+ if (audioUrl.value) {
+ const audio = new Audio(audioUrl.value);
+ audio.play();
+ }
+};
+async function uploadAudio(params) {
+ let formData = new FormData();
+ const timestamp = Date.now();
+ formData.append("file", audioData.value, timestamp + ".mp3");
+ try {
+ const res = await awsMp3Upload(formData);
+ ElMessage.success("上传成功!");
+ } catch (error) {
+ ElMessage.error(error);
+ }
+}
+
+// 上传视频功能
+const fileInput = ref(null);
+const videoSrc = ref(null);
+const handleFileChange = () => {
+ const file = fileInput.value.files[0];
+ if (file) {
+ const videoUrl = URL.createObjectURL(file);
+ videoSrc.value = videoUrl;
+ }
+};
// card3的
-let language = reactive("");
+let language = ref("");
let languageOptions = reactive([
{
@@ -179,6 +385,16 @@ let languageOptions = reactive([
label: "Option2",
},
]);
+
+// $t在script中的使用
+const {
+ appContext: {
+ config: { globalProperties },
+ },
+} = getCurrentInstance();
+
+const string = "createVideo.typeScript";
+const t = globalProperties.$t(string);