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

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

Browse source 
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
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
index.html
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();