Hallo Linuchs,

An Elementgrenzen kann jederzeit umgebrochen werden. A-lleine trennt man übrigens al-leine...

Schau dir mal das ruby Element an, das könnte dir nützlich sein. Gerüst:

al-<ruby data-audio='d_dur'>leine<rp>[</rp><rt>D</rt><rp>]</rp></ruby>

Das ruby-Element ist erfunden worden, um Anmerkungen über Text zu setzen. Primär für lateinische Umschreibungen von östlichen Schriftzeichen, aber es geht auch alles andere.

Die rp Elemente sind für den Fall da, dass der Browser ruby nicht kennt. Das ist heute vernachlässigbar, du kannst sie also auch weglassen. Im rt Element steht das, was über dem sonstigen Inhalt des ruby-Elements angezeigt werden soll.

al-<ruby data-audio='d_dur'>leine<rt>D</rt></ruby>

Das data-audio Attribut kannst Du auch nutzen, um im CSS sicherzustellen, dass Du das Akkord-Styling nur für die ruby-Elemente erzeugst, die auch Akkorde präsentieren:

ruby[data-audio] {
   ...
}

Du musst schauen, was Du da überhaupt noch stylen musst. Vermutlich die Schriftgröße und Farbe im rt Element, sonst nichts.

Dann würde ich auf dem Element, das den Liedtext enthält, einen click Händler registrieren, statt jedem Akkord den Click-Handler inline zu verpassen und alles drölfzig mal zu schreiben. Das kann so aussehen:

liedcontainer.addEventListener("click", akkordPlayer);

function akkordPlayer(event) {
   const akkord = event.target.closest("ruby");
   if (akkord == null || akkord.dataset.audio == null) return;

   akkorde.src = "mp3/akkord_" + akkord.dataset.audio + ".mp3";
   akkorde.play();
}

Rolf