stephenseo/subtitle_displayer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make timing more robust
All checks were successful
Publish to burnedkirby.com/subtitle / publish-site (push) Successful in 1s
Details

Browse source 
Base progressing to next subtitle based on a timestamp instead of diffs
of previous and current timestamps. This should make "playing subtitles"
timing more robust.
This commit is contained in:
Stephen Seo 2024-07-10 14:33:57 +09:00
parent ac35bf46d8
commit 7d05124e9e
1 changed files with 33 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
index.html
View file

@ -89,11 +89,25 @@
} }
} }
class TimeInfo {
constructor(timestamp) {
this.timestamp = timestamp;
}
set_time_offset(offset_millis) {
this.timestamp = document.timeline.currentTime - offset_millis;
}
is_after_ts_end(ts_end_millis) {
return (document.timeline.currentTime - this.timestamp) > ts_end_millis;
}
}
const subtitles_array = []; const subtitles_array = [];
var current_subtitle = 0; var current_subtitle = 0;
var current_time = 0.0; var time_info = new TimeInfo(document.timeline.currentTime);
var current_end = 1.0; var current_end = 1.0;
var prev_timestamp = 0.0; var current_duration = 1.0;
var is_playing = false; var is_playing = false;
function display_subtitle() { function display_subtitle() {
@ -101,13 +115,15 @@
document.getElementById("subtitle_text").textContent = subtitles_array[current_subtitle].text; document.getElementById("subtitle_text").textContent = subtitles_array[current_subtitle].text;
document.getElementById("subtitle_time").textContent = subtitles_array[current_subtitle].timestamp_start + " --> " + subtitles_array[current_subtitle].timestamp_end; document.getElementById("subtitle_time").textContent = subtitles_array[current_subtitle].timestamp_start + " --> " + subtitles_array[current_subtitle].timestamp_end;
document.getElementById("s_idx").value = current_subtitle; document.getElementById("s_idx").value = current_subtitle;
current_time = subtitles_array[current_subtitle].time_start; var current_start = subtitles_array[current_subtitle].time_start;
current_end = current_start + 1.0;
if (current_subtitle + 1 < subtitles_array.length if (current_subtitle + 1 < subtitles_array.length
&& subtitles_array[current_subtitle + 1].time_start > subtitles_array[current_subtitle].time_end) { && subtitles_array[current_subtitle + 1].time_start > subtitles_array[current_subtitle].time_end) {
current_end = subtitles_array[current_subtitle + 1].time_start; current_end = subtitles_array[current_subtitle + 1].time_start;
} else { } else {
current_end = subtitles_array[current_subtitle].time_end; current_end = subtitles_array[current_subtitle].time_end;
} }
current_duration = current_end - current_start;
} else if (current_subtitle === subtitles_array.length) { } else if (current_subtitle === subtitles_array.length) {
document.getElementById("subtitle_text").textContent = "End of subtitles."; document.getElementById("subtitle_text").textContent = "End of subtitles.";
} else { } else {
@ -218,8 +234,7 @@
playpause_button.style["background-position"] = "left"; playpause_button.style["background-position"] = "left";
requestAnimationFrame((time) => { requestAnimationFrame((time) => {
let playpause_button = document.getElementById("playpause_button"); let playpause_button = document.getElementById("playpause_button");
let duration = current_end - current_time; playpause_button.style["transition"] = "all " + current_duration + "s linear";
playpause_button.style["transition"] = "all " + duration + "s linear";
playpause_button.style["background-position"] = "right"; playpause_button.style["background-position"] = "right";
}); });
}); });
@ -228,9 +243,7 @@
function on_animation_frame(anim_timestamp) { function on_animation_frame(anim_timestamp) {
if (is_playing && current_subtitle >= 0 && current_subtitle < subtitles_array.length) { if (is_playing && current_subtitle >= 0 && current_subtitle < subtitles_array.length) {
current_time += (anim_timestamp - prev_timestamp) / 1000.0; if (time_info.is_after_ts_end(current_end * 1000.0)) {
prev_timestamp = anim_timestamp;
if (current_time > current_end) {
++current_subtitle; ++current_subtitle;
display_subtitle(); display_subtitle();
set_up_play_anim(); set_up_play_anim();
@ -271,6 +284,9 @@
value = subtitles_array.length - 1; value = subtitles_array.length - 1;
} }
current_subtitle = value; current_subtitle = value;
time_info.set_time_offset(
subtitles_array[current_subtitle].time_start * 1000.0
);
display_subtitle(); display_subtitle();
set_up_play_anim(); set_up_play_anim();
}); });
@ -280,6 +296,9 @@
() => { () => {
if (current_subtitle > 0) { if (current_subtitle > 0) {
current_subtitle -= 1; current_subtitle -= 1;
time_info.set_time_offset(
subtitles_array[current_subtitle].time_start * 1000.0
);
display_subtitle(); display_subtitle();
set_up_play_anim(); set_up_play_anim();
} }
@ -290,6 +309,9 @@
() => { () => {
if (current_subtitle + 1 < subtitles_array.length) { if (current_subtitle + 1 < subtitles_array.length) {
current_subtitle += 1; current_subtitle += 1;
time_info.set_time_offset(
subtitles_array[current_subtitle].time_start * 1000.0
);
display_subtitle(); display_subtitle();
set_up_play_anim(); set_up_play_anim();
} }
@ -300,9 +322,10 @@
() => { () => {
is_playing = !is_playing; is_playing = !is_playing;
if (is_playing && current_subtitle >= 0 && current_subtitle < subtitles_array.length) { if (is_playing && current_subtitle >= 0 && current_subtitle < subtitles_array.length) {
current_time = subtitles_array[current_subtitle].time_start; time_info.set_time_offset(
subtitles_array[current_subtitle].time_start * 1000.0
);
requestAnimationFrame(on_animation_frame); requestAnimationFrame(on_animation_frame);
prev_timestamp = document.timeline.currentTime;
document.getElementById("playpause_button").textContent = "⏸"; document.getElementById("playpause_button").textContent = "⏸";
set_up_play_anim(); set_up_play_anim();
} else { } else {