Tag 9: SoundCite JS für Audios im Text (inline) – AdvenTOOLender 2018

Herzlichen Willkommen zum neunten Türchen des AdvenTOOLender! Schön, dass du mit dabei bist. Heute möchte ich dir das Tool „Soundcite JS“ vorstellen.  Mit ihm kannst du deine Audios direkt in den Text integrieren und so zum Teil deiner Geschichte machen.

Beispiel: Mein Tagebuch mit Audios

Liebes Tagebuch,

heute hast du eine ganz besondere Aufgabe. Du hältst nicht nur das fest, was ich so den Tag über gemacht habe. Du bist zugänglich für alle Blog-Leser*innen und zeigst ihnen, wie das Tool „SoundCite JS“ funktioniert. Bevor ich begonnen habe, dir diese Zeilen zu schreiben, hat es geregnet. Jetzt fährt ein Auto die Pfützen durchquerend vorbei, die Brockenbahn ist ebenfalls zu hören. Ihre Schienen verlaufen direkt neben meiner Wohnung. Ja, liebes Tagebuch, wo wir schon beim Thema Nässe, Flüssigkeiten und Co. sind: Ich weiß, ich trinke zu wenig, bin aber gerade dabei. Meine App hat mich eben via Push-Mitteilung daran erinnert – vorbildlich habe ich mir direkt ein Glas mit Granatapfel-Saft eingeschenkt. Du findest, ich schweife schon wieder ab und sollte eigentlich das neue Tool für den AdvenTOOLender präsentieren? Da hast du Recht. Auf der Homepage beschreiben die Entwickler, dass es sich um „seamless inline audio“ handelt. Wie du vielleicht schon gemerkt hast, bestehst du heute nicht nur aus Text, liebes Tagebuch, sondern auf manchen Wörtern wurden Audios verankert. Genau das kann man mit dem Tool machen. Wie mir das gefällt? Das sage ich dir gerne: „Ich finde, das ist ein echt cooles Programm, mit dem man Audios schön in die Geschichte integriert, ohne einen nicht so schönen Player zwischen die Zeilen zu quetschen.“ Wie das Ganze funktioniert, beschreibe ich den Blog-Leser*innen jetzt unten, damit sie es selbst nachbauen können. Ich freue mich, dir auch morgen wieder zu schreiben.

In Liebe,

Johanna

Geeignete Themen

Sobald du ein Audio hast, sei es Atmosphäre, wie ein vorbeifahrendes Auto, einen O-Ton oder Musik (natürlich rechtlich mit Lizenzen und Co. geklärt), kannst du „SoundCite JS“ nutzen. Natürlich musst du auch eine Webseite haben, in die das Ganze eingebettet werden soll. Besonders für Reportagen lässt sich das Tool gut verwenden, da die zusätzlichen Töne noch mehr Atmosphäre und Gefühl vermitteln können. Da ist es besonders sinnvoll, wenn im Medienunternehmen neben einer Online-, auch eine Radio-Redaktion besteht, die die Töne vom Termin bereits mitbringt. Auch Artikel, in denen unterschiedliche Personen vorkommen, die ein besonders starkes Zitat gesagt haben oder besser kennengelernt werden sollen, eignen sich. Weitere journalistische Themenideen: Besuch auf dem Weihnachtsmarkt (Vorstellen/Atmosphäre/Gespräche mit Besuchern…), Sportberichterstattung aus dem Stadion, Parteitage (mit Interview-Tönen, Stimmung im Raum,…)

Ungeeignete Themen

Sobald du keine Töne und/oder keine Homepage zum Einbetten hast, macht das Tool keinen Sinn. Ansonsten kannst du sehr frei damit rumexperimentieren.

Die Schritt-für-Schritt-Anleitung

Genug von meinem Beispiel und möglichen Themenideen – jetzt zeige ich dir, wie du ganz einfach deine eigenen Audios in deinen Text mit „SoundCite JS“ einbetten kannst:

1.) Lade als erstes dein Audio hoch. Bei mir war das in den Medien bei WordPress, die Entwickler von „SoundCite JS“ empfehlen auf ihrer Homepage SoundCloud. Wichtig ist, dass du eine öffentlich zugängliche URL bekommst, auf die das Tool und damit letztendlich auch deine Homepage, zugreifen kann. Bei WordPress ist es beispielsweise so, dass du deine MP3-Datei einfach unter der Kategorie „Medien“ hochlädst. Sobald du auf deine geuploadete Datei klickst, siehst du rechts die dazugehörige URL (siehe Foto 1). Das Audio muss einfach nur dort befinden und nicht noch zusätzlich in einem Artikel vorhanden sein. 

Die URL befindet sich bei WordPress auf der rechten Seite des hochgeladenen Mediums. Foto 1: Screenshot

2.) Sobald du die URL zu deinem Sound/Audio hast, gehst du auf die Homepage von SoundCite JS. Dort klickst du oben auf den grünen Button „Make a Clip“.

