Mehrere JS Audioplayer auf einer HTML-Seite

Die Unterbringung verschiedener JavaScript Audioplayer auf einer HTML-Seite kann problematisch sein. Das Templating mit Twig oder Smarty bietet eine einfache Lösung.

Möchten Sie einen oder mehrere eigene JavaScript-Audioplayer auf Ihrer HTML-Seite platzieren, kann die Programmierung eine echte Nerverei werden. Das Problem: Bei mehreren Audiotracks in einer Webseite haben Sie Schwierigkeiten die einzelnen Player-Objekte sauber voneinander zu trennen (Coding am Ende des Beitrags).

mehrere JS Audioplayer

Beispielseite: http://runnersbeat.de mit mehreren JavaScript Audioplayern

Für dieses Problem habe ich eine noch einfachere Lösung gefunden die nichts mit der JavaScript-Programmierung, sondern mit Templating zu tun hat. Der traditionelle Aufbau

In vielen Web-Tutorials finden Sie in etwa das folgende Programmschema:

<html>
    +---------------------------------+
    | JavaScript zu den verschiedenen |
    | JS-Playern auf der Seite        |
    +---------------------------------+
    ...
    <body>
        ...
        +-----------------------+
        | Player 1: sound-1.mp3 |
        +-----------------------+
        ...
        +-----------------------+
        | Player 2: sound-2.mp3 |
        +-----------------------+
        ...
        +-----------------------+
        | Player n: sound-n.mp3 |
        +-----------------------+
    </body>
</html>

Dieses Programmpattern verfolgen 90% aller Entwickler, mit der Folge, Sie erhalten ein sehr aufwändiges JavaScript für das Sie viel Programmiererfahrung aufbringen müssen. Mein Programmansatz ist jedoch deutlich einfacher. Alternativer Aufbau

Die Lösung bietet eine Template-Engine (z.B. TWIG im Pico CMS) an, denn die Template-Engine kann nicht nur Templatevariablen mit Content füllen, sondern auch JavaScript-Strukturen in Ihrem Template erzeugen.

<html>
...
    <body>
        +----------------------------+
        | +-----------------------+  |
        | | JavaScript: Player1   |  |
        | | play-1()              |  |
        | | stop-1()              |  |
        | +-----------------------+  |
        | +-----------------------+  |
        | | Player 1: sound-1.mp3 |  |
        | +-----------------------+  |
        +----------------------------+
        ...
        +----------------------------+
        | +-----------------------+  |
        | | JavaScript: Player2   |  |
        | | play-2()              |  |
        | | stop-2()              |  |
        | +-----------------------+  |
        | +-----------------------+  |
        | | Player 2: sound-2.mp3 |  |
        | +-----------------------+  |
        +----------------------------+
        ...
        ...
    </body>
</html>

Der Clou ist recht simpel. Während die Template-Engine die Beiträge der Webseite durch einen Loop erstellt, erzeugt sie zu den einzelnen JavaScript-Playern auch gleich das dazugehörige Scriptsegment. Alle Variablen und Methoden erhalten mit Hilfe von Templatevariablen einen eindeutigen Präfix, dadurch besitzt beispielsweise Player 1 ein eigenes Script das er nicht mit anderen Playern der selben Seite teilen muss, folglich ist das erzeugte Audio-Objekt eindeutig diesem Player zugeordnet und kann bequem gestartet und gestoppt werden ohne dabei in Kollision mit anderen Player-Scripten zu geraten.

Sie erhalten also einen HTML-Code am Browser des Clients, der so viele Script-Blöcke enthält, wie Ihre Seite auch Player bzw. Beiträge hat (in meinem Beispiel ist jeder Beitrag auch ein Audioplayer, da die Seite ausschließlich Audiofiles aufnehmen soll und keinen Beitragstext). Ich nutze dazu Pico CMS - es geht aber auch jedes andere CMS mit Template-Engine.

Das Coding (Templating)

Das folgende Coding (Beitrags-Loop des Templates) stammt aus dem Templating unter Pico CMS mit der Template-Engine TWIG, dies lässt sich jedoch einfach auf andere Template-Engines wie zum Beispiel Smarty problemlos übertragen.

...    ....
068    <div class="col-sm">
069        <script language="javascript" type="text/javascript">
070            /* -------------------------------------------------------- */
071            /* Die JavaScript Attribute werden teils mit der Page.id    */
072            /* kombiniert, um eindeutige Player-Objekte instanzieren zu */
073            /* können, dadurch ist das Starten und Stoppen einfacher    */
074            /* zu handhaben                                             */
075            /* -------------------------------------------------------- */
076
077            /* z.B.: var post1current_song; */
078            {{ ['var ', page.id, 'current_song']|join }};
079
080            /* z.B.: function post1_play(song) */
081            {{['function', ' ', page.id, '_play(song)']|join}}
082            {
083                console.log('Play: ' + song);
084                {{ page.id }}current_song = song;
085                document.getElementById('{{ page.id }}').innerHTML = '<img src="assets/audio-wave-play.png" class="rotate img-fluid mb-0" onclick="{{ page.id }}_stop()">';
086                {{ page.id }}myAudio = new Audio( song );
087                {{ page.id }}myAudio.play();
088            }
089
090            /* z.B.: function post1_stop() */
091            {{['function', ' ', page.id, '_stop()']|join}}
092            {   
093                console.log('Stop:');
094                document.getElementById('{{ page.id }}').innerHTML = '<img src="assets/audio-wave.png" class="img-fluid mb-0" onclick="{{ page.id }}_play({{page.id}}current_song)">';
095                {{ page.id }}myAudio.pause();
096            }
097        </script>
098
099        <div id="{{page.id}}">
100            <div id="{{ page.id }}">
101                <img src="{{ assets_url }}/{{ page.meta['logo'] }}" class="img-fluid mb-0" onclick="{{ page.id }}_play(' {{ page.meta['Song'] }} ')">
102            </div>
103        </div>
104        <p class="small text-light mt-0 pt-0">{{ page.meta['title'] }} &ensp; {{ page.meta['BPM'] }} &ensp; {{ page.meta['Dauer'] }}</p>
105    </div>
...    ....

