DEV Community
·
使用React、RHF和shadcn/ui轻松同步字幕
💡
原文英文，约2200词，阅读约需8分钟。
📝
内容提要
本文介绍了如何使用React和Vite创建一个简单工具，以调整字幕文件（.srt）的时间码，实现与视频的同步。用户可上传字幕文件并输入时间偏移量，工具使用React Hook Form进行表单管理，并通过Zod进行输入验证。
🎯
关键要点
- 本文介绍了如何使用React和Vite创建一个工具来调整字幕文件的时间码。
- 用户可以上传字幕文件并输入时间偏移量以实现与视频的同步。
- 使用React Hook Form进行表单管理，并通过Zod进行输入验证。
- 项目设置包括创建新的React项目并安装所需的依赖项。
- 创建SRTShifterForm组件，允许用户上传SRT文件并应用时间偏移。
- 表单设计分为UI设计和逻辑实现，确保关注点分离。
- 使用Zod定义表单验证规则，确保文件类型和偏移量格式正确。
- 实现文件处理和时间戳重新同步的逻辑，包括下载重新同步的文件。
- 创建简单的Header组件并更新App组件以集成SRTShifterForm。
- 测试应用程序以确保功能正常，包括表单验证和文件上传。
❓
延伸问答
如何使用React和Vite创建字幕同步工具？
可以通过设置新的React项目并安装所需依赖项来创建字幕同步工具，使用React Hook Form进行表单管理，并通过Zod进行输入验证。
用户如何上传字幕文件并调整时间偏移量？
用户可以在SRTShifterForm组件中上传SRT文件，并输入时间偏移量，点击“Shift SRT Subtitles”按钮进行同步。
表单验证是如何实现的？
表单验证使用Zod定义规则，确保上传的文件类型为.srt且文件大小不超过2MB，同时验证时间偏移量的格式和范围。
如何处理上传的字幕文件并重新同步时间戳？
通过FileReader读取文件内容，使用resyncTimestamps函数调整时间戳，并调用downloadResyncedFile方法下载重新同步的文件。
这个工具的主要功能是什么？
该工具的主要功能是通过调整字幕文件的时间码，使其与视频对齐，从而解决字幕不同步的问题。
如何测试这个字幕同步工具？
可以通过运行pnpm dev并访问http://localhost:5173/来测试应用程序，上传SRT文件并添加偏移量以查看时间戳是否变化。
➡️
