In diesem Tutorial zeige ich euch, wie ihr einen Audio-Player im Look und Feel von iTunes für mobile Ansichten erstellt. Live könnt ihr den Player auf folgender Seite ansehen www.flyingfox-web.com/8minuten.

Natürlich funktioniert das ganze auch am Desktop, auf Smartphones im Hochformat kommt der Effekt am Besten.

Vorbereitung

Wir benötigen hierfür eine Seite, die als „Audio-Player“ funktioniert. Die Seite selbst habe ich sehr schlicht gestaltet, da der Hauptfokus auf dem Audioplayer liegen soll. Ein kleines Intro mit einem „Full-Width-Header“ dient hier als Start. Zusätzlich wird eine „Java-Script-Datei“ benötigt, die ich für meinen Player geschrieben habe.

Diese ladet ihr per FTP in euer Child Theme Verzeichnis oder fügt den Code in den Divi-Optionen unter „Integration“ im Headbereich ein.

Die Playlist

Leider bietet der Audioplayer von Divi keine Playlist an. Also habe ich mir eine eigene Playlist mit Buttons erstellt. Hierzu benötige ich ein „Text-Modul“ und für die Buttons ein „Code-Modul“.

Code für die Buttons

Pro Titel erstellen wir einen eigenen „button“. Dieser benötigt noch ein „data-music“-Attribut (data-music darf nicht geändert werden) welches das Einblenden des Audioplayers ermöglicht. Eine zusätzliche „Klasse“ hilft später beim Gestalten der Buttons. Ich habe in meinem Falle das Data-Attribut „data-music“ genannt mit dem Zusatz m1, m2, m3 … usw. m1 steht für Track 1 oder Music 1 (m1, m2 usw. darf nach belieben angepasst werden).

<button class="auddioff-play-btn" data-music="m1">Deep Blue</button> 
<button class="auddioff-play-btn" data-music="m2">Spacewalk</button> 
<button class="auddioff-play-btn" data-music="m3">Forest</button> 
<button class="auddioff-play-btn" data-music="m4">Dreamrhythm</button>
CSS Code für die Buttons

Meine Playlist sollte ähnlich aussehen, wie ich es aus iTunes gewohnt bin. Außerdem sollen die Titel auf Smartphones auch einfach bedienbar sein. Im folgenden findet ihr den CSS-Code, den ich verwendet habe, um meine Playlist bzw. die einzelnen Buttons zu gestalten. Dieser kann natürlich frei bearbeitet und geändert werden, um das Aussehen den individuellen Bedürfnissen anzupassen.

.auddioff-play-btn, .auddioff-play-btn button {
 background: #ffffff none repeat scroll 0 0;
 border-color: #bababa;
 border-style: solid;
 border-width: 0 0 1px 0;
 color: #d1005a;
 cursor: pointer;
 display: inline-block;
 font-family: "myriad-pro",Open Sans,Arial,sans-serif;
 font-size: 2em;
 font-weight: 300;
 padding: 0 0 10px;
 text-align: left;
 width: 100%;
 }

/*---Code für das Symbol rechts außen eines jeden Buttons---*/
.auddioff-play-btn::after {
    content: "\35";
    font-family: "ETmodules";
    margin-top: 8px;
    position: absolute;
    right: 0;
    color: #ababab;
}

Der Audio-Container

Als nächstes benötigen wir eine eigene „Section“ für unsere „Audio-Module“. Elegantthemes hat hier ja schon einen schönen Player im Sortiment. In diesen müssen die Informationen für die MP3-Datei, den Künstler und das Cover eingegeben werden. Zusätzlich benötigen wir noch ein „Code-Modul“ für den „Close-Button“. Jeder Track benötigt eine eigene Section. Am Besten eine Section erstellen mit allen notwendigen Werten und diese in der Library abspeichern.

Jeder „Section“ vergeben wir eine ID und eine Klasse, die dafür sorgt, dass der Player ausgeblendet ist („audio-hidden“). Die ID meines ersten Tracks bzw. meiner ersten Section heißt „m1“. Wir erinnern uns, dass der erste Button das „data-music“ Attribut „m1“ hat. Das heißt also, dass jede Section mit einem bestimmten Lied eine ID bekommt, die so heißt wie das Data-Attribut eines Buttons. Button 2 hat demnach als Attribut m2 und somit heißt die ID der Section für den zweiten Track m2.

Ihr könnt die Attributwerte auch ändern, also anstelle m1 könnte auch lied1 als Attribut stehen. Wichtig ist nur, dass die ID der dazugehörigen Section lied1 heißen sollte die durch den Button aufgerufen werden soll.

