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