subp/index.js

// 1. Import dependencies, select DOM elements, define global var
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()
}

const printText = (text) => {
    sub.innerHTML = text
}

const testFunction = () => {
    console.log('test function eheh')
}

const test2 = () => {
    console.log('test 2')
}

// 3. Parse .srt file and setup audio player callback
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)
            printText(current.text)
            // Check if the srtFunctions object has some callback for the current index
            if(srtFunctions.hasOwnProperty(current.id))
                srtFunctions[current.id]()
        }
    })
}

// 2. Open .srt file and trigger readSRT() function
fetch('jeetee.srt').then(res=>res.text()).then(data=>readSRT(data))