Wir erstellen jetzt also für jeden weiteren Track eine eigene Section und erstellen für jede Section einen eigenen Button. Wir vergeben jeder Section die ID des Data-Attributs des Buttons bis alle Songs eingefügt sind.
Der Close-Button

Damit wir den Player schließen können, benötigen wir wieder ein Code-Modul in dem wir einen Button einfügen. Dieser Button bekommt das gleiche Data-Attribut zum dazugehörigen Track-Button. Um diesen Button später zu gestalten, bekommt auch dieser eine Klasse zugewiesen.

<button class="audio-close-btn" data-music="m1">Close</button>
CSS für den Close-Button
.audio-close-btn, .audio-close-btn button {
    cursor: pointer;
    padding: 0;
    margin: 0;
    color: #d1005a;
    font-family: "myriad-pro",Open Sans,Arial,sans-serif;
    font-size: 1.2em;
    background: transparent;
    border: none;
}

.audio-close-btn::after {
    content: "\33";
    display: block;
    font-family: "ETmodules";
    font-size: 2em;
    left: 0;
    position: relative;
    top: -15px;
}
CSS für das Ein- und Ausblenden der Player

Damit die Player ein- und ausgeblendet werden benötigen wir dafür noch ein paar Zeilen CSS. Wir benötigen also zwei Zustände. Der Code kann natürlich frei bearbeitet werden. In meinem Beispiel werden die Player leicht von unten nach oben eingeblendet. Der Code wird wie immer entweder in den Styles des Child-Themes eingefügt oder in den Divioptionen unter General in Custom CSS.

.audio-hidden { /*---Container geschlossen---*/
 -webkit-transition: all 0.8s ease-in-out 0s;
 transition: all 0.8s ease-in-out 0s;
 opacity: 0;
 filter: alpha(opacity=0); /* For IE8 and earlier */
 position: fixed;
 z-index: -1;
 width: 100%;
 height: 100%;
 top: 40px;
 left: 0;
 right: 0;
 margin: 0 auto;
 }

.audio-shown { /*---Container sichtbar---*/
 -webkit-transition: all 0.8s ease-in-out 0s;
 transition: all 0.8s ease-in-out 0s;
 opacity: 1;
 filter: alpha(opacity=100); /* For IE8 and earlier */
 position: fixed;
 z-index: 999999;
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0;
 right: 0;
 margin: 0 auto;
 overflow: scroll;
 }

Aufrufen der Java-Script-Datei

Am Ende der Seite fügen wir noch ein Code-Modul ein in dem wir den Befehl zum Aufruf des Codes einfügen. Wer den Code aus der Zip-Datei in den Divioptionen einfügt, benötigt diesen Schritt nicht. Achtet darauf, dass der Pfad zur Datei stimmt. Dieser weicht ab, je nachdem wie ihr euer Child-Theme aufgebaut habt!

<script type="text/javascript" src="/wp-content/themes/Divi-child/audioff-fade.js"></script>

Abschließende Bemerkung

Ich habe mit ein wenig CSS das Divi-Audio-Modul noch ein wenig gepimpt und diesem meinen eigenen Look gegeben. Natürlich ersetzt diese Variante keine Musik-App, das soll sie aber auch nicht. Es kann zusätzlich noch Informationen in die Section eines jeden Tracks eingefügt werden, wie z.B. einen Link zu iTunes, Bandcamp oder ähnlichem. Die Java-Datei ist so konfiguriert, dass der Titel des Audio-Moduls automatisch zu spielen beginnt und beim Schliessen wieder gestoppt wird. Das funktioniert sogar auf Smartphones. Diese Funktion ist normalerweise abgeschaltet, um Traffic zu vermeiden.

Wenn die automatische Play-Funktion aus dem Java entfernt wird kann z.B. auch eine Playlist aus Soundcloud eingefügt werden. Der Effekt ist derselbe, nur dass die Player von Soundcloud leider nicht so schön gestaltet werden können.

Zum Verständnis für das Script:
Der Button bekommt das „data-music“-Attribut m1. Die Section mit dem Player die über diesen Button aufgerufen werden soll hat die ID m1 und der Close-Button in dieser Section hat ebenfalls das „data-music“-Attribut m1.

Bei Klick auf einen Button wird das Attribut ausgelesen und mit den ID’s auf der Webseite verglichen. Der Container mit der entsprechenen ID wird dann eingeblendet bzw. bei close ausgeblendet.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.