SoundCite JS: Texte mit Audios anreichern

Stimmt schon: Gut geschriebene Texte brauchen nichts weiter als eine Leserin mit Phantasie, um ihre volle Wirkungskraft zu entfalten. Und doch kann es sich lohnen, Texten noch mehr Tiefe zu geben – mit einer medialen Erweiterung durch Sounds. 

O-Töne, Geräusche, Atmosphäre können eine sinnvolle Ergänzung zu schriftlichen Inhalten im Netz sein. Meist begegnet man ihnen in Gestalt eines Audioplayers, der zwischen zwei Absätzen eingebunden wird und das Lesen somit unterbricht. SoundCiteJS bietet eine anderen Weg: Mit dem Tool lassen sich Töne nahtlos in einen Text integrieren. „Seamless inline audio“ nennt die Werkzeugschmiede Knight Lab dieses Storytelling-Format.

Ein Auszug aus dem Droste-Gedicht „Die Lerche“ mag als Beispiel dienen:

(…) Da krimmelt, wimmelt es im Haidgezweige,
Die Grille dreht geschwind das Beinchen um,
Streicht an des Thaues Kolophonium,
Und spielt so schäferlich die Liebesgeige.
Ein tüchtiger Hornist, der Käfer, schnurrt,
Die Mücke schleift behend die Silberschwingen,
Daß heller der Triangel möge klingen;
Diskant und auch Tenor die Fliege surrt;
Und, immer mehrend ihren werthen Gurt,
Die reiche Katze um des Leibes Mitten,
Ist als Bassist die Biene eingeschritten:
Schwerfällig hockend in der Blüte rummeln
Das Contraviolon die trägen Hummeln.
So tausendarmig ward noch nie gebaut
Des Münsters Halle, wie im Heidekraut
Gewölbe an Gewölben sich erschließen,
Gleich Labyrinthen in einander schießen;
So tausendstimmig stieg noch nie ein Chor,
Wie’s musizirt aus grünem Haid hervor.
(…)

SoundCite JS: Wie funktioniert’s?

Auf der Plattform SoundCiteJS sind die Clips im Handumdrehen erstellt, die Plattform erklärt das Prozedere in drei Schritten. Eigentlich sind es vier Schritte, denn vorbereitend solltest du …

1.) Sound publizieren: Die Audios müssen online verfügbar sein. Lade ein Soundfile – möglich sind die Formate MP3, M4A, WAV und Ogg, für das Ausspielen auf iOS wird .mp3 empfohlen – entweder auf deinen Webspace oder in deine WordPress-Mediathek und kopiere dir den Link zur Audiodatei in deinen Zwischenspeicher. In WordPress findest du den Link im Bearbeitungsmodus einer Mediendatei hinter dem Button „URL in Zwischenablage kopieren“.

2.) Sound laden: Öffne das Tool SoundCiteJS im Browser deiner Wahl, kopiere den Link zum Audiofile in das erste Feld und drücke „Load“.

3.) Clip erstellen: Ist die Datei geladen, bekommst du mehrere Optionen: Du kannst das Audio anhören, durch Setzen von Start- und Endzeit einen Ausschnitt auswählen (oder die ganze Datei nutzen), festlegen, ob und wie oft der Sound wiederholt wird und hinter welchem Wort in deinem Text er hinterlegt sein soll. All diese Optionen lassen sich auch nachträglich ändern – insbesondere die Wahl des Textabschnitts wirst du womöglich erst später treffen wollen; lass in diesem Fall einfach „listen“ stehen. Ein Klick auf „Create clip“ generiert den Code mit den Parametern, die du in diesem Schritt ausgewählt hast.

4.) Sound im Text einbetten: Kopiere dir den Embed-Code und setze ihn dort ein, wo du ihn brauchst: Im WordPress-Editor deines Beitrag zum Beispiel oder auf einer Website, deren Datei du in einem HTML-Editor bearbeitest. 

Der generierte Embed-Code lässt sich, wie oben erwähnt, leicht anpassen: Start- und Endzeitpunkt sind im Code vermerkt, ebenso, wie oft der Clip abgespielt werden soll („data-plays“). Und natürlich lässt sich „listen“ durch jedes beliebige Wort oder jeden gewünschten Satzteil ersetzen. Im Beispiel oben sieht der Code für das erste hinterlegte Audio so aus:

