vod-translation-edit-sdk
v1.0.0
Published
Translation Edit SDK for video subtitle translation and editing
Downloads
425
Readme
vod-translation-edit-sdk
视频字幕翻译编辑 SDK，提供视频字幕翻译、编辑、配音等功能的可视化界面组件。
功能特性
- 视频预览播放
- 字幕翻译编辑（对白字幕、画面字）
- TTS 语音合成配音
- 字幕时间轴调整
- 多语言翻译支持
安装
# npm
npm install vod-translation-edit-sdk
# pnpm
pnpm add vod-translation-edit-sdk使用方式
ESM 模块方式（推荐）
适用于 Webpack、Vite 等现代打包工具项目。
import TranslationEditSDK from 'vod-translation-edit-sdk';
import 'vod-translation-edit-sdk/esm/index.css';
// 初始化 SDK
const sdk = new TranslationEditSDK('#container', {
taskId: 'your-task-id',
exportBtnText: '导出视频',
// 自定义语言映射（可选，用于扩展或覆盖默认语言显示名称）
languageMap: {
'vi-VN': '越南语',
'id-ID': '印尼语'
},
// 获取翻译任务详情
getTranslationDetail: async ({taskId}) => {
const response = await fetch(`/api/translation/${taskId}`);
return response.json();
},
// 获取 TTS 配音
getTranslationTTS: async params => {
const response = await fetch('/api/tts', {
method: 'POST',
body: JSON.stringify(params)
});
return response.json();
},
// 获取翻译文本
getTranslationSubtitle: async params => {
const response = await fetch('/api/translate', {
method: 'POST',
body: JSON.stringify(params)
});
return response.json();
},
// 保存翻译结果
updateTranslation: async params => {
await fetch('/api/translation/update', {
method: 'POST',
body: JSON.stringify(params)
});
},
// 创建翻译任务
createTranslationTask: async ({taskId}) => {
await fetch(`/api/translation/${taskId}/create`, {
method: 'POST'
});
}
});
// 销毁 SDK
sdk.destroy();UMD 方式（浏览器直接引入）
适用于无构建工具的传统项目或需要通过 <script> 标签引入的场景。
<!DOCTYPE html>
<html>
<head>
<!-- 引入样式 -->
<link rel="stylesheet" href="path/to/vod-translation-edit-sdk/lib/translation-edit-sdk.css" />
</head>
<body>
<div id="container" style="width: 100%; height: 100vh;"></div>
<!-- 引入 React（必需） -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- 引入 SDK -->
<script src="path/to/vod-translation-edit-sdk/lib/translation-edit-sdk.min.js"></script>
<script>
var sdk = new TranslationEditSDK('#container', {
taskId: 'your-task-id',
getTranslationDetail: function (params) {
return fetch('/api/translation/' + params.taskId).then(function (r) {
return r.json();
});
},
getTranslationTTS: function (params) {
return fetch('/api/tts', {
method: 'POST',
body: JSON.stringify(params)
}).then(function (r) {
return r.json();
});
},
getTranslationSubtitle: function (params) {
return fetch('/api/translate', {
method: 'POST',
body: JSON.stringify(params)
}).then(function (r) {
return r.json();
});
},
updateTranslation: function (params) {
return fetch('/api/translation/update', {
method: 'POST',
body: JSON.stringify(params)
});
},
createTranslationTask: function (params) {
return fetch('/api/translation/' + params.taskId + '/create', {
method: 'POST'
});
}
});
</script>
</body>
</html>API
构造函数
new TranslationEditSDK(el: HTMLElement | string, options: TranslationEditSDKOptions)参数：
| 参数 | 类型 | 必填 | 说明 |
| ------- | --------------------------- | ---- | --------------------- |
| el | HTMLElement \| string | 是 | 容器元素或 CSS 选择器 |
| options | TranslationEditSDKOptions | 是 | 配置选项 |
TranslationEditSDKOptions
| 属性 | 类型 | 必填 | 说明 |
| ---------------------- | ------------------------ | ---- | ------------------------------------------ |
| taskId | string | 是 | 翻译任务 ID |
| exportBtnText | string | 否 | 导出按钮文字，默认为"导出至视频列表" |
| languageMap | Record<string, string> | 否 | 语言映射表，用于扩展或覆盖默认语言显示名称 |
| getTranslationDetail | Function | 是 | 获取翻译任务详情的回调函数 |
| getTranslationTTS | Function | 是 | 生成 TTS 配音的回调函数 |
| getTranslationSubtitle | Function | 是 | 获取翻译文本的回调函数 |
| updateTranslation | Function | 是 | 保存翻译结果的回调函数 |
| createTranslationTask | Function | 是 | 创建翻译任务的回调函数 |
实例方法
destroy()
销毁 SDK 实例，清理资源。
sdk.destroy();回调函数类型定义
getTranslationDetail
getTranslationDetail: (params: {taskId: string}) => Promise<TranslationDetail>;getTranslationTTS
getTranslationTTS: (params: TranslationTTSParams) => Promise<TranslationTTSResponse>;
interface TranslationTTSParams {
taskId: string; // 任务 ID
targetLanguage: string; // 目标语言
speaker: string; // 说话人
text: string; // 翻译文本
}
interface TranslationTTSResponse {
vocalsUrl: string; // 语音文件 URL
durationInMilliSeconds: number; // 语音时长（毫秒）
key: string; // 语音文件 key
}getTranslationSubtitle
getTranslationSubtitle: (params: TranslationSubtitleParams) => Promise<TranslationSubtitleResponse>;
interface TranslationSubtitleParams {
sourceLanguage: string; // 源语言
targetLanguage: string; // 目标语言
text: string; // 待翻译文本
}
interface TranslationSubtitleResponse {
translatedText: string; // 翻译后的文本
}updateTranslation
updateTranslation: (params: UpdateTranslationParams) => Promise<void>;
interface UpdateTranslationParams {
taskId: string;
translatedSegments: {
dialogSubtitles: TranslationDialogSubtitle[]; // 对白字幕
nonDialogSubtitles: TranslationNonDialogSubtitle[]; // 画面字
};
}createTranslationTask
createTranslationTask: (params: {taskId: string}) => Promise<void>;languageMap 默认值
SDK 内置了常用语言的映射，可通过 languageMap 配置项扩展或覆盖：
{
'zh-CN': '中文',
'en-US': '英文',
'fr-FR': '法语',
'de-DE': '德语',
'es-ES': '西班牙语',
'pt-PT': '葡萄牙语',
'ru-RU': '俄语',
'ja-JP': '日语',
'ko-KR': '韩语',
'th-TH': '泰语',
'ar-SA': '阿拉伯语',
'zh-HK': '中文（香港）',
'zh-TW': '中文（台湾腔）'
}依赖要求
Peer Dependencies
使用 ESM 方式时，需要确保项目中安装以下依赖：
{
"react": ">= 18.0.0",
"react-dom": ">= 18.0.0",
"acud": ">= 1.6.6",
"acud-icon": ">= 1.0.8",
"ahooks": ">= 3.7.8",
"lodash": ">= 4.17.23",
"classnames": ">= 2.5.1",
"uuid": ">= 10.0.0",
"moment": ">= 2.30.1"
}UMD 方式外部依赖
使用 UMD 方式时，需要在页面中预先引入：
- React 18+
- ReactDOM 18+