kamo
/
subp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

readme and functions as module

Browse Source
main
km0 2 years ago
parent 4b8c76bb76
commit 54a770ffcf
6 changed files with 42 additions and 24 deletions
Show Stats Download Patch File Download Diff File

BIN
.index.js.swp → .functions.js.swp
View File

Binary file not shown.

BIN
.index.html.swp → .readme.md.swp
View File

Binary file not shown.

20
functions.js
Unescape Escape View File

@ -0,0 +1,20 @@
// Mapping
export default {
1: () => test1(),
2: () => test2(),
3: () => {test1(); test2()}
}
// Functions
const test1 = () => {
console.log('test 1 test 1')
}
const test2 = () => {
console.log('test 2 test 2')
}

1
index.html
Unescape Escape View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Subtitles player</title> <title>Subtitles player</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script type="module" defer src="functions.js"></script>
<script type="module" defer src="index.js" ></script> <script type="module" defer src="index.js" ></script>
</head> </head>
<body> <body>

30
index.js
Unescape Escape View File

@ -1,33 +1,19 @@
// 1. Import dependencies, select DOM elements, define global var // 1. Import dependencies, select DOM elements, define global var
import srtParser2 from 'https://cdn.skypack.dev/srt-parser-2'; 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 player = document.querySelector('#player')
const sub = document.querySelector('#sub') 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) => { const printText = (text) => {
sub.innerHTML = 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 // 3. Parse .srt file and setup audio player callback
const readSRT = (srt) => { const readSRT = (srt) => {
let parser = new srtParser2(); let parser = new srtParser2();
@ -46,8 +32,8 @@ const readSRT = (srt) => {
currentId = parseInt(current.id) currentId = parseInt(current.id)
printText(current.text) printText(current.text)
// Check if the srtFunctions object has some callback for the current index // Check if the srtFunctions object has some callback for the current index
if(srtFunctions.hasOwnProperty(current.id)) if(functions.hasOwnProperty(current.id))
srtFunctions[current.id]() functions[current.id]()
} }
}) })
} }

15
readme.md
Unescape Escape View File

@ -1,11 +1,22 @@
# Sub player # Sub player
Use subtitles file (.srt) as timeline, attaching custom functions to the captions to build time-based web pages.
Use .srt file as timeline. `Test for La Jeetee VR.`
Test for La Jeetee VR.
## Process
1. Load audio player 1. Load audio player
2. Load subtitles .srt file 2. Load subtitles .srt file
3. Parse .srt files into array of subtitles 3. Parse .srt files into array of subtitles
4. Add timeupdate callback on audio player to update current subtitle 4. Add timeupdate callback on audio player to update current subtitle
5. Create an object to map the id of the subtitle to callback functions 5. Create an object to map the id of the subtitle to callback functions
## Files
- `index.html` is the entry point
- `index.js` takes care of loading and parsing the SRT file, calling the functions from
- `functions.js` custom list of functions to map onto the subtitles defined in
- `jeetee.srt`, that is a standard .srt file for subtitles

Write Preview
Loading…
Cancel
Save