Hello friends, today we will be going to Generate Subtitle File Using Html, CSS and JavaScript. I have posted many videos and articles before related to theJavaScript project, now this the something new that we are going to build.
Demo Video of How to Generate Subtitle File Using Html, CSS and JavaScript
Video Tutorial of How To Generate Subtitle File Using HTML, CSS & JavaScript | Part 1
Video Tutorial of How To Generate Subtitle File Using HTML, CSS & JavaScript | Part 2
As you have seen on the given video tutorial of Generate Subtitle File Using Html, CSS and JavaScript, If you are feeling bored watching the given video tutorial of Generate Subtitle File Using Html, CSS and JavaScript then you can copy or download the given codes below:
Generate Subtitle File Using Html, CSS and JavaScript| Free Source Code
To create this program (Generate Subtitle File). First, you need to create three Files one HTML File and one is CSS File and last one JavaScript. After creating these files just paste the following codes in your file.
In the first place, make a HTML document with the name of index.html and paste the given codes in your HTML record. Keep in mind, you’ve to make a document with .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Generate Subtitle</title>
</head>
<body>
<div class="wrapper">
<div class="form">
<header>
<h1>Create Subtitle File</h1>
</header>
<div class="subtitles">
<label>Subtitles</label>
<div class="subtitle_box">
<label>
<i class="fa-solid fa-plus add_before"></i>
<i class="fa-solid fa-xmark close"></i>
</label>
<div class="input_field">
<textarea class="caption_text"></textarea>
<input type="text" class="start" placeholder="00:00:00" data-input="timestamp">
<input type="text" class="end" placeholder="00:00:00" data-input="timestamp">
</div>
<label class="bottom_label">
<i class="fa-solid fa-plus add_after"></i>
</label>
</div>
</div>
<div class="file_options">
<div class="file_name option">
<label>File Name</label>
<input type="text">
</div>
<div class="save_as option">
<label>Save As</label>
<div class="select_menu">
<select>
<option value=".vtt">(.vtt)</option>
<option value=".srt">(.srt)</option>
<option value=".sbv">(.sbv)</option>
</select>
</div>
</div>
</div>
<a class="subBtn btn">Generate Subtitle File</a>
</div>
<div class="video_source">
<video class="mainVideo" controls poster="./img.png"></video>
<div class="buttons">
<button class="btn insert_btn">Insert Time</button>
<input type="file" class="btn" accept=".mp4,.mkv">
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
Second, make a CSS record with the name of style.css and paste the given codes in your CSS document. Keep in mind, you’ve to make a record with .css extension.
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
*,::before,::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins",sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #3498db;
}
.wrapper{
max-width: 900px;
min-width: 400px;
background: #fff;
border-radius: 10px;
padding: 25px;
display: flex;
align-items: center;
}
.wrapper header h1{
font-size: 26px;
}
.wrapper .subtitles{
max-height: 250px;
overflow: auto;
}
.wrapper .subtitle_box label{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 10px;
}
.subtitle_box label i{
width: 25px;
height: 25px;
line-height: 25px;
background: #3498db;
color: #fff;
border-radius: 50%;
text-align: center;
font-weight: 500;
font-size: 20px;
cursor: pointer;
}
.subtitle_box{
position: relative;
margin: 15px 0;
}
.subtitle_box .bottom_label{
position: absolute;
bottom: -20px;
}
:where(input, button, .btn){
width: 100%;
height: 50px;
border-radius: 5px;
outline: none;
border: none;
font-size: 16px;
}
textarea{
font-size: 18px;
padding: 5px 15px;
border: 1px solid #999;
resize: none;
outline: none;
border-radius: 5px;
height: 100%;
}
.input_field{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
gap: 5px;
margin-bottom: 10px;
}
.input_field textarea{
grid-column: 1/3;
grid-row-start: 1;
grid-row-end: 3;
}
input[type="text"]{
border: 1px solid #999;
padding: 5px 15px;
}
.file_options{
display: flex;
justify-content: space-between;
margin-top: 10px;
align-items: center;
}
.option :where(.select_menu,input){
height: 50px;
padding: 0 15px;
border: 1px solid #999;
border-radius: 5px;
outline: none;
}
.option .select_menu{
padding: 0;
}
.option select{
width: 100%;
height: 100%;
outline: none;
border: none;
font-size: 16px;
}
.btn, button{
display: inline-block;
background: #3498db;
line-height: 50px;
text-align: center;
font-size: 16px;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
input[type="file"]{
padding: 0px;
}
input[type="file"]::-webkit-file-upload-button{
height: 50px;
outline: none;
border: 1px solid #999;
}
.video_source{
width: 46%;
margin-left: 10px;
}
.video_source video{
width: 100%;
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const choose_file = document.querySelector("input[type='file']");
const mainVideo = document.querySelector(".mainVideo");
const fileName = document.querySelector(".file_name input[type='text']");
const insert_btn = document.querySelector(".insert_btn");
const selectMenu = document.querySelector(".save_as select");
let time_element;
choose_file.addEventListener("change",()=>{
const file = choose_file.files[0];
const url = URL.createObjectURL(file);
mainVideo.src = url;
fileName.value = file.name.split(".")[0];
})
insert_btn.addEventListener("click",()=>{
if (time_element != undefined) {
const currentTime = mainVideo.currentTime;
let currentMin = Math.floor(currentTime / 60);
let currentSec = Math.floor(currentTime % 60);
let currentHours = Math.floor(currentMin / 60);
let currentMiliSec = "000";
currentMin > 59 ? currentMin - currentHours * 60 : currentMin;
currentMin < 10 ? currentMin = "0"+currentMin : currentMin;
currentSec < 10 ? currentSec = "0"+currentSec : currentSec;
time_element.value = `${currentHours}:${currentMin}:${currentSec}.${currentMiliSec}`;
}
})
document.addEventListener("click",(e)=>{
if (e.target.classList.contains("close")) {
e.target.closest(".subtitle_box").remove();
}
if (e.target.classList.contains("subBtn")) {
save_file();
}
if (e.target.classList.contains("add_before")) {
add_new("beforebegin",e.target.closest(".subtitle_box"));
}
if (e.target.classList.contains("add_after")) {
add_new("afterend",e.target.closest(".subtitle_box"));
}
if (e.target.getAttribute("data-input") == "timestamp") {
time_element = e.target;
}
})
function add_new(position,target) {
const subtitle_box_html = ` <div class="subtitle_box">
<label>
<i> class="fa-solid fa-plus add_before"></i>
<i> class="fa-solid fa-xmark close"></i>
</label>
<div class="input_field">
<textarea> class="caption_text"></textarea>
<input type="text" class="start" placeholder="00:00:00" data-input="timestamp">
<input type="text" class="end" placeholder="00:00:00" data-input="timestamp">
</div>
<label class="bottom_label">
<i> class="fa-solid fa-plus add_after"></i>
</label>
</div>`;
target.insertAdjacentHTML(`${position}`,subtitle_box_html);
}
function save_file() {
const all_captions = [];
const subtitle_boxs = document.querySelectorAll(".subtitle_box");
subtitle_boxs.forEach((e)=>{
all_captions.push({
text: `${e.querySelector(".caption_text").value}`,
start: `${e.querySelector(".start").value}`,
end: `${e.querySelector(".end").value}`,
});
});
let output = "";
if (selectMenu.value == ".srt" || selectMenu.value == ".sbv") {
all_captions.forEach((elem)=>{
output+=`${elem.start},${elem.end}\n${elem.text}\n`;
})
}else{
output+= `WEBVTT\n`;
all_captions.forEach((elem)=>{
output+=`${elem.start} --> ${elem.end}\n${elem.text}\n`;
})
}
const blob = new Blob([output],{type:"txt/plain"});
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = fileName.value + selectMenu.value;
link.click();
link.remove();
}
That’s all, now you’ve successfully created a program Generate Subtitle File Using Html, CSS and JavaScrip. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Click on the following download button to download all source code files.
