Simple HTML and JavaScript program to create a video subtitle and save as srt file

Here’s a simple HTML + JavaScript program that allows you to add subtitle text to an HTML video at specific times and save the result as an .srt file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Subtitle Editor</title>
</head>
<body>
    <h2>Video Subtitle Editor</h2>
    <video id="video" width="600" controls>
        <source src="your-video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <br>
    <label>Start Time (seconds):</label>
    <input type="number" id="startTime" step="0.1"><br>
    <label>End Time (seconds):</label>
    <input type="number" id="endTime" step="0.1"><br>
    <label>Subtitle Text:</label>
    <input type="text" id="subtitleText"><br>
    <button onclick="addSubtitle()">Add Subtitle</button>
    <button onclick="saveSRT()">Save as SRT</button>
    <h3>Subtitles:</h3>
    <pre id="subtitleList"></pre>

    <script>
        let subtitles = [];

        function addSubtitle() {
            let startTime = parseFloat(document.getElementById('startTime').value);
            let endTime = parseFloat(document.getElementById('endTime').value);
            let text = document.getElementById('subtitleText').value;

            if (!isNaN(startTime) && !isNaN(endTime) && text.trim() !== '') {
                subtitles.push({ startTime, endTime, text });
                updateSubtitleList();
            }
        }

        function formatTime(seconds) {
            let date = new Date(seconds * 1000);
            return date.toISOString().substr(11, 8) + "," + ("000" + date.getMilliseconds()).slice(-3);
        }

        function updateSubtitleList() {
            let list = document.getElementById('subtitleList');
            list.innerHTML = '';
            subtitles.forEach((sub, index) => {
                list.innerHTML += `${index + 1}\n${formatTime(sub.startTime)} --> ${formatTime(sub.endTime)}\n${sub.text}\n\n`;
            });
        }

        function saveSRT() {
            let srtContent = subtitles.map((sub, index) => 
                `${index + 1}\n${formatTime(sub.startTime)} --> ${formatTime(sub.endTime)}\n${sub.text}\n`
            ).join('\n');

            let blob = new Blob([srtContent], { type: "text/plain" });
            let a = document.createElement("a");
            a.href = URL.createObjectURL(blob);
            a.download = "subtitles.srt";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
    </script>
</body>
</html>

This program lets users enter subtitles with start and end times, displays them in SRT format, and allows downloading the subtitle file.

Post Views: 200