documentation and comments

index.html

@@ -16,8 +16,9 @@
         <li>if there is a call back (define syntax) call the callback</li>
     </ul>
    
+    <audio src="jeetee.mp3" id="player" controls ></audio>
+
     <div id="sub">Hello</div>
-    <audio src="jeetee.mp3" id="player" controls>
 
 
 </body>

index.js

@@ -3,8 +3,14 @@ import srtParser2 from 'https://cdn.skypack.dev/srt-parser-2';
 const player = document.querySelector('#player')
 const sub = document.querySelector('#sub')
 
-
+// 4. Interactive functions to attach to the subtitle id
+// a. note that there can be more functions for every id
+// using the syntax id: () => {function1(); function2()}
+// b. note that to pass params to the functions you need to pass them to all
+// using the syntax: id: (param) => function1(param)
+//
 const srtFunctions = {
+// id: () => callback()
     1: () => testFunction(),
     2: () => testFunction(),
     3: () => test2()
@@ -28,8 +34,8 @@ const readSRT = (srt) => {
     let srt_array = parser.fromSrt(srt)
     console.log(srt_array)
     
-    
     let currentId = 0
+    
     player.addEventListener('timeupdate', (e)=>{
         let current = srt_array.find(
             caption => 
@@ -39,6 +45,7 @@ const readSRT = (srt) => {
         if (current != undefined && currentId != parseInt(current.id)){
             currentId = parseInt(current.id)
             printText(current.text)
+            // Check if the srtFunctions object has some callback for the current index
             if(srtFunctions.hasOwnProperty(current.id))
                 srtFunctions[current.id]()
         }

style.css

@@ -1,5 +1,4 @@
 html, body {
-margin: 0;
 font-size: 24px;
 line-height: 1.4;
 font-family: sans-serif;