Karaoke: Aktueller Text soll mittig (y) sanft auf das Display gerollt werden

[Linuchs]

Moin,

brauche mal einen Anschub, um einen lang gehegten Wunsch zu realisieren.

Ich produziere HTML-Seiten mit Liedtext und audio-tag. Audio steuert, dass die aktuelle Zeile gelb hinterleuchtet wird.

Leider wandert sie im Lauf des Lieds nach unten aus und ist verschwunden. Das Lied soll scrollen, sodass die aktuelle Zeile in der Mitte (y) ist.

Die Zeilen sind im time tag eingeschlossen. Mit JS lese ich diese Tags in lied_mehrspurig.js mit ihrer Startzeit aus

arr_time = document.getElementsByTagName( "time" );

Und setze den gelben Hintergrund mit

arr_time[i].style.backgroundColor = "#ff0";
letzter_karaoke_index = i;
// 2024-06-05 Position auf dem Display
console.log( arr_time[i].scrollY +" / " +window.innerHeight );

arr_time[i].scrollY kann so nicht angesprochen werden, ist also KEIN Zeiger auf die Position im DOM. Wie geht das?

Muster ist hochgeladen, aber nicht öffentlich, deshalb die URL bitte zusammensetzen aus

• remso.de
• /dgrs
• /107

Freunde melden, dass sie die Seite nicht öffnen können. Ist es wegen http:// ohne s?

Lieben Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

ich kann die Seite öffnen. Via http. Als https nicht.

<time data-von="00:06.50">Mit 'nem Drink in der Hand im heißen Sand</time>

Das ist semantisch falsch. Das time Element muss eine Zeitangabe enthalten. Keinen Freitext, der zeitabhängig ist. Du hast teilweise time-Elemente, die inline angezeigt werden, und teilweise welche, die ganze Zeilen sind und wo Du mit <br> den Umbruch erzeugst. Ich würde hier auf div und span zurückfallen, und statt data-von das Attribut data-zeitpunkt oder so verwenden, um die Zeitabhängigkeit zu beschreiben.

Die zeitlich zu markierenden Elemente sammelst Du dann mit

const nl_lines = document.querySelectorAll(".text [data-zeitpunkt]");

ein.

Erfundene Elemente wie bem oder l solltest Du auch nicht verwenden. Custom-Elemente MÜSSEN ein – im Namen tragen, also k-bem oder k-l, wie auch immer. Aber nicht bem oder l.

Zu deiner Frage:

   arr_time[i].scrollIntoView({ behavior: 'smooth', block: 'end' });

Sieht nicht unbedingt schön aus, löst aber das Problem als Einzeiler. Smooth funktioniert auf meinem PC nicht, das kann aber auch daran liegen dass das eine virtuelle Maschine ohne GPU ist. Probier's mal.

Rolf

[Linuchs]

Hallo Rolf,

erstmal danke für deine unermüdliche Bereitschaft.

Den time-tag habe ich erfunden, aber den gibt's wirklich?

Auch der bem-Tag (Bemerkung, Regie-Anweisung) ist von mir.

Nicht bekannt, dass ein Browser damit Probleme hätte.

Gruß, Linuchs

[Rolf B]

Hallo Linuchs,

ja, time gibts.

Das ist der schlagende Beweis, dass deine Neigung zum Erfinden von HTML Elementen gefährlich ist. Das time-Element hat Semantik, die Du verletzt. Verwende es nicht für deinen Zweck. Verwende in allen erfundenen Elementen einen Bindestrich im Namen, solche Namen sind für erfundene Namen vorgesehen.

Nicht bekannt, dass ein Browser damit Probleme hätte.

Hat nie einer behauptet. Aber Benutzer, die auf semantisch korrektes HTML angewiesen sind, die haben damit ein Problem. Was wir Dir seit Jahren predigen. Amen.

Rolf