Loud Links: JavaScript bringt deine Website zum Klingen

Das kleine JavaScript Loud Links bringt deine Website zum Klingen, indem es per HTML5-Audioelement Links und andere Elemente entweder bei Klick oder on Hover hörbar macht. Dazu benötigst du lediglich MP3 und OGG. Die Lösung funktioniert in allen gängigen Browsern.

Loud Links: JavaScript bringt deine Website zum Klingen

Sound auf der Website: Geschmackssache

Natürlich, natürlich. Du brauchst es nicht zu sagen. Sound auf der Website ist ja sowas von Neunziger und schon da nervte es. Ich kenne diese Meinung und sie hat ja auch ihre Berechtigung. Dennoch gibt es durchaus ebenso berechtigte Anwendungsfälle für klingende Websites. Hier bei Dr. Web haben wir uns erst kürzlich ganz grundsätzlich mit der Thematik befasst.

Loud Links ist ein kleines JavaScript aus der digitalen Feder des Rotterdamer Designers und UX-Developers Mahdi Al-Farra. Mahdi begeht regelmäßig etwas, das er Weekend Projects nennt, und Loud Links ist einer dieser durchaus interessanten Schnellschüsse, die dabei entstehen.

Loud Links: JavaScript bringt deine Website zum Klingen

Um es gleich vorweg zu sagen, Loud Links will nicht deine UI vertonen, sondern ist lediglich dazu geschaffen worden, Sounds für Interaktionen zu setzen. Genau genommen kann Loud Links nur zwei verschiedene Zustände vertonen. Du kannst Loud Links zwar grundsätzlich jedem Element auf deiner Website zuordnen, klingen werden die so behandelten Elemente aber nur entweder beim Klicken oder on Hover, also beim Darüberfahren mit der Maus.

Loud Links: JavaScript bringt deine Website zum Klingen

Die JavaScript-Bibliothek erstellt für das jeweils ausgezeichnete Element ein HTML5-Audio und verwendet MP3/Ogg-Dateien, um einen entsprechenden Sound abzuspielen. Die Verwendung ist absolut einfach, wenn man über entsprechende Soundschnipsel verfügt. Diese allerdings finden sich in den Weiten des Netzes in rauen Mengen.

Loud Links: So gehts

Um Loud Links zu verwenden legst du im Stammverzeichnis deiner Website einen Ordner an, den du sounds nennst. Innerhalb dieses Ordners erstellst du zwei weitere Ordner namens mp3 und ogg.

Nachdem du das JavaScript auf gewohnte Weise in dein HTML-Dokument integriert hast, zeichnest du diejenigen Links oder andere Elemente, die du vertonen möchtest, entweder mit der Klasse loud-link-hover oder loud-link-click aus. Über das HTML5-Data-Attribut fügst du noch den konkreten Sound hinzu, wobei du dessen Dateierweiterung nicht angibst. Also statt klang.mp3 gibst du lediglich klang ein.

Ich gebe dir zwei Beispiele:

<div class=“loud-link-hover” src-data=“klang”></div>

oder

<div class=“loud-link-click” src-data=“klang”></div>

Das war es schon. Von nun an gibt deine Website bei von dir gewählten Interaktionen hörbare Rückmeldungen.

Loud Links steht auf Github zum kostenlosen Download bereit. Leider hat Mahdi bislang keine konkrete Lizenz angegeben, so dass ich nicht mit Sicherheit sagen kann, ob du Loud Links auch kommerziell verwenden darfst. Es würde mich indes überraschen, wenn es tatsächlich nicht so wäre. Sicherheitshalber frag einfach Mahdi im konkreten Fall danach.

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen