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: ~~~html 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. ~~~html 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: ~~~css 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: ~~~js 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_ -- sumpsi - posui - obstruxi

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: ~~~html 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. ~~~html al-<ruby data-audio='d_dur'>leine<rt>D</rt></ruby> ~~~ 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: ~~~js 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_ -- sumpsi - posui - obstruxi

Hallo Linuchs, An Elementgrenzen kann jederzeit umgebrochen werden. Schau dir mal das ruby Element an, das könnte dir nützlich sein. Gerüst: ~~~html al-<ruby data-wav='d_dur'>leine<rp>[</rp><rt>D</rt><rp>]</rp></ruby> ~~~ Die rp Elemente sind für den Fall da, dass der Browser ruby nicht kennt. Das ist heute vernachlässigbar, du kannst sie also weglassen. Dann würde ich auf dem Element, das den Liedtext enthält, einen click Händler registrieren. Darin: (Moment) _Rolf_ -- sumpsi - posui - obstruxi