Hauptinhalt

Audio-Player

letzte Aktualisierung der Seite: Version 2.26.0

Die Audio-Player-Komponente dient der Einbindung von mp3-Dateien. Zum Abspielen der Audio-Datei ist standardisierter Player implementiert, der die üblichen Steuerelemente bereitstellt.

Die Komponente bietet neben Titel, Beschreibung und Bild eine Verweisliste für die mp3-Audiodatei und eines optionalen Transkripts zum Download an.

Der Audio-Player kann im Inhaltsbereich und im Inhaltsteiler verwendet werden, sowie in Akkordeons. Die Darstellung passt sich dem verfügbaren Platz responsiv an. 
 

Beispieleinbindung eines AudioPlayers

Alternative Bildbeschreibung
Optionaler Bildbeschreibungstext  © Quelle des Bildes

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. 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.

JavaScript-Einbindung

Quellcode

window.additionalComponent.load('audiointegration').then(function () {
    $("[data-component='686871689']").sn_audiointegration();
});

Parameter und Attribute

Funktionsaufruf :

Name Bedeutung Wert Obligatorisch
data-component Attribut des HTML-Knotens, an dem die Audio-Player-Komponente initialisiert wird. alphanumerischer Wert JA

 

HTML-Einbindung

Quellcode

<article class="xm_audio" data-component="686871689">
    <a id="a-686871689"></a>
    <div class="xm_audio__content xm_audio__content--has-image">
        <h3 class="xm_audio__headline">Überschrift</h3>
        <figure class="xm_audio__figure">
            <img class="media-object hidden-no-js" src="" alt="" data-src-maxwidth="" data-element="responsiveImage" data-grid-image="false" data-size="media-figure-small">
            <figcaption>
                <span class="media-caption">Bildunterschrift</span>
                <span class="media-copy">Copyright</span>
            </figcaption>
            <span class="sr-only"></span>
            <button class="btn btn-image-fullscreen" type="button" aria-label="Vollbildmodus öffnen: Bildbeschreibung" title="Vollbildmodus öffnen" data-element="btnFullscreen" aria-haspopup="true"></button>
        </figure>
        <p class="xm_audio__description">Beschreibung</p>
        <div class="xm_audio__control">
        </div>
        <div class="xm_audio__list">
            <ul class="list-links">
                <li>
                    <a href="LinkzumAudio.html" target="" title="Titel">Audio zum Download (.mp3, 13,37 MB)</a>
                </li>
                <li>
                    <a href="LinkzumTranskript.html" target="" title="Titel1">Transkript zum Download (.pdf, 1,98 MB)</a>
                </li>
            </ul>
        </div>
    </div>
</article>

Parameter und Attribute

ARTICLE-Tag - Zeile 1

Name Bedeutung Wert Obligatorisch
data-component Dient der Identifikation mittels JavaScript und muss dem Wert data-component aus dem JavaScript-Code entsprechen. alphanumerischer Wert JA

Parameter und Attribute

Abhängigkeiten

https://github.com/sampotts/plyr

Die "plyr.js"-Bibliothek ist eine JavaScript-Bibliothek zur Medienwiedergabe und verfügt über folgende Abhängigkeiten. 

  1. jQuery: jQuery-Funktionen und -Methoden werden verwendet, um bestimmte Aufgaben auszuführen

  2. GreenSock Animation Platform (GSAP): Für die Animation und Interaktivität der Medienelemente

  3. Hls.js oder Shaka Player: Für die Wiedergabe von HLS oder DASH (Es wird aktuell keine Streaming-Technoligie im Audio-Player angeboten)

  4. Font Awesome: Für die Darstellung von Symbolen und Icons in der Benutzeroberfläche

zurück zum Seitenanfang