Skip to content

L
live-management-web
Commit 163f7c92 by haojie
Options

音频切割交给python

parent 81203f07
Showing with 75 additions and 49 deletions
package.json
......@@ -12,7 +12,6 @@
"lint:fix": "eslint --ext .vue,.js,jsx,.ts,.tsx ./ --max-warnings 0 --fix",
"stylelint": "stylelint src/**/*.{html,vue,sass,less}",
"stylelint:fix": "stylelint --fix src/**/*.{html,vue,vss,sass,less}",
"prepare": "husky install",
"site:preview": "npm run build && cp -r dist _site",
"test": "echo \"no test specified,work in process\""
},
......@@ -21,7 +20,6 @@
"dayjs": "^1.10.6",
"default-passive-events": "^2.0.0",
"js-cookie": "^3.0.1",
"lamejs": "^1.2.1",
"tdesign-vue-next": "^0.22.1",
"uuid": "^9.0.0",
"vue": "^3.2.31",
......@@ -34,8 +32,8 @@
"@typescript-eslint/eslint-plugin": "^6.2.0",
"@typescript-eslint/parser": "^6.2.0",
"@vitejs/plugin-legacy": "^4.1.0",
"@vitejs/plugin-vue": "^1.3.0",
"@vitejs/plugin-vue-jsx": "^1.1.7",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"axios": "^0.24.0",
"eslint": "^8.45.0",
"eslint-plugin-vue": "^9.15.1",
......
src/constants/token.ts
......@@ -132,3 +132,6 @@ export const createLiveRouteKey = 'create_live_route_key';
// 音频上传格式限制
export const audioAccept = 'wav';
// 音频切割间隔时长
export const audioSplitDuration = 300;
src/pages/createLive/index.vue
......@@ -479,7 +479,7 @@ const audioSplit = async () => {
let fileDuration = await getDurationOfAudioFile(row.file.raw);
console.log(fileDuration, '文件时长');
if (fileDuration > audioSplitNum) {
// 开始切割
// 开始切割前先判断文件类型
let result = await splitAudio(row.file.raw, audioSplitNum);
if (result.length) {
// 上传阿里云
......
src/pages/home/index.vue
......@@ -81,9 +81,10 @@ import { getDigitalPeopleList, uploadToAly } from '@/service/Common';
import Button from '@/components/Button.vue';
import { callPyjsInWindow, injectWindow } from '@/utils/pyqt';
import { jumpToCreateLivePage } from '@/router/jump';
import { audioMerge, downloadAudioList } from '@/utils/audio';
import { randomIntFormList } from '@/utils/tool';
import { audioMerge, downloadAudioList, splitAudio } from '@/utils/audio';
import { getFile, randomIntFormList } from '@/utils/tool';
import { useStore } from 'vuex';
import { audioSplitDuration } from '@/constants/token';
const router = useRouter();
const store = useStore();
......@@ -204,27 +205,28 @@ const startTest = async () => {
// 'http://nls-cloud-cn-shanghai.oss-cn-shanghai.aliyuncs.com/jupiter-flow/tmp/ad08fa0a70ae4ea88d11ad5e394ce045.wav?Expires=1692149777&OSSAccessKeyId=LTAIUpwNp2H7pBG5&Signature=D93qMT1DovslSOVa9oufV2cGZxE%3D',
// 'http://nls-cloud-cn-shanghai.oss-cn-shanghai.aliyuncs.com/jupiter-flow/tmp/ad08fa0a70ae4ea88d11ad5e394ce045.wav?Expires=1692149777&OSSAccessKeyId=LTAIUpwNp2H7pBG5&Signature=D93qMT1DovslSOVa9oufV2cGZxE%3D',
// ];
// let blob = await audioMerge(list);
// console.log(blob);
// if (blob) {
// // uploadToAly([blob]);
// } else {
// console.log('文件错误');
// }
// let list = [
// 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-114e482462-6047-47be-a30c-b85a17c95665.mp3',
// 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-11efe3f1ea-b445-42e2-93b0-39a70fb7c6f5.mp3',
// 'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-11dd2372d8-73ff-4526-bf59-b1618a3f218f.mp3',
// ];
// const { blobList } = await downloadAudioList(list);
// console.log(blobList, '下载完毕,传给python');
// callPyjsInWindow('mergeAudio', blobList, false, 0, false);
let list = [
'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-11dd2372d8-73ff-4526-bf59-b1618a3f218f.mp3',
];
// 注入一个接收方法
const splitCallback = (url: string[]) => {
console.log(url, '切割后的音频列表');
};
injectWindow('splitAudioCallback', splitCallback);
// 传给python
console.log('通知切割');
callPyjsInWindow('splitAudio', {
url: list[0],
duration: audioSplitDuration,
id: 1,
});
};
onMounted(() => {
// 获取我的数字人
getList();
startTest();
// 发送token，即使重新登录也会回到首页再次发送
callPyjsInWindow('setToken', userToken.value);
});
</script>
......
src/service/Common.ts
......@@ -12,6 +12,7 @@ import { LIVE_AUDIT_STATUS } from './Live';
import { audioMerge, splitAudio } from '@/utils/audio';
import { v4 } from 'uuid';
import { writeLog } from '@/utils/pyqt';
import { audioSplitDuration } from '@/constants/token';
// 阿里云上传配置
export const getUploadConfig = async () => {
......@@ -148,7 +149,7 @@ export const audioStart = async (list: any[], dimensional: boolean = true) => {
let file = await audioMerge(list);
if (file) {
// 开始切割
let split_list = await splitAudio(file, 300);
let split_list = await splitAudio(file, audioSplitDuration);
// 合并后的文件上传
if (split_list && split_list.length) {
let result = await uploadToAly(split_list);
......
src/utils/audio.ts
import audiobufferToWav from 'audiobuffer-to-wav';
import { callPyjsInWindow, writeLog } from '@/utils/pyqt';
// import lamejs from 'lamejs';
import { getFile } from './tool';
import audioConversion from '@/worker/audioConversion.js?worker';
// import lamejs from 'lamejs';
// import audioConversion from '@/worker/audioConversion.js?worker';
// dev
// "@vitejs/plugin-vue": "^1.3.0",
// "@vitejs/plugin-vue-jsx": "^1.1.7",
export const createAudioContext = () => {
return new (window.AudioContext || window.webkitAudioContext)();
......@@ -40,11 +45,13 @@ export const getDurationOfAudioFile = (file: File | string) => {
});
};
// 获取音频文件的类型
export const getAudioFileType = async (url: string) => {
// 获取音频文件的类型(后缀名)
export const getAudioFileType = async (url: string | Blob) => {
if (typeof url === 'string') {
const audio = await getFile(url);
let type = audio.type;
return type;
}
};
// 将blob音频列表转换为buffer
......@@ -104,23 +111,23 @@ function mergeBuffers(bufferList) {
}
// mp3 worker
export const mp3Worker = async (blobList: any[]) => {
return new Promise<Blob>((reslove) => {
// worker
const worker: Worker = new audioConversion();
worker.onmessage = function (event) {
const blob = event.data;
// 结束线程
worker.terminate();
// 处理编码后的数据，例如保存为文件或进行其他操作
reslove(blob);
};
console.log('发送消息');
worker.postMessage({
blobList: blobList,
});
});
};
// export const mp3Worker = async (blobList: any[]) => {
// return new Promise<Blob>((reslove) => {
// // worker
// const worker: Worker = new audioConversion();
// worker.onmessage = function (event) {
// const blob = event.data;
// // 结束线程
// worker.terminate();
// // 处理编码后的数据，例如保存为文件或进行其他操作
// reslove(blob);
// };
// console.log('发送消息');
// worker.postMessage({
// blobList: blobList,
// });
// });
// };
// 导出为 MP3
// export function exportToMp3(bufferList) {
......@@ -217,7 +224,7 @@ export async function audioMerge(filePaths: string[]) {
// const blob = await mp3Worker(blobList);
// return blob;
// 通知python处理
await pyAudioMerge(blobList);
// await pyAudioMerge(blobList);
}
} catch (error) {
writeLog({
......@@ -228,7 +235,9 @@ export async function audioMerge(filePaths: string[]) {
}
}
export const splitAudio = async (audioBlob: Blob, duration: number) => {
// 切割wav格式的音频
export const splitWavAudio = async (audioBlob: Blob, duration: number) => {
console.log('开始切割wav');
const audioContext = new AudioContext();
const audioBufferList = [];
......@@ -261,16 +270,25 @@ export const splitAudio = async (audioBlob: Blob, duration: number) => {
const sourceData = audioBuffer.getChannelData(channel).subarray(startFrame, endFrame);
slicedBuffer.copyToChannel(sourceData, channel);
}
// 将切割后的音频 Buffer 添加到列表中
const wavData = audiobufferToWav(slicedBuffer);
const blob = new Blob([wavData], { type: 'audio/wav' });
const blob = new Blob([wavData], { type: audioBlob.type });
audioBufferList.push(blob);
}
return audioBufferList;
};
export const splitAudio = async (audioBlob: Blob, duration: number) => {
const start = performance.now();
let list = [];
// wav
list = await splitWavAudio(audioBlob, duration);
const end = performance.now();
console.log(`本次切割共耗费:${parseInt((end - start) / 1000 + '')}秒`);
return list;
};
// 导出音频缓冲区为 WAV 文件
function exportBufferAsWav(audioBuffer) {
const numberOfChannels = audioBuffer.numberOfChannels;
......
src/utils/pyqt.ts
......@@ -31,6 +31,10 @@ export const callPyjsInWindow = (
timeout: number = 1000,
toJson: boolean = true,
) => {
if (!window.pyjs) {
console.log('py没有注入');
return;
}
try {
const getValue = () => {
if (toJson) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment