Podcast-Shownotes fristen oft ein stiefmütterliches Dasein. Vermutlich ist sich ein Großteil der Hörschaft gar nicht im Klaren darüber, dass es so etwas wie Shownotes überhaupt gibt – oder die Hörenden haben schlicht an diesem weiterführenden Informationsangebot kein Interesse. Auf der anderen Seiten stehen Podcastende, die ihre Shownotes oft nur sehr dürftig pflegen. Das macht sie in der Folge wiederum für das Publikum nicht interessant und der Teufelskreis mieser Podcast-Beipackzettel ist perfekt. Höchste Zeit, eine digitale Lanze für Shownotes zu brechen!

Soviel zum Thema „Lanze brechen“ (GIF via Tenor).

Nutzt mehr Shownotes! Schreibt wertvollere Shownotes! Bastelt schönere Shownotes! Aber Moment mal … wie kann ich denn Shownotes überhaupt sinnvoll gestalten? Was geht – und was vielleicht nicht? Ich hab das für euch mal getestet!

ZL;NG: Shownotes werden meist sehr stiefmütterlich behandelt – nicht zuletzt von Podcatcher-Entwicklern. Außerdem ist die Unterstützung für HTML-Auszeichnungen und -Einbindungen von App zu App sehr unterschiedlich.

Ein kleines Inhaltsverzeichnis

1. Das Vorwort zum Sonnta.. äh … zum Inhalt!

Auch wenn dieser Rat vielleicht offensichtlich ist: Schreibt Shownotes, die eure Hörer wirklich weiterbringen. Packt Links zu euren Quellen da rein und Links zu den Themen, die ihr im Podcast ansprecht. Packt Links zu den Podcast-Episoden rein, die ihr empfehlt, und Links zu den Youtube-Videos, über die ihr redet. Packt Links zu eurer Webseite rein, Links zum Facebook-Fotoalbum des 80. Geburtstags eurer Großmutter und Links zu eurer Patreon-Seite. Alles, was ich beim Hören eurer Episode vielleicht auch sehen oder lesen will, sollte ich als Hörerin oder Hörer nicht erst im Netz selbst suchen müssen. Sitze ich zum Beispiel auf dem Ergometer im Fitnessstudio (haha!), bin ich froh, wenn ich nur einmal auf den entsprechenden Link dadsch’n und nicht mit meinen schwitzigen Daumen die Google-Suche bemühen muss muss!

Noch ein vielleicht nicht ganz so offensichtlicher Tipp: Schreibt in eure Shownotes ruhig auch die Informationen mit rein, die ihr gedanklich in der „Das wissen meine Hörerinnen und Hörer doch, schließlich hören sie uns ja zu!“-Kategorie verorten würdet. Denn: Es ist nicht gesagt, dass euer Publikum euren Feed überhaupt abonniert hat. Vielleicht ist jemand durch eine Empfehlung zu euch gekommen und hört nur mal kurz in diese eine Episode rein. Oder ihr habt genau wie ich die Null-Nummern-Kuration der Hörsuppe auf Fyyd abonniert, bei der ich mich jedes Mal aufs Neue ärgere, wenn eine Folge einfach nur mit „Die Nullnummer“ betitelt ist – und in den Shownotes dann steht: „Wir stellen uns vor und erzählen, worum es in diesem Podcast geht.“ Shownotes nicht verstanden, sechs, setzen!

Schluss mit der faden Theorie, lieber hier noch zwei Beispiele für Podcasts, die ganz passable Shownotes haben: zum einen der Sendegarten – okay, da sitzt auch jemand während der Aufnahme am Rechner und recherchiert in Windeseile alles nach, worüber geredet wird. Die Shownotes sind damit quasi eine chronologische Linksammlung, die selbst ohne explizit angegebene Zeitmarken (Kapitelmarken werde ich sicher auch bald mal hier thematisieren) gut parallel zum Hören konsumierbar sind. Ein weiteres Paradebeispiel für eine sinnvolle Verwendung von Shownotes ist Forschergeist: Auch hier folgt auf eine kurze Vorstellung von Thema und Gesprächspartner eine chronologische Liste an Themen, die im Podcast zur Sprache kommen.

Chronologische Listen? Ist das nicht so, als würden wir für eine Präsentation Overhead-Folien benutzen? Gibt’s das nicht auch mit etwas mehr Glitzer und Rock’n’Roll? Hmmm, das gilt es nun herauszufinden!

2. Mein Test-Setup

Was Podcasts so charmant macht, ist ihre dezentrale Struktur – es gibt nicht DAS EINE Podcastverzeichnis oder DEN EINEN Podcasthoster. Die Podcast-Welt ist sozusagen plattformagnostisch, was sich sehr positiv auf die inhaltliche und formatbezogene Vielfalt auswirkt, aber eine Katastrophe ist, wenn es um einheitliche Unterstützung von Formaten, Codes, Strukturen oder dergleichen geht. Klingt geschwollen, bedeutet für diesen Beitrag aber einfach: Shownotes folgen zwar einem mehr oder weniger einheitlichen Standard und verstehen sogar HTML, was die Podcatcher bei der Anzeige daraus aber machen, steht auf einem anderen, oftmals sehr schlecht leserlichen Blatt.

Um zu testen, was Shownotes können und was nicht, habe ich bei Podigee mal einen Test-Podcast angelegt und diverse Episoden mit unterschiedlichsten Shownotes- und Shownotes-Formaten bestückt. Natürlich kann ich angesichts der Myriaden an existierenden Podcatchern meinen Test nicht flächendeckend durchführen – ja Mangels eines iMobilgeräts kann ich das ja noch nicht einmal mit dem vermutlich verbreitetsten Podcast-Client. Ihr könnt aber gerne den Feed meines Demo-Podcasts abonnieren und die enthaltenen Folgen mit eurem Client selbst mal durchtesten. Ich für meinen Teil habe meine nachfolgenden Empfehlungen und Nicht-Empfehlungen in diversen Szenarien ausprobiert:

3. Test-Episode 1: einfache Strukturierung und Formatierungen via HTML-Tags (ohne CSS)

Mein Beispiel-Code für die erste Runde an Tests:

Dies ist ein Shownotestest.

Versuchen wir es einfach mal mit ein paar Basics – wie etwa **Fettungen**, _Kursivierungen_, ... 

<h1>...Überschriften von H1</h1> 
<h2>über H2</h2>
<h3>bis hin zu H3</h3>
<h4>und H4.</h4>

> "Ich bin ein Zitat!"

Ich hingegen bin ein Text mit     expliziten        Leerzeichen      zwischen     den     einzelnen      Wörtern
 
Auch würde mich interessieren, wie es mit Listen aussieht:
<ul>
<li>und zwar sowohl</li>
<li>mit einfachen Aufzählungen</li>
</ul>
<ol>
<li>als auch mit</li>
<li>durchnummerierten</li>
<li>Listen</li>
</ol>

<p>Absätze sollten freilich auch funktionieren, auch wenn hier noch etwas mehr Lorem Ipsum drinsteht: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Und was ist <br />
eigentlich<br />
mit<br />
Zeilenumbrüchen?</p>

Fehlt noch was? Ach ja, Hyperlinks und Bilder – gerne auch in Kombination:
<a href="https://www.es-ist-ein-krauss.de/podcast">Testlink</a>

Ohne Link (120x120):
<img src="https://das-a.ch/wp-content/uploads/2018/11/ach_logo_170-e1542655200450.png" width="120" height="120" />

Mit Link (200x200):
<a href="https://das-a.ch"><img src="https://das-a.ch/wp-content/uploads/2018/11/ach_logo_170-e1542655200450.png" width="200" height="200" /></a>

PNG mit Transparenz:
<img src="https://es-ist-ein-krauss.de/wp-content/uploads/2018/04/jk-logo_black_transparent.png" />

Bewegtes GIF:
<img src="https://das-a.ch/wp-content/uploads/2018/11/02_podcatcher_small.gif" />

Und zu guter Letzt noch eine horizontale Linie – obwohl ... doppelt hält ja bekanntlich besser! 
<hr />
The end!
<hr />

Meine Hoffnungen sind groß, das Ergebnis aber doch recht ernüchternd: In meinem bisherigen Lieblingspodcatcher Pocket Casts (OS X) sind zwar alle Bilder vorhanden, jedoch nicht in der per width– und height-Attribut spezifizierten Größe. Immerhin führen meine Links zum jeweils richtigen Ziel und sogar das GIF zappelt fröhlich animiert vor sich hin. Einfache HTML-Auszeichnungen wie <hr> werden vollständig ignoriert – immerhin sind mit ganz arg zusammengekniffenen Augen kleine Unterschiede zwischen der H1-, der H2-, der H3- und der H4-Überschrift zu erkennen. Glaube ich jedenfalls. Das Zitat (huch, das habe ich wohl versehentlich als Markup- und nicht als HTML-Auszeichnung eingefügt – macht aber nichts, weil Podigee das im Hintergrund automatisch umwandelt) ist immerhin eingerückt und meine expliziten Leerzeichen sind auch noch genauso vorhanden wie die Absätze und Listen.

Was Pocket Casts auf meinem Android-Smartphone angeht: Die App zeigt sehr konsistent alles genauso an wie die OS-X-App. Vermutlich, weil beiden eine einfache Webansicht zugrunde liegt, die wohl auch in der Web-Version von Pocket Casts zum Einsatz kommt.

Aber es gibt ja auch noch andere Clients: iTunes (OS X) zum Beispiel. Haha, der war gut! iTunes zeigt meines Wissens nach nirgendwo formatierte Shownotes an. Einzig, wenn ich mit dem Mauszeiger über das i–Knöpflein neben der jeweiligen Podcastfolge fahre, fördert das eine kurze Textversion der Shownotes zutage – weil ich meinen Demo-Feed aber nicht bei Apple ins Podcastverzeichnis eintragen will, sehe ich selbst im Desktop-Client noch nicht einmal das:

Ernüchternd: iTunes.

Weiter im Text, weiter im Test: Podcast Addict auf Android zeigt fast alles genauso an wie Pocket Casts – mit zwei kleinen Ausnahmen: <hr>-Tags werden korrekt in horizontale (= „rüberwärts“) Linien umgewandelt und die explizit angegebenen Bildgrößen werden auch tatsächlich berücksichtigt. Damit besteht Podcast Addict diesen ersten Test ohne Abzüge in der B-Note!

Und dann wäre da noch AntennaPod – ebenfalls auf Android. Ich kann mich gar nicht erinnern, dass ich diese App jemals schon heruntergeladen und installiert hätte, aber ich finde Gefallen an dem frischen weißen Design, wo viele andere Podcatcher sonst oft so trüb und schwarz daherkommen. Die Shownotes-Kompatibilität ist ebenfalls sehr gut: AntennaPod zieht problemlos mit Podcast Addict gleich und zeigt von <hr> bis <p> und von explizit mit Größe versehenem Bild bis animiertem Gif alles einwandfrei an.

4. Test-Episode 2: Formatierungen mit CSS

Dann geben wir uns jetzt doch mal die volle CSS-Styling-Dröhnung: runde Ecken, Hintergrundfarben, Schriftarten, you name it!

Dies ist ein Shownotestest.

<div class="ach-abbinder"><pre>+-------------------------------+
       A      ACH   A  A    ACHA 
       C     A      C  C  HA   CH
      AC    AC      H  H  A    CH
     ACH   A        A  ?     ACH 
 CH AC ?A  C        C  A    AC   
 A A    A  H        ACH?   AC  AC
 ACH?ACH?  ?        A  ?    ACHA 
 AC     H  AC       C  A         
C ACH?ACH   AC      H  C     AC  
A        A    ACH   A  H     CH  
+-------------------------------+
</pre>
    <p>Dir gefällt, was du hörst? Sehr fein! Wir stecken nämlich sehr viel Herzblut in dieses Projekt – und für uns ist es Ehrensache, dass das Triumvirat für immer kostenlos bleiben wird. Großes englisches Lord-Ehrenwort! Jedoch würdest du uns wirklich, <i>WIRKLICH</i> weiterhelfen, wenn du:</p>
    
    <div class="ach-list">
      <i class="fa fa-star"></i> <div class="button"><a target="_blank" href="https://itunes.apple.com/de/podcast/ach-triumvirat-f%C3%BCr-historisch-inspirierte-humorvermittlung/id1220156551?mt=2&app=podcast">BEWERTEST.</a>
            </div>
         <br />
      <i class="fa fa-envelope"></i><div class="button"><a target="_blank" href="mailto:?subject=Ach-Feedback">'NE MAIL SCHICKST.</a>
        </div>
         <br />
        <i class="fa fa-link"></i><div class="button"><a target="_blank" href="https://das-a.ch">KOMMENTIERST!</a>
            </div>
        <br />
         <i class="fa fa-amazon"></i><div class="button"><a target="_blank" href="https://amzn.to/2JpcNZE">BEI AMAZON  SHOPPST.</a>
            </div>
         <br />
          <i class="fa fa-paypal"></i><div class="button"><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GPFQECJDJVGVL&source=url">MIT PAYPAL SPENDEST.</a>
            </div>
      
    </div>
</div>
   

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

    
<style type="text/css">
    .ach-abbinder pre {
        font-family: monospace;
    }
    
    .ach-abbinder .button a {
        text-decoration: none;
        color: inherit;
    }
 
    .ach-abbinder .button:hover, .button:active {
        color: #D7CABA;
        box-shadow: 3px 3px 4px 4px rgba(215,202,186,.4);
    }

    .ach-abbinder input.button:hover, input.button:active {
        color: #D7CABA;
        box-shadow: 3px 3px 4px 4px rgba(215,202,186,.4);
    }
    
    .ach-abbinder .button {
        backface-visibility: hidden;
        position: relative;
        cursor: pointer;
        display: inline-block;
        white-space: nowrap;
        background: #519797;
        border-radius: 8px;
        border: 0px solid #264848;
        border-width: 0px 0px 0px 0px;
        padding: 12px 16px 12px 16px;
        box-shadow: 3px 3px 4px 4px rgba(31.5483870967742%,31.54578286670725%,31.54578286670725%,0.4);
        color: #fff;
        font-size: initial;
        font-family: Arial;
        font-weight: 900;
        font-style: normal;
        margin-bottom: 12px;
    }
    
   
    .ach-abbinder i.fa {
        color: #519797;
        font-size: 1.2em;
        background: rgba(0%,0%,0%,0.2);
        border-radius: 100px;
        display: inline-block;
        border: 0px solid transparent;
        border-width: 0px 0px 0px 0px;
        padding: 12px;
        margin: 0px 10px 0px 0px;
        position: static;
        box-shadow: inset 0px 1px 2px rgba(0%,0%,0%,0.4),inset 0px -1px 0px rgba(100%,100%,100%,0.5)
    }
    
    .ach-abbinder .button > .ld {
        font-size: initial
    }

    
    .ach-abbinder pre {
        color: #519797;
        font-weight: bold;
    }
    
    .ach-abbinder {
        line-height: 1.5;
        font-family: Arial, sans-serif;
        width: 320px;
    }
    
    
</style>

Das ist natürlich eine ganz andere Herausforderung – aber wer weiß: Womöglich können moderne Podcatcher so etwas längst locker interpretieren und ich grübele mir hier umsonst einen Wolf, wie ich größtmögliche Shownotes-Kompatibilität herstellen kann. Obigen Code habe ich für unseren heiteren Geschichtspodcast Ach? entworfen, um dort einen schön (naja für meine CSS-Kenntnisse „schön“) formatierten Abbinder unter jeder neue Folge packen zu können. So richtig schrill, mit etwas Klicki und etwas Bunti, also genau das Richtige für unseren kleinen Test hier!

Abhängig davon, was von diesem Codeschnipsel vielleicht funktioniert und was nicht, lassen sich eventuell ja auch kreative Fallback-Lösungen finden. Aber erst der Test! Den Anfang macht wieder Pocket Casts auf OS X:

Ein weiteres Mal überzeugt Pocket Casts eher mit Konsistenz denn mit Kompatibilität: Alle drei Versionen zeigen weder Schriftfarben noch als Button formatierte Links oder gar Font-Awesome-Icons an. Hmpf. Wie fad. Immerhin funktionieren die mailto:-Links und auch der <pre>-Codeblock wird mit einer Monospace-Schriftart beinahe wie gewünscht angezeigt. So ist immerhin mal ein Minimum an Kontrolle über die Darstellung unserer Inhalte sichergestellt. Dazu mehr weiter unten.

AntennaPod und Podcast Addict schneiden erneut wesentlich besser ab: Der Monospace-Bereich wird korrekt und in Farbe dargestellt, ebenso meine eigens als Buttons formatierten Links (jedoch nur bei AntennaPod in den richtigen Farben). Was mich wirklich überrascht: Beide Podcatcher zeigen anstandslos Font-Awesome-Icons an – damit hätte ich nun wirklich nicht gerechnet.

Podcast Addict und auch Pocket Casts straucheln auf meinem Android-Testsmartphone hingegen bei mailto:-Links: Selbst wenn ich den Link explizit mit der E-Mail-App öffne, wird die Zieladresse nicht korrekt übergeben. Auch der Umweg über den Browser, der eigentlich problemlos funktionieren sollte, führt aus irgendeinem Grund nicht zum gewünschten Ziel. Ärgerlich das.

5. Test-Episode 3: Zeichenbreite

Die Sache mit meinem mittelmäßig gelungenen Ascii-Logo zeigt mir einen weiteren interessanten Aspekt auf, den ich bei meinem Test bislang nicht berücksichtig hatte: Die Podcatcher stellen unterschiedlich viele Zeichen pro Zeile dar. Eine logische Folge der verschiedenen Schriftbilder – ich habe mir nur bislang darüber nicht weiter den Kopf zerbrochen. Das schreit nach einem weiteren Test! Um die Kirche aber im Dorf und den Raktenwissenschaftler im Kosmodrom Wostotschny zu lassen, hier nur ein ganz simpler Test, um die Zeichenbreite in den Shownotes-Bereichen der einzelnen Podcatcher zu ermitteln:

123456789 123456789 123456789 123456789 123456789 123456789
123456789 123456789 123456789 123456789 123456789 123456789
123456789 123456789 123456789 123456789 123456789 123456789

Das Ergebnis:

Pocket Casts (Web; Chrome auf OS X)

Bei näherer Betrachtung fällt mir auf: Den Wortumbruch habe ich nicht mit bedacht. Also noch ein Versuch – und damit das <pre>-Element den normalen Textbereich nicht beeinträchtigt lege ich sicherheitshalber diesmal zwei Episoden mit den folgenden Inhalten an:

1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 

und:

<pre>1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 </pre>

Das Ergebnis:

Als Shownotes-Sherlock habe ich damit folgende Zeichenzahlen ermittelt:

ClientPodcast Addict (Android)AntennaPod (Android)Pocket Casts (OS X; Desktop)Pocket Casts (Android)
Zeichenbreite regulär54
(Landscape 98)
44
(Landscape: 86)
10456
Zeichenbreite <pre>/Monospace54
(Landscape 98)
unbegrenzt70+38(+)

Zusätzliche Beobachtung: Fehlen innerhalb eines <pre>-Blocks manuelle Umbrüche, laufen die Texte in vielen Podcatchern einfach seitlich aus dem sichtbaren Bereich hinaus. Ich bin mir nur noch nicht sicher, ob ich das gut (weil konsequent) oder doof (weil sieht doof aus) finden soll.

Übrigens: Wenn ihr das gerne selbst mir schönen Ascii-Kunstwerken ausprobieren wollt, lege ich euch diese Seite ans Herz.

6. Das große Finale: Embedds in Episode 4

Nun der Extremtest: iFrames, Javascript-Embedds, Webplayer-ception, Youtube-Videos. Wäre doch ganz nett, wenn wir Shownotes einfach in ein iframe packen und sie nachträglich noch ganz einfach ändern könnten, nicht? Zugegeben, der Nutzen einer solchen Möglichkeit ist begrenzt – das soll mich aber nicht davon abhalten, es einfach mal auszuprobieren:

Dies ist ein Shownotestest.

<strong>Youtube-Iframe:</strong>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


<strong>Podigee Podcast Player (Javascript):</strong>
<script class="podigee-podcast-player" src="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="https://demo.podigee.io/3-demo-episode-3/embed?context=external"></script>


<strong>Standard-Iframe:</strong>
<iframe src="https://das-a.ch"></iframe>


<strong>HTML5-Audio:</strong>
<audio controls>
  <source src="https://cdn.podigee.com/media/podcast_4644_ach_triumvirat_fuer_historisch_inspirierte_humorvermittlung_episode_140_33_die_tortour_der_1_tour_de_france.mp3?v=1564473687&source=webplayer-download" type="audio/mpeg">
Your browser does not support the audio element.
</audio>


<strong>Giphy-Embedd (iframe)</strong>
<iframe src="https://giphy.com/embed/C4VDtgpxoGK88" width="480" height="391" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/fail-fire-explode-C4VDtgpxoGK88">via GIPHY</a></p>

<strong>Javascript-Snow (Canvas + JS)</strong>
<canvas id='canv'></canvas>
<h2>Midnight Snow</h2>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Molle:400italic&subset=latin,latin-ext);
body{
background-color: hsla(0,0%,0%,1);
margin: 0px;
overflow: hidden;
font-family: 'Molle', cursive;
}
h2{
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate( -50%, -50%);
  font-size:3em;
  color:hsla(255, 255%, 255%, .1);
}
</script>
<script type="text/javascript">
var c = document.getElementById('canv'), 
    $ = c.getContext("2d");
var w = c.width = window.innerWidth, 
    h = c.height = window.innerHeight;

Snowy();
function Snowy() {
  var snow, arr = [];
  var num = 600, tsc = 1, sp = 1;
  var sc = 1.3, t = 0, mv = 20, min = 1;
    for (var i = 0; i < num; ++i) {
      snow = new Flake();
      snow.y = Math.random() * (h + 50);
      snow.x = Math.random() * w;
      snow.t = Math.random() * (Math.PI * 2);
      snow.sz = (100 / (10 + (Math.random() * 100))) * sc;
      snow.sp = (Math.pow(snow.sz * .8, 2) * .15) * sp;
      snow.sp = snow.sp < min ? min : snow.sp;
      arr.push(snow);
    }
  go();
  function go(){
    window.requestAnimationFrame(go);
      $.clearRect(0, 0, w, h);
      $.fillStyle = 'hsla(242, 95%, 3%, 1)';
      $.fillRect(0, 0, w, h);
      $.fill();
        for (var i = 0; i < arr.length; ++i) {
          f = arr[i];
          f.t += .05;
          f.t = f.t >= Math.PI * 2 ? 0 : f.t;
          f.y += f.sp;
          f.x += Math.sin(f.t * tsc) * (f.sz * .3);
          if (f.y > h + 50) f.y = -10 - Math.random() * mv;
          if (f.x > w + mv) f.x = - mv;
          if (f.x < - mv) f.x = w + mv;
          f.draw();}
 }
 function Flake() {
   this.draw = function() {
      this.g = $.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.sz);
      this.g.addColorStop(0, 'hsla(255,255%,255%,1)');
      this.g.addColorStop(1, 'hsla(255,255%,255%,0)');
      $.moveTo(this.x, this.y);
      $.fillStyle = this.g;
      $.beginPath();
      $.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true);
      $.fill();}
  }
}
/*________________________________________*/
window.addEventListener('resize', function(){
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);
</script>

Wie nicht anders zu erwarten, wurde das Inline-Javascript (Schnee!) von allen Podcatchern einfach ignoriert – dennoch gab es einige Überraschungen: Mein bisheriger Lieblingsclient Pocket Casts filtert stumpf einfach alles heraus, was ich ihm an Einbettungen vorgesetzt habe:

Pocket Casts (Android)

Wohingegen Podcast Addict immerhin das Youtube-Video, den Podigee-Podcast-Player (via Javascript) und das Standard-Iframe problemlos anzeigt. Das Iframe von Giphy und der HTML5-Audioplayer funktionieren hingegen nicht:

Dieses Mal enttäuscht mich auch AntennaPod, wo zwar das Iframe und der eingebettete Audio-Player korrekt dargestellt werden, die anderen Einbettungen aber fehlen:

Wie ich es fast schon erwartet habe, herrscht hier absolute Uneinigkeit. Die Schlussfolgerung kann demnach nur lauten: Bettet solchen Kram am besten nicht in eure Shownotes ein – und wenn doch, dann nur so, dass es nicht stört, wenn sie am Ende fehlen.

Spontane Bonus-Idee: Zählmarken

Da so gut wie jeder Podcatcher mindestens mal Bilder anzeigen kann, lassen sich Shownotes womöglich auch noch für andere Zwecke einsetzen: Zugriffe zählen. Damit ließe sich dann endlich auch mal die eine Frage™️ beantworten, die Podcastende umtreibt, seit Steve „Rollkragenpolluver“ Jobs das Wort Podcast zum ersten mal in eine antike Steintafel gemeißelt hat: Wer, wenn überhaupt jemand, liest verdammt nochmal eigentlich meine Shownotes‽

Warum also nicht einfach mal eine unsichtbare Zählmarke (zum Beispiel einen transparenten 1×1-Pixel) in die Shownotes verbauen und später in den entsprechenden Server-Logfiles selbst auswerten, wie oft und mit welchen Clients die Shownotes aufgerufen worden sind? Klingt nach einem Plan!

Hier dazwischen <img src="https://es-ist-ein-krauss.de/1x1_blind.png" width="1" height="1" />sollte man den Pixel eigentlich gar nicht bemerken.

Es wäre mir ein Leichtes, hier noch einmal auf Pocket Casts herumzuhacken, denn meine mir nun schon gar nicht mehr ganz so liebe Lieblings-App macht aus dem unsichtbaren Zählpixel das hier:

Na gut, vielleicht hätte ich das Ding nicht mitten im Satz „verstecken“ sollen – denn auch alle anderen Podcatcher brechen an dieser Stelle den Text einfach um oder fügen viel zu große Abstände um das vermeintliche Bild herum ein. Merke also: Zählpixel nur dort einbauen, wo sie nicht stören, zum Beispiel ganz unten in den Shownotes. Macht aber für den Test nichts, denn ein Blick in meine Webserver-Logfiles offenbart, dass der Plan durchaus funktioniert:

Serverlogfile Zählpixel Podcast

Mag sein, dass wir hier noch ein bisschen filtern müssten und mehrere einzelne Requests zu einer Anfrage gruppieren, aber das ist nun wirklich ein Thema für ein Andermal.

Fazit

In dem Test ist mir bewusst geworden: Obwohl ich bisher immer auf Pocket Casts geschworen habe – denn immerhin gibt es hier plattformübergreifende Synchronisation –, nervt mich dieser Podcatcher zusehends. Und das nicht mal nur wegen der schlechten HTML-Unterstützung in den Shownotes, auch komme ich noch immer nicht mit dem neuen Design aus dem letzten größeren Update zurecht. Als ob das noch nicht genug wäre, fehlen außerdem grundlegende Funktionen wie „manuelles Aktualisieren eines Feeds“ (oder sie wurden mit besagtem Update extrem gut versteckt). Vielleicht ist es doch langsam an der Zeit, auf AntennaPod umzusteigen.

Unabhängig von meinen persönlichen Player-Referenzen steht es insgesamt eher schlecht um die Shownotes: Alles, was über nur im Ansatz formatierte oder mit Listen strukturierte Begleitinformationen hinausgeht, wird mit an Sicherheit grenzender Sicherheit nicht flächendeckend korrekt angezeigt. Das bedeutet im Umkehrschluss: Wagt am besten keine allzu kreativen Experimente in euren Shownotes, sofern ihr nicht einen Teil eurer Hörerschaft von den Inhalten ausschließen wollt. Solange jedoch der Fallback auf eine Basisdarstellung funktioniert, schadet es aber auch nicht, ein paar zusätzliche CSS-Formatierungen oder gar Icon-Einbindungen zu integrieren, die dann eben nur in den unterstützen Podcatchern entsprechend dargestellt werden.

Viel wichtiger ist hier, dass eure Shownotes den Lesenden inhaltlich auch tatsächlich etwas bringen. Vielleicht liest nicht jeder die Shownotes – aber jeder, der die Shownotes liest, hat eine gewisse Erwartungshaltung an deren Informationsgehalt. Enttäuscht eure Hörerinnen und Hörer nicht!

PS: Nachdem ich nun viel zu viel Zeit in dieses noch immer sehr lückenhafte Experiment investiert habe, ist mir im Netz ein ganz ähnlicher, wenngleich auch etwas breiter angelegter Test bei Podnews begegnet. Tja, dann hätte ich mir die Arbeit hieran wohl sparen können …

In diesem Sinne: Wir hören uns!