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.
44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
// 1. Import dependencies, select DOM elements, define global var
|
|
import srtParser2 from 'https://cdn.skypack.dev/srt-parser-2';
|
|
|
|
// 4. Interactive functions to attach to the subtitle id
|
|
// see functions.js for more info
|
|
import functions from './functions.js'
|
|
|
|
|
|
const player = document.querySelector('#player')
|
|
const sub = document.querySelector('#sub')
|
|
|
|
|
|
const printText = (text) => {
|
|
sub.innerHTML = text
|
|
}
|
|
|
|
// 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(Object.hasOwn( functions, current.id))
|
|
functions[current.id]()
|
|
}
|
|
})
|
|
}
|
|
|
|
// 2. Open .srt file and trigger readSRT() function
|
|
fetch('assets/mammoth.srt').then(res=>res.text()).then(data=>readSRT(data))
|
|
|