Die Erklärung der einzelnen Codezeilen ist gar nicht so schwierig wie Sie vielleicht denken mögen:

068: Hier beginnt der Loop, also die Beitrags-Schleife, die die Beiträge und Posts Ihres Contents zusamensammelt und auf die Seite packt - genannt Loop. In meinem Beispiel werden die Inhalte mit dem CSS-Framework Bootstrap formatiert (es geht auch jedes andere)

069: Das individuelle Script-Segment für den aktuellen Beitrag wird eingeleitet

078: Heißt der erste Beitrag beispielsweise post_1.md, dann erzeugt diese Zeile mit Hilfe der Templatevariablen post.id die JS-Scriptzeile var post_1current_song; im typischen JavaScript-Format. Zur Laufzeit erhalten Sie folglich eine Variable die den Namen des Songs enthält, die dem Player des ersten Beitrags zugeordnet ist.

081: Diese Zeile erzeugt die Play-Methode für den ersten Player. Mittels join und der post.id erzeugt die Template-Engine den Funktions-Kopf mit dem Titel function post_1_play(song) im typischen JS-Style.

084-087: Ebenfalls mit dem Twig-Befehl join und der post.id werden eindeutige Variablen für den ersten Beitrag und ersten AudioPlayer instanziert. Diese lauten beispielsweise:

  • post_1current_song - enthält das Songfile
  • post_1myAudio - das Audio-Objekt
  • post_1myAudio.play() - startet das Audio-Objekt

Würde ein weiterer Player dazu kommen, könnte dies dann so aussehen (sofern dieser post_2.md heißt):

  • post_2current_song - enthält das Songfile
  • post_2myAudio - das Audio-Objekt
  • post_2myAudio.play() - startet das Audio-Objekt

usw....

091: Sofern wir bei dem Beispielpost post_1.md bleiben, erzeugt dieser Templatebefehl function post_1_stop() im JavaScript-Format. Haben Sie noch einen weiteren Beitrag, z.B. post_2.md, erhalten Sie folglich function_post_2_stop() im Script. Im Falle eines Beitrags meine_katze.md erzeugt die Engine function meine_katze_stop() im dazugehörigen Script.

095: Diese Zeile stoppt zum Beispiel die verschiedenen Player (bzw. das Audio-Objekt) post_1myAudio bzw. meine_katzemyAudio ohne einen anderen Player zu beeinflussen.

085, 094: Diese beiden Zeilen dienen dazu die Playergrafik zu ändern, um den Benutzer zu zeigen das der Player gerade arbeitet, zudem wird der Link via onclick geändert. Der anfänglich Aufruf von Play ändert sich zu Stopp und umgekehrt, jeweils mit einer passenden Grafik dazu.

Beispielseite: http://runnersbeat.de mit mehreren JavaScript Audioplayern

Einziger Nachteil bei diesem Coding ist, Sie können verschiedene Player gleichzeitig starten. Da sich in diesem Coding die verschiedenen Audio-Objkete untereinander nicht kennen, ist es nicht möglich einen bereits laufenden Player zu stoppen, wenn der User einen zweiten Song anklickt bevor der erste noch nicht beendet ist, es erklingen die Songs gleichzeitig. Es kann natürlich auch genau das Verhalten erwünscht sein - wer weiß...

Es ist jedoch ein leichtes in einem übergeordneten Script alle Player-Objekte zu sammeln und zu verwalten - dies soll daher lediglich ein neuer Denkanstoß sein, um Ihnen viel Arbeit zu sparen.

WordPress für Einsteiger

WordPress für Einsteiger - Meistern Sie WordPress mit dem visuellen Schritt-für-Schritt-Ansatz. Das Buch ist eine Neuerscheinung für 2021 und deckt die neueste Version von WordPress ab. Das Erstellen einer schönen, professionell aussehenden WordPress Website (oder Blogs) ist nicht länger für Webdesign Agenturen bestimmt. WordPress ermöglicht es jedem, eine Website zu erstellen, die auf jedem Gerät – PC, Mac, Tablet und Smartphone - gut aussieht. Egal, ob Sie eine geschäftliche Website, eine Hobbysite oder einen Blog erstellen möchten, WordPress ist eine großartige Wahl und dieses Buch zeigt Ihnen, wie. Das Ziel dieses Buches ist es, jeden, auch einen absoluten Anfänger, in wenigen Stunden von Null zum WordPress Guru zu machen. (*

lesen...

© CMSWorkbench.de

about me

About me

Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Programmier-Sprachen und Markup-Dialekten, z.B. Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 24 Jahren arbeite ich als Entwickler in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen und seit etwa 37 Jahren im EDV-Sektor mit wechselnden Aufgaben.