Fix time duration when "playing"
All checks were successful
Publish to burnedkirby.com/subtitle / publish-site (push) Successful in 0s

Previous implementation changed to next subtitle when current subtitle
ended. This means that times between subtitles were ignored.

This implementation now checks if the next subtitle's start is later
than the current subtitle's end, and will wait for the duration that is
longer.
This commit is contained in:
Stephen Seo 2024-07-09 19:07:54 +09:00
parent 99172c7007
commit 846416b9f7

View file

@ -92,6 +92,7 @@
const subtitles_array = []; const subtitles_array = [];
var current_subtitle = 0; var current_subtitle = 0;
var current_time = 0.0; var current_time = 0.0;
var current_end = 1.0;
var prev_timestamp = 0.0; var prev_timestamp = 0.0;
var is_playing = false; var is_playing = false;
@ -101,6 +102,12 @@
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; current_time = subtitles_array[current_subtitle].time_start;
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;
}
} 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 {
@ -211,8 +218,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 = subtitles_array[current_subtitle].time_end let duration = current_end - current_time;
- current_time;
playpause_button.style["transition"] = "all " + duration + "s linear"; playpause_button.style["transition"] = "all " + duration + "s linear";
playpause_button.style["background-position"] = "right"; playpause_button.style["background-position"] = "right";
}); });
@ -224,7 +230,7 @@
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; current_time += (anim_timestamp - prev_timestamp) / 1000.0;
prev_timestamp = anim_timestamp; prev_timestamp = anim_timestamp;
if (current_time > subtitles_array[current_subtitle].time_end) { if (current_time > current_end) {
++current_subtitle; ++current_subtitle;
display_subtitle(); display_subtitle();
set_up_play_anim(); set_up_play_anim();