3.) Jetzt hast du eine hellblau hinterlegte Übersicht vor dir, die aus drei Schritten besteht. Diese müssen wir jetzt gehen, um zu ermöglichen, dass du das Audio auf diese besondere Weise in den Text einbinden kannst. Füge also zunächst in die Zeile von Punkt 1 deine URL (siehe Schritt 1) ein. Klicke danach auf den blauen „Load“-Button, der sich neben dieser Zeile befindet.

Im Tool selbst kannst du noch Einstellungen bezüglich deines Audios treffen. Foto 2: Screenshot

4.) Durch das Laden des Audios bekommst du weitere Einstellungsmöglichkeiten angezeigt (siehe Foto 2). Zunächst siehst du dein Audio in einem Player und kannst es dir anhören. Darunter befinden sich die Felder „Start Time“ und „End Time“. Du kannst hier also einstellen, welche Bereiche des Audios genutzt werden sollen. Bei mir war das immer das gesamte Audio. Diese Funktion ist aber super hilfreich, wenn man seine Töne in einer Datei hat, aber unterschiedliche Teile nutzen möchte. Dann brauchst du die Datei nicht vorab bearbeiten, sondern kannst diesen Schritt direkt im Tool vornehmen. Neben der Start-und-End-Funktion siehst du unter dem Player, wie lang dein Audio ist, das du ausgewählt hast und auf welches Wort du das Audio setzt. Voreingestellt ist „Listen“. Da kannst du deine jeweiligen Wörter eingeben, die dann mit dem Audio hinterlegt werden. Bei mir ist das beispielsweise „Brockenbahn ist ebenfalls zu hören“. Solltest du diesen Schritt hier nicht geändert, sondern mit „Listen“ ausgeführt haben, ist das gar kein Problem. Du kannst das Ganze im Embed-Code selbst noch ändern.

Hier siehst du den Embed-Code und blau markiert, wo der Text auf den das Audio gelegt wird, stehen muss. Foto 3: Screenshot

5.) Wenn du die Einstellungen aus Schritt 4 alle getroffen hast, klicke auf „Create Clip“. So bekommst du den Embed-Code, den die anschließend in deine Homepage einfügen kannst. Hinweis: In nutze WordPress und musste, damit das Ganze funktioniert, noch das Plugin Knight Lab SoundCite JS herunterladen. Für alle Nicht-WordPress-User wird ein weiterer Embed-Code angezeigt, der oben in die Homepage eingebettet werden muss, damit die Funktion mit dem Abspielen der Audios auf den Wörtern möglich ist.

6.) Jetzt bettest du den generierten Code in deine Homepage ein, bei mir sieht das beispielsweise so aus (siehe Foto 3). In Blau habe ich dir hier markiert, auf welchen Wörtern das Audio liegt. Solltest du, wie in Schritt 4 erwähnt, noch „Listen“ im Code stehen haben, kannst du an dieser Stelle die präferierten Worte deiner Wahl einfügen. Platziere den Code so, dass sich dein „SoundCite JS“ perfekt in deinen Text integriert.

Weitere Beispiele

Hier ein paar ausgewählte Beispiele, die ebenfalls „SoundCite JS“ in ihren Online-Artikeln verwendet haben:


Mehr vom AdvenTOOLender

Türchen 11: Genial.ly für interaktive Bilder – AdvenTOOLender 2018

Türchen 10: Wortwolken als Design-Option und Analyse-Tool – AdvenTOOLender 2018

Türchen 8: Interaktiver Daten-Zeitstrahl mit StoryLine JS – AdvenTOOLender 2018

Türchen 7: Storrito für Instagram-Stories vom PC – AdvenTOOLender 2018

Türchen 6: „Steller“ für Fotoalben mit Story – AdvenTOOLender 2018

Türchen 5: Mit Canva schnell schöne Designs erstellen – AdvenTOOLender 2018

Türchen 4: Gifs erstellen mit dem Data Gif Maker – AdvenTOOLender 2018

Türchen 3: Vorher-Nachher-Bilder mit Juxtapose JS – AdvenTOOLender 2018

Türchen 2: Audios visualisieren mit SpareMin Headliner – AdvenTOOLender 2018

Türchen 1: Interaktive Grafiken mit Infogram – AdvenTOOLender 2018


Du hast noch Fragen zu SoundCite JS, Feedback zum AdvenTOOLender oder ein bestimmtes Tool, das ich neben der Adventskalender-Aktion Schritt-für-Schritt erklären soll? Immer her damit! Entweder als Kommentar unter diesen Blog-Eintrag, per E-Mail (johanna.daher@gmx.de), via Kontaktformular oder über die sozialen Kanäle.

6 Gedanken zu „Tag 9: SoundCite JS für Audios im Text (inline) – AdvenTOOLender 2018

Kommentar verfassen