TRANSLATE SRT (VTT) SUBTILE FILE ON IPAD

TRANSLATE SRT OR VTT FILES USING JS ON IPAD

If you let the app translate the following line into another language
00:00:04.580 --> 00:00:06.660
then they often spoil it, for example there will be
00:00: 04.580 ->00:00:06.660
So I have to change it to the format
seconds ## seconds
After the translation is done, change it back to
hhmmss --> hhmmss

After the file srt (or vtt) is extracted from youtube video
(using downsub.com for example)
let open this html code and parse it inside textarea with id="area1"
Tap the finame of this html to run it.
Tap "OK" to change to seconds ## seconds format

WEBVTT 1 00:00:04.580 --> 00:00:06.660 Juny Tony Story Musical 2 00:00:07.140 --> 00:00:08.100 Little Red Riding Hood 3 00:00:08.260 --> 00:00:09.620 Shall we start? 4 00:00:11.640 --> 00:00:12.440 Once upon a time 5 00:00:12.700 --> 00:00:14.700 there was a lovely little girl. 6 00:00:17.000 --> 00:00:20.100 She always wore a red riding hood made by her grandma. 7 00:00:21.620 --> 00:00:25.520 Everyone called her Little Red Riding Hood. 8 00:00:26.160 --> 00:00:27.600 Hello, Little Red Riding Hood! 9 00:00:27.860 --> 00:00:28.360 Hi! 10 00:00:28.760 --> 00:00:30.620 Where are you going, Little Red Riding Hood? 11 00:00:31.560 --> 00:00:32.220 One day 12 00:00:32.680 --> 00:00:35.760 Little Red Riding Hood's mom asked her a favor. 13 00:00:37.840 --> 00:00:38.340 Sweetie 14 00:00:38.780 --> 00:00:40.080 Grandmother is not feeling so well 15 00:00:40.560 --> 00:00:43.520 Would you give these cookies and bread to her? 16 00:00:44.200 --> 00:00:46.760 Make sure you go straight to grandma's house, okay? 17 00:00:47.300 --> 00:00:47.860 OK! 18 00:00:48.140 --> 00:00:51.060 Little Red Riding Hood went into the woods with the basket. 19 00:00:51.380 --> 00:00:52.400 By the way 20 00:00:53.020 --> 00:00:55.280 what's that shadow? 21 00:00:55.900 --> 00:00:57.420 Where is it coming from? 22 00:00:58.180 --> 00:00:59.840 Why is that shadow following her? 23 00:01:04.760 --> 00:01:07.180 Tip-toe, tip-toe 24 00:01:07.180 --> 00:01:07.740 Boo 25 00:01:07.740 --> 00:01:09.480 Shall I eat her up? 26 00:01:10.020 --> 00:01:12.240 Pop-out, peek-a-boo! 27 00:01:12.240 --> 00:01:12.900 Boo 28 00:01:12.900 --> 00:01:14.520 Shall I eat her up? 29 00:01:15.960 --> 00:01:17.580 I've been so hungry 30 00:01:17.580 --> 00:01:18.580 Thank goodness 31 00:01:19.600 --> 00:01:21.880 Act like a gentleman. 32 00:01:23.080 --> 00:01:25.240 Where are you going, dear? 33 00:01:26.720 --> 00:01:30.320 I'm going to my grandma's to give her some cookies and bread. 34 00:01:34.100 --> 00:01:36.480 One step, Two step 35 00:01:36.480 --> 00:01:37.300 Boo 36 00:01:37.300 --> 00:01:38.680 Shall I eat her up? 37 00:01:39.320 --> 00:01:41.540 chit-chat, chit-chat 38 00:01:41.540 --> 00:01:42.440 boo 39 00:01:42.440 --> 00:01:43.840 Shall I eat her up? 40 00:01:44.580 --> 00:01:46.220 oh, I can't wait anymore 41 00:01:46.220 --> 00:01:48.120 Right now, I want to ROAR! 42 00:01:48.120 --> 00:01:50.960 Act like a gentleman. 43 00:01:54.360 --> 00:01:56.060 Where is your grandma's house? 44 00:01:57.000 --> 00:01:59.200 It's at the end of the road. 45 00:02:01.020 --> 00:02:03.060 Then I can eat her up first! 46 00:02:08.400 --> 00:02:11.660 Look at these beautiful flowers, Little Red Riding Hood. 47 00:02:12.320 --> 00:02:14.580 Why don't you pick some for your grandma? 48 00:02:14.580 --> 00:02:16.740 She will love them! 49 00:02:17.220 --> 00:02:18.680 That sounds great, Mr. Wolf ! 50 00:02:20.000 --> 00:02:22.120 One, two, three.... 51 00:02:22.120 --> 00:02:23.380 In the meantime 52 00:02:23.800 --> 00:02:26.780 the wolf was heading to her grandma's house. 53 00:02:32.800 --> 00:02:34.060 Grandma 54 00:02:34.780 --> 00:02:36.500 it's me, Little Red Riding Hood 55 00:02:37.240 --> 00:02:39.240 Open the door, please. 56 00:02:41.360 --> 00:02:42.900 my dear Little Red Riding Hood 57 00:02:43.380 --> 00:02:44.900 Please come in. 58 00:02:48.040 --> 00:02:51.980 The wolf opened up his mouth and ate her up. 59 00:02:57.720 --> 00:02:59.800 Let me lie on the grandma's bed 60 00:02:59.800 --> 00:03:01.980 and wait for Little Red Riding Hood to come. 61 00:03:02.720 --> 00:03:07.540 She will never recognize me if I wear grandma's clothes. 62 00:03:11.600 --> 00:03:12.600 After a while 63 00:03:12.940 --> 00:03:17.940 Little Red Riding Hood arrived with a bunch of flowers and the food basket. 64 00:03:19.380 --> 00:03:20.780 Why is the house so dark? 65 00:03:21.900 --> 00:03:22.900 Grandma? 66 00:03:23.740 --> 00:03:25.820 I'm here, Grandma. 67 00:03:26.460 --> 00:03:28.480 Come closer, my dear. 68 00:03:29.140 --> 00:03:31.100 The house is dark, Grandma. 69 00:03:31.100 --> 00:03:33.940 Little bit closer, my dear 70 00:03:34.800 --> 00:03:35.780 Grandma 71 00:03:35.980 --> 00:03:38.220 Are you feeling...sick? 72 00:03:39.840 --> 00:03:40.880 Yes, I am.. 73 00:03:40.880 --> 00:03:42.720 Please come hug me. 74 00:03:45.080 --> 00:03:47.160 Such big eyes, Grandma 75 00:03:47.160 --> 00:03:49.940 the better to see you with. 76 00:03:50.360 --> 00:03:52.480 Such big ears, Grandma 77 00:03:52.720 --> 00:03:55.300 the better to hear you with 78 00:03:55.660 --> 00:03:58.120 Such a big mouth.... 79 00:03:59.020 --> 00:04:00.180 Grandma 80 00:04:00.400 --> 00:04:01.660 Wanna know? 81 00:04:02.520 --> 00:04:04.160 the better to eat you up! 82 00:04:07.600 --> 00:04:10.320 I'm so....full.... 83 00:04:12.160 --> 00:04:13.780 Let me take a nap.... 84 00:04:16.579 --> 00:04:18.319 A hunter was passing by the house. 85 00:04:18.920 --> 00:04:20.680 He heard the loud noise 86 00:04:20.940 --> 00:04:22.540 and looked inside the house. 87 00:04:24.780 --> 00:04:26.600 Oh,my! That's a wolf ! 88 00:04:27.040 --> 00:04:29.860 He must have eaten up the old lady, already. 89 00:04:31.100 --> 00:04:33.100 The hunter cut open the wolf's belly. 90 00:04:33.580 --> 00:04:36.440 He saved Little Red Riding Hood and her grandma 91 00:04:37.160 --> 00:04:39.780 and put in heavy stones instead. 92 00:04:48.360 --> 00:04:49.000 My belly !!! 93 00:04:49.000 --> 00:04:52.200 The wolf ran away with his big belly, filled up with stones. 94 00:04:54.580 --> 00:04:56.400 my belly 95 00:05:04.620 --> 00:05:06.620 Juny Tony Story Musical 96 00:05:07.420 --> 00:05:08.820 See you next time !

Tap this button "COPY" then open Google translator app.
Translate the text to another language.

Parse translated text into the textarea below

Tap "OK2" to get final subtitle file

Download source code of this html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <style> body{ font-size:14pt; font-family:Arial } textarea{ font-size:14pt; width:720px; height:240px; } button{ font-size:14pt; } h3{ font-size:14pt; color: #0000CD; } </style> </head> <h2 style="color: #A0522D; font-family:Tahoma"> TRANSLATE SRT OR VTT FILES USING JS ON IPAD </h2> <h3> After the file srt (or vtt) is extracted from youtube video<br> let open this html code and parse it inside textarea with id="area1" <br> Tap the finame of this html to run it. Tap "OK" </h3> [textarea id="area1"> WEBVTT 1 00:00:04.580 --> 00:00:06.660 Juny Tony Story Musical 2 00:00:07.140 --> 00:00:08.100 Little Red Riding Hood 3 00:00:08.260 --> 00:00:09.620 Shall we start? 4 00:00:11.640 --> 00:00:12.440 Once upon a time 5 00:00:12.700 --> 00:00:14.700 there was a lovely little girl. 6 00:00:17.000 --> 00:00:20.100 She always wore a red riding hood made by her grandma. 7 00:00:21.620 --> 00:00:25.520 Everyone called her Little Red Riding Hood. 8 00:00:26.160 --> 00:00:27.600 Hello, Little Red Riding Hood! 9 00:00:27.860 --> 00:00:28.360 Hi! 10 00:00:28.760 --> 00:00:30.620 Where are you going, Little Red Riding Hood? 11 00:00:31.560 --> 00:00:32.220 One day 12 00:00:32.680 --> 00:00:35.760 Little Red Riding Hood's mom asked her a favor. 13 00:00:37.840 --> 00:00:38.340 Sweetie 14 00:00:38.780 --> 00:00:40.080 Grandmother is not feeling so well 15 00:00:40.560 --> 00:00:43.520 Would you give these cookies and bread to her? 16 00:00:44.200 --> 00:00:46.760 Make sure you go straight to grandma's house, okay? 17 00:00:47.300 --> 00:00:47.860 OK! 18 00:00:48.140 --> 00:00:51.060 Little Red Riding Hood went into the woods with the basket. 19 00:00:51.380 --> 00:00:52.400 By the way 20 00:00:53.020 --> 00:00:55.280 what's that shadow? 21 00:00:55.900 --> 00:00:57.420 Where is it coming from? 22 00:00:58.180 --> 00:00:59.840 Why is that shadow following her? 23 00:01:04.760 --> 00:01:07.180 Tip-toe, tip-toe 24 00:01:07.180 --> 00:01:07.740 Boo 25 00:01:07.740 --> 00:01:09.480 Shall I eat her up? 26 00:01:10.020 --> 00:01:12.240 Pop-out, peek-a-boo! 27 00:01:12.240 --> 00:01:12.900 Boo 28 00:01:12.900 --> 00:01:14.520 Shall I eat her up? 29 00:01:15.960 --> 00:01:17.580 I've been so hungry 30 00:01:17.580 --> 00:01:18.580 Thank goodness 31 00:01:19.600 --> 00:01:21.880 Act like a gentleman. 32 00:01:23.080 --> 00:01:25.240 Where are you going, dear? 33 00:01:26.720 --> 00:01:30.320 I'm going to my grandma's to give her some cookies and bread. 34 00:01:34.100 --> 00:01:36.480 One step, Two step 35 00:01:36.480 --> 00:01:37.300 Boo 36 00:01:37.300 --> 00:01:38.680 Shall I eat her up? 37 00:01:39.320 --> 00:01:41.540 chit-chat, chit-chat 38 00:01:41.540 --> 00:01:42.440 boo 39 00:01:42.440 --> 00:01:43.840 Shall I eat her up? 40 00:01:44.580 --> 00:01:46.220 oh, I can't wait anymore 41 00:01:46.220 --> 00:01:48.120 Right now, I want to ROAR! 42 00:01:48.120 --> 00:01:50.960 Act like a gentleman. 43 00:01:54.360 --> 00:01:56.060 Where is your grandma's house? 44 00:01:57.000 --> 00:01:59.200 It's at the end of the road. 45 00:02:01.020 --> 00:02:03.060 Then I can eat her up first! 46 00:02:08.400 --> 00:02:11.660 Look at these beautiful flowers, Little Red Riding Hood. 47 00:02:12.320 --> 00:02:14.580 Why don't you pick some for your grandma? 48 00:02:14.580 --> 00:02:16.740 She will love them! 49 00:02:17.220 --> 00:02:18.680 That sounds great, Mr. Wolf ! 50 00:02:20.000 --> 00:02:22.120 One, two, three.... 51 00:02:22.120 --> 00:02:23.380 In the meantime 52 00:02:23.800 --> 00:02:26.780 the wolf was heading to her grandma's house. 53 00:02:32.800 --> 00:02:34.060 Grandma 54 00:02:34.780 --> 00:02:36.500 it's me, Little Red Riding Hood 55 00:02:37.240 --> 00:02:39.240 Open the door, please. 56 00:02:41.360 --> 00:02:42.900 my dear Little Red Riding Hood 57 00:02:43.380 --> 00:02:44.900 Please come in. 58 00:02:48.040 --> 00:02:51.980 The wolf opened up his mouth and ate her up. 59 00:02:57.720 --> 00:02:59.800 Let me lie on the grandma's bed 60 00:02:59.800 --> 00:03:01.980 and wait for Little Red Riding Hood to come. 61 00:03:02.720 --> 00:03:07.540 She will never recognize me if I wear grandma's clothes. 62 00:03:11.600 --> 00:03:12.600 After a while 63 00:03:12.940 --> 00:03:17.940 Little Red Riding Hood arrived with a bunch of flowers and the food basket. 64 00:03:19.380 --> 00:03:20.780 Why is the house so dark? 65 00:03:21.900 --> 00:03:22.900 Grandma? 66 00:03:23.740 --> 00:03:25.820 I'm here, Grandma. 67 00:03:26.460 --> 00:03:28.480 Come closer, my dear. 68 00:03:29.140 --> 00:03:31.100 The house is dark, Grandma. 69 00:03:31.100 --> 00:03:33.940 Little bit closer, my dear 70 00:03:34.800 --> 00:03:35.780 Grandma 71 00:03:35.980 --> 00:03:38.220 Are you feeling...sick? 72 00:03:39.840 --> 00:03:40.880 Yes, I am.. 73 00:03:40.880 --> 00:03:42.720 Please come hug me. 74 00:03:45.080 --> 00:03:47.160 Such big eyes, Grandma 75 00:03:47.160 --> 00:03:49.940 the better to see you with. 76 00:03:50.360 --> 00:03:52.480 Such big ears, Grandma 77 00:03:52.720 --> 00:03:55.300 the better to hear you with 78 00:03:55.660 --> 00:03:58.120 Such a big mouth.... 79 00:03:59.020 --> 00:04:00.180 Grandma 80 00:04:00.400 --> 00:04:01.660 Wanna know? 81 00:04:02.520 --> 00:04:04.160 the better to eat you up! 82 00:04:07.600 --> 00:04:10.320 I'm so....full.... 83 00:04:12.160 --> 00:04:13.780 Let me take a nap.... 84 00:04:16.579 --> 00:04:18.319 A hunter was passing by the house. 85 00:04:18.920 --> 00:04:20.680 He heard the loud noise 86 00:04:20.940 --> 00:04:22.540 and looked inside the house. 87 00:04:24.780 --> 00:04:26.600 Oh,my! That's a wolf ! 88 00:04:27.040 --> 00:04:29.860 He must have eaten up the old lady, already. 89 00:04:31.100 --> 00:04:33.100 The hunter cut open the wolf's belly. 90 00:04:33.580 --> 00:04:36.440 He saved Little Red Riding Hood and her grandma 91 00:04:37.160 --> 00:04:39.780 and put in heavy stones instead. 92 00:04:48.360 --> 00:04:49.000 My belly !!! 93 00:04:49.000 --> 00:04:52.200 The wolf ran away with his big belly, filled up with stones. 94 00:04:54.580 --> 00:04:56.400 my belly 95 00:05:04.620 --> 00:05:06.620 Juny Tony Story Musical 96 00:05:07.420 --> 00:05:08.820 See you next time ! [/textarea> <br> <button onclick="ok()">OK</button> <button onclick="copy('area2')">COPY</button> <h3> Tap this button "COPY" then open Google translator app.<br> Translate the text to another language. </h3> [textarea id="area2"> [/textarea> <h3>Parse translated text into the textarea below </h3> [textarea id="area3"> [/textarea> <br> <button onclick="ok2()">OK2</button> <button onclick="copy('area4')">COPY</button> <h3> Tap "OK2" to get final subtitle file </h3> [textarea id="area4"> [/textarea> <br> <script> function ok(){ st = $('#area1').val(); arr = st.split('\n'); for(i=0; i<arr.length; i++){ if(arr[i].search("-->") > 0){ xx = arr[i].split("-->") aa = to_sec(xx[0]); bb = to_sec(xx[1].trim()); zz = aa + ' ## ' + bb; arr[i] = zz } } st1 = arr.join('\n'); $('#area2').val(st1); } function to_sec(s){ var match = s.match(/^(?:([0-9]+):)?([0-5][0-9]):([0-5][0-9](?:[.,][0-9]{0,3})?)/); if (match == null) { throw 'Invalid timestamp format: ' + s; } var hours = parseInt(match[1] || "0", 10); var minutes = parseInt(match[2], 10); var seconds = parseFloat(match[3].replace(',', '.')); return seconds + 60 * minutes + 60 * 60 * hours; } function ok2(){ ss = $('#area3').val() arr = ss.split("\n"); for(i=0; i<arr.length; i++){ if(arr[i].search("##") >0){ xx = arr[i].split("##"); aa = toVttHhmmss(Number(xx[0].replace(',','.'))); bb = toVttHhmmss(Number(xx[1].replace(',','.'))); arr[i] = aa + " --> " + bb } } ss1 = arr.join('\n'); $('#area4').val(ss1); } function toVttHhmmss(seconds) { hours = Math.floor(seconds / 3600); seconds %= 3600; minutes = Math.floor(seconds / 60); seconds = seconds % 60; seconds = Math.round(seconds*1000)/1000; zz = String(seconds).split('.') if(zz.length == 1){ res = pad(hours,2) + ':' + pad(minutes,2) + ':' + pad(Number(zz[0]),2) + '.' + '000' }else{ res = pad(hours,2) + ':' + pad(minutes,2) + ':' + pad(Number(zz[0]),2) + '.' + padSec(Number(zz[1]),3); } /* thiếu số không ở seconds */ return res; } function pad(num, size) { var s = num+""; while (s.length < size) s = "0" + s; return s; } function padSec(num, size) { s = num + ''; while (s.length < size) s = s + "0" return s; } //// SELECT, COPY TO CLIPBOARD var copy = function(elementId) { var input = document.getElementById(elementId); var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i); if (isiOSDevice) { var editable = input.contentEditable; var readOnly = input.readOnly; input.contentEditable = true; input.readOnly = false; var range = document.createRange(); range.selectNodeContents(input); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); input.setSelectionRange(0, 999999); input.contentEditable = editable; input.readOnly = readOnly; } else { input.select(); } document.execCommand('copy'); alert('The content has been copied to the clipboard'); $('#' + elementId).blur(); } function ok(){ st = $('#area1').val(); arr = st.split('\n'); for(i=0; i<arr.length; i++){ if(arr[i].search("-->") > 0){ xx = arr[i].split("-->") aa = to_sec(xx[0]); bb = to_sec(xx[1].trim()); zz = aa + ' ## ' + bb; arr[i] = zz } } st1 = arr.join('\n'); $('#area2').val(st1); } function to_sec(s){ var match = s.match(/^(?:([0-9]+):)?([0-5][0-9]):([0-5][0-9](?:[.,][0-9]{0,3})?)/); if (match == null) { throw 'Invalid timestamp format: ' + s; } var hours = parseInt(match[1] || "0", 10); var minutes = parseInt(match[2], 10); var seconds = parseFloat(match[3].replace(',', '.')); return seconds + 60 * minutes + 60 * 60 * hours; } function ok2(){ ss = $('#area3').val() arr = ss.split("\n"); for(i=0; i<arr.length; i++){ if(arr[i].search("##") >0){ xx = arr[i].split("##"); aa = toVttHhmmss(Number(xx[0].replace(',','.'))); bb = toVttHhmmss(Number(xx[1].replace(',','.'))); arr[i] = aa + " --> " + bb } } ss1 = arr.join('\n'); $('#area4').val(ss1); } function toVttHhmmss(seconds) { hours = Math.floor(seconds / 3600); seconds %= 3600; minutes = Math.floor(seconds / 60); seconds = seconds % 60; seconds = Math.round(seconds*1000)/1000; zz = String(seconds).split('.') if(zz.length == 1){ res = pad(hours,2) + ':' + pad(minutes,2) + ':' + pad(Number(zz[0]),2) + '.' + '000' }else{ res = pad(hours,2) + ':' + pad(minutes,2) + ':' + pad(Number(zz[0]),2) + '.' + padSec(Number(zz[1]),3); } /* thiếu số không ở seconds */ return res; } function pad(num, size) { var s = num+""; while (s.length < size) s = "0" + s; return s; } function padSec(num, size) { s = num + ''; while (s.length < size) s = s + "0" return s; } //// SELECT, COPY TO CLIPBOARD var copy = function(elementId) { var input = document.getElementById(elementId); var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i); if (isiOSDevice) { var editable = input.contentEditable; var readOnly = input.readOnly; input.contentEditable = true; input.readOnly = false; var range = document.createRange(); range.selectNodeContents(input); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); input.setSelectionRange(0, 999999); input.contentEditable = editable; input.readOnly = readOnly; } else { input.select(); } document.execCommand('copy'); alert('The content has been copied to the clipboard'); $('#' + elementId).blur(); } (function () { var textFile = null, makeTextFile = function (text) { var data = new Blob([text], {type: 'text/plain'}); // If we are replacing a previously generated file we need to // manually revoke the object URL to avoid memory leaks. if (textFile !== null) { window.URL.revokeObjectURL(textFile); } textFile = window.URL.createObjectURL(data); return textFile; }; var create = document.getElementById('create'), textbox = document.getElementById('textbox'); create.addEventListener('click', function () { var link = document.createElement('a'); link.setAttribute('download', 'info.txt'); link.href = makeTextFile(textbox.value); document.body.appendChild(link); // wait for the link to be added to the document window.requestAnimationFrame(function () { var event = new MouseEvent('click'); link.dispatchEvent(event); document.body.removeChild(link); }); }, false); })(); </script> </html>

To download this code please go to next post