test js sub

2 years ago · e0ef1fcec1
parent 14638b2680
commit e0ef1fcec1
3 changed files with 30 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8">
    <title>Subtitles player</title>
    <link rel="stylesheet" href="style.css">
-    <script defer src="script.js" ></script>
+    <script type="module" defer src="index.js" ></script>
 </head>
 <body>
   <h1 class="title">Test with live server</h1>
@ -15,7 +15,11 @@
        <li>if there is caption display the caption</li>
        <li>if there is a call back (define syntax) call the callback</li>
    </ul>
-    
+   
+    <audio src="jeetee.mp3" id="player" controls>
+
+
+
 </body>

 </html>
--- a/index.js
+++ b/index.js
@ -0,0 +1,24 @@
+import srtParser2 from 'https://cdn.skypack.dev/srt-parser-2';
+const player = document.querySelector('#player')
+
+const readSRT = (srt) => {
+    let parser = new srtParser2();
+    let srt_array = parser.fromSrt(srt)
+    console.log(srt_array)
+    
+    let currentId = 0
+    player.addEventListener('timeupdate', (e)=>{
+        let current = srt_array.find(
+            caption => 
+                caption.startSeconds <= e.target.currentTime && 
+                caption.endSeconds >= e.target.currentTime
+             )
+        if (current != undefined && currentId != parseInt(current.id)){
+            currentId = parseInt(current.id)
+            console.log(current.text)
+        }
+    })
+}
+
+fetch('jeetee.srt').then(res=>res.text()).then(data=>readSRT(data))
+
--- a/jeetee.mp3
+++ b/jeetee.mp3