https://github.com/egesiapres/subeditor-app

https://github.com/egesiapres/subeditor-app

ffmpeg git javascript material-ui netlify react sessionstorage subtitles videojs vite wavesurfer-js

Last synced: 15 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/egesiapres/subeditor-app
• Owner: Egesiapres
• Created: 2024-10-17T16:48:19.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-11-18T18:17:50.000Z (about 2 months ago)
• Last Synced: 2024-12-22T02:54:37.943Z (15 days ago)
• Topics: ffmpeg, git, javascript, material-ui, netlify, react, sessionstorage, subtitles, videojs, vite, wavesurfer-js
• Language: JavaScript
• Homepage: https://subeditor.netlify.app/#/subtitles-editor
• Size: 374 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Subtitles Editor App

### Description

A personal project to improve my browser built-in API knowledge, experiment with JS libraries that deal with different media types, and strengthen my React/Material UI skills.

### 1. Scope

The goal was to create an app able to deal with different media types, displaying, manipulating, and handle them in synchro.

The app is able to:

- support the upload of video (.mp4) and subtitle (.srt) files

- obtain an audio file (.mp3) converting the uploaded video

- display the uploaded subtitles into a table

- the subtitles table allows the user to:

  - visualize start/end time, text and duration of a subtile

  - move to a specific moment of the video/audio waveform clicking on start/end time of a subtitle

  - edit the start/end time and the text of a subtitle

  - merge two consecutive subtitles

  - highlight the right row when the video/audio waveform is playing

- play the uploaded video trough a player (in synchro with the audio waveform)

- display the waveform of the obtained audio and play it (in synchro with the video)

Browser built-in APIs:

- sessionStorage

External libraries:

- [subtitle.js](https://www.npmjs.com/package/subtitle)

- [video.js](https://videojs.com/)

- [ffmpeg.wasm](https://ffmpegwasm.netlify.app/)

- [wavesurfer.js](https://wavesurfer.xyz/)

### 2. Tools

React, JS, Material UI, Vite, Netlify