<span class="soundcite" data-url="https://www.dailymo.de/wp-content/uploads/grillle.mp3" data-start="0" data-end="9000" data-plays="1">Grille</span>

Damit das Ganze funktioniert, fehlt allerdings noch ein letzter Schritt. SoundCiteJS liefert dir unterhalb deiner Clips unter dem Punkt „3“ einen weiteren Code: Er lädt die benötigten Javascript-Dateien, die dafür sorgen, dass der Player tut, was er soll, und muss vor dem eigentlichen Embed-Code deines ersten Clips eingefügt werden. WordPress-User können einfach das zugehörige Plugin installieren.

Quelle für Sounds und Geräusche

Woher bekommt man nun Sounds, wenn man sie nicht selbst erstellen kann? Da lohnt ein Blick in die Hörspielbox. Sie bietet ein gut verschlagwortetes Soundarchiv mit mp3-Dateien – auch einige der oben verwendeten Geräusche entstammen hoerspielbox.de. Der Download ist kostenlos, allerdings wird um eine Spende gebeten. Und: Eine kommerzielle Nutzung bedarf der schriftlichen Zustimmung. Mehr dazu in den Nutzungsrechten.

Wie Frankfurt gewählt hat

Die Bundestagswahl ist gelaufen, der Zorn über den (erwartbaren) Einzug von Rechtsextremen ins Parlament, darunter brandgefährliche Demagogen, legt sich hoffentlich nicht so schnell. Sich an Nazis im Bundestag zu gewöhnen, als sei ihre Existenz ein Naturgesetz, ist keine Option. Dabei ist mir ganz wurscht, in welcher Partei die Rassisten sitzen. Das Geschwafel vom Schließen offener rechten Flanken lässt hier nichts Gutes erwarten. Eine Hoffnung: Falls die Grünen sich auf ihren alten Kampfgeist und ursprüngliche Positionen besinnen, könnte ihnen in einer „Jamaika“-Koalition eine wichtige Rolle zukommen. Allein – mir fehlt der Glaube …

Frankfurts Sympathie für „Jamaika“

Wie steht eigentlich Frankfurt am Main zu „Jamaika“? Inspiriert von einer Visualisierung auf Spiegel Online (die ihrerseits inspiriert wurde von The Two Americas of 2016 der New York Times) habe ich für 376 Frankfurter Wahlbezirke ausgewertet, wie stark der gemeinsame Anteil an Zweitstimmen von CDU, Grünen und FDP jeweils ausfällt. Das Ergebnis ist eine Karte, erstellt mit Carto, die anschaulich macht, wo die Sympathie für die „Jamaika“-Parteien stärker ausgeprägt ist, und wo sie ohne Mehrheit dasteht.

Stärkste Parteien in den Wahlbezirken

Eine weitere Karten-Visualisierung – ebenfalls auf Wahlbezirk-Ebene – zeigt auf einen Blick, welche Partei stärkste Kraft geworden ist (und nach dem Klick auch alle Ergebnisse des Wahlbezirks). Die Karte macht auch ein interessantes Detail sichtbar: In drei Wahlbezirken gibt es ein Zweitstimmen-Patt. In den Wahlbezirken 58001 (Wahlgebäude Helene-Lange Schule) in Höchst und 41003 (Kerschensteinerschule) in Hausen kommen CDU und SPD übereinstimmend auf jeweils 24,3 Prozent. Kurios das Patt im Innenstadt-Wahlbezirk 7001 (Julius-Leber-Schule): Hier liegt die CDU mit 19,1 Prozent der Zweitstimmen gleichauf mit – den Linken!

Alle Wahlbezirke als Diagramm

Neben den 376 dargestellten Wahlbezirken hat Frankfurt 114 Briefwahlbezirke, die bei der Kartenvisualisierung außen vor bleiben. Um auch sie verfügbar zu machen, habe ich zusätzlich ein interaktives Diagramm mit Datawrapper umgesetzt, das die Ergebnisse filterbar nach allen 490 Wahlbezirken zeigt.

Die Schwächen von Datawrapper

Erststimmen und Zweitstimmen in 45 Frankfurter Stadtteilen sowie in zehn angrenzenden Wahlkreisen im Rhein-Main-Gebiet: In der Wahlnacht und an den Tagen danach waren mehr als 120 Ergebnis-Grafiken zu erstellen. Datawrapper zeigt bei so einer Massenproduktion eine schmerzhafte Schwäche: Es gibt keine Möglichkeit, Zahlenformate (z.B. eine Stelle nach dem Komma) oder Farben (etwa der Parteienbalken) voreinzustellen – jedenfalls nicht in dem von uns genutzten Tarif Single Flat, der 29 Euro im Monat kostet. Nervig – und zeitaufwändig.

Für die Präsention der Ergebnisse in den beiden Frankfurter Wahlkreisen habe ich erneut Genially genutzt:

 

Tools und Quellen
Wahlbezirk-Geodaten auf offenedaten.frankfurt.de
Kartenvisualisierungstool Carto
Diagramm-Tool Datawrapper
Storytelling-Tool Genially
Wahlergebnisse vom Bürgeramt, Statistik und Wahlen
Tabellenkalkulation, hier: Open Office
Link: Bundestagswahl-Ergebnisse – Wie Frankfurt zu „Jamaika“ steht
Link: Bundestagswahl in Frankfurt – So hat Ihre Nachbarschaft gewählt

Visuelles Storytelling mit Genially

Die Bundestagswahl bietet eine gute Gelegenheit, neue Tools im Redaktionsalltag zu testen. Für die Präsentation von Kandidatenporträts auf FR.de habe ich ein Werkzeug eingesetzt, das ich im Frühjahr auf der re:publica kennengelernt hatte: Genially.

Es dauert einen Moment, bis man sich reingefuchst hat, dann aber ist Genially ein mächtiges Tool, das visuelles Storytelling auf einem hohen gestalterischen Niveau möglich macht. Es bietet ein ganzes Füllhorn an Design-Elementen und Funktionalitäten, um Inhalte interaktiv, multimedial und non-linear zu erzählen – und dabei auch noch gut auszusehen. Texte, Fotos, Grafiken, animierte Gifs, Karten, Video, Audios lassen sich kombinieren, jedes Element animieren und/oder mit Interaktivität ausstatten.

Hier mein Praxisbeispiel: In der Zeitung und auf FR.de porträtieren wir vor der Bundestagswahl die Direktkandidat*innen für insgesamt zehn Wahlkreise in Frankfurt und den angrenzenden Regionen. Das kann man einfach in Textform machen, Bild dazu und fertig. Oder man kann es mit einem Tool wie Genially machen, das sieht dann beisielsweise so aus:

Hier, in meinem Blog, ist es für dieses Genially ein wenig zu beengt. Wählen Sie am besten den Vollbildmodus mit einem Klick unten rechts und blättern Sie sich mal durch die Seiten. Wir haben das Projekt hier prominent platziert und ihm reichlich Raum gegeben.

Vorgefertigte Layouts machen den Start leichter.

Vorgefertigte Layouts machen den Start leichter.

Als Ausgangspunkt kann eines der vorgefertigten Layouts dienen – oder aber man beginnt das eigene Projekt mit einer leeren Seite, „from the scratch“.

Im Prinzip besteht ein Genially aus aneinandergereihten Slides. In meinem Beispiel hat jeder Wahlkreis eine eigene Seite. Die Inhalte – Hintergrund, Texte, Bilder, Buttons – sind in Ebenen angeordnet, wie man sie beispielsweise aus Photoshop kennt.

Offen für externe Inhalte

Jedes Element lässt sich mit Interaktivität versehen. In diesem Fall öffnet sich bei einem Klick auf die Fotos und den Button jeweils ein neues Fenster, mit porträtierenden Texten und einer Balkengrafik. An dieser Stelle habe ich die Möglichkeit genutzt, externe Inhalte einzubinden: Die Grafiken sind mit Datawrapper erstellt und via iFrame im Genially eingebettet. Hier zeigt das Tool eine seiner großen Stärken: Es ist offen für viele Arten externer Inhalte, erleichtert das Einbetten aus gängigen Video- und Audioplattformen, Social-Kanälen, Diagramm-Tools, von Dateien aus Google Drive und Karten aus Google Maps und sogar von Artikeln etwa aus Wikipedia. Aber auch so ziemlich alles andere lässt sich via Code einbetten.

Die Embed-Funktion in Genially bietet viele Optionen.

Die Embed-Funktion in Genially bietet viele Optionen.

Mit Animationen war ich zurückhaltend, das Genially sollte kein Klickibunti werden. Ich habe mich im wesentlichen auf die kreisrunden Kandidatenfotos auf jedem Slide beschränkt: Sie zoomen etwas größer, wenn man mit der Maus darüberfährt – als Hinweis, dass der Klick darauf zu weiteren Inhalten führt.

Alle Wahlkreise sind über eine Karte auf dem Startbildschirm ansteuerbar. Zu diesem Zweck habe ich die Wahlkreise auf der Karte (erstellt mit Carto) mit transparenten Flächen versehen und mit den jeweiligen Wahlkreis-Slides verlinkt. Alternativ kann man, wie oben erwähnt, auch durch die Slides blättern.

Genially bietet die Möglichkeit, jedes Element oder auch die ganze Seite zu animieren.

Genially bietet die Möglichkeit, jedes Element oder auch die ganze Seite zu animieren.

Pro-Funktionen für Einzelprojekt freischalten

Alle wesentlichen Funktionalitäten sind in der kostenlosen Version von Genially verfügbar. Das fertige Projekt lässt sich auch ohne Premium-Account einbetten, verlinken, über Socials verbreiten oder per Mail versenden. Zahlende Kunden können das Projekt herunterladen und auf dem eigenen Server speichern, den „Genially“-Schriftzug verschwinden lassen oder haben Einblick in Zugriffszahlen. Die Premium-Modelle sind gestaffelt, mit monatlichen Abo-Preisen zwischen 10 für den Pro- bis zu 100 Euro für den Master-Account. Für gelegentliche Nutzer gibt es eine coole Alternative: Einige Pro-Funktionalitäten lassen sich für ein paar Euro auch für ein Einzelprojekt freischalten.

Quiz zur Bundestagswahl: Die Wahlprogramme im Wortwolken-Vergleich

In elf Wochen ist Bundestagswahl – und der Satz „Ich weiß nicht, was ich wählen soll“ fällt in meiner Filterblase diesmal noch öfter als sonst. Die Ereignisse des vergangenen Jahres scheinen viele, die sich bislang klar einem Lager zugehörig fühlten, verunsichert zu haben. Eine unionsgeführte Bundesregierung hat die Wehrpflicht abgeschafft, den zweiten Atomausstieg initiiert, das Dosenpfand eingeführt. Auf dem Höhepunkt der Fluchtkrise bleibt ausgerechnet Merkel als Einzige besonnen (um dann knallhart die Asylgesetze zu verschärfen). Und am Ende macht die Kanzlerin auch noch den Weg für die Ehe für alle frei (um dann dagegen zu stimmen): Das soll die Anhänger beider Lager mal nicht verunsichern!

Es hilft nichts: Wir werden uns die Mühe machen müssen, Wahlprogramme zu lesen.

Einen allerersten (und mitunter unerwarteten) Eindruck gibt die Wortwolke: Welche Begriffe kommen im Programm besonders häufig vor, sind also den Parteien offenkundig wichtig? Die quantitative Auswertung gibt darüber Auskunft. Berücksichtigt sind jene Parteien, die (voraussichtlich, seufz) in den Bundestag einziehen werden. Weiterlesen →

Frankfurt bei Nacht fotografieren

Nachts am Main, mit dem Blick nach Osten. Bild: Monika Gemmer

Nachts am Main, mit dem Blick nach Osten. Bild: Monika Gemmer

Frankfurt bei Nacht: Fast immer, wenn ich im Dunkeln in der Stadt unterwegs bin, will ich diesen Anblick festhalten, und meistens habe ich nur das Handy dabei – entsprechend geraten die Fotos. Aber auch mit der „richtigen“ Kamera gelingt es mir oft nicht, die Skyline, den Main oder Gebäude wie die Alte Oper so festzuhalten, wie sie in der Blauen Stunde direkt nach Sonnenuntergang oder in der nächtlichen Beleuchtung wirken.

Um die Sache mit der Langzeitbelichtung zu lernen, war ich mit einem Fototrainer, einer Canon EOS 70D und einem Stativ dreieinhalb Stunden lang im abendlichen Frankfurt unterwegs. Was ich von diesem Kurs mitgenommen habe und welche Bilder dabei herauskamen, fasst dieser Beitrag zusammen.

Weiterlesen →