You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
// 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))
|
|
|