Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mehrere HTML5 audio-Player auf einer Seite.

Nachtrag zum Artikel über das HTML5 Audio-Tag.

HTML5 audio kann auch mit der JavaScript-Methode "play()" und "pause()" gesteuert werden. Damit lassen sich beliebig viele Player auf einer Seite unterbringen. Entscheidend dabei ist, dass mit dem Anhalten des einen Players alle anderen gestoppt pausiert werden. Besonders einfach ist dies mit jQuery zu realisieren.

Song 1:

Song 2:

Song 3:

Das Markup

<p><b>Song 1:</b> <audio src="/audios/MHO-0003.mp3" controls ></audio> </p> <p><b>Song 2:</b> <audio controls src="/audios/schoene_isabella_aus_kastilien.mp3" ></audio> </p> <p><b>Song 3:</b> <audio controls src="/audios/probe.mp3" ></audio> </p>

Der jQuery Code

Diesen Code am besten unmittelbar vor dem schließenden </body> Tag einbauen.

Dank an Bodhiji

<script> jQuery(document).ready(function( $ ) { $('audio').on("play", function (me) { $('audio').each(function (i,e) { if (e !== me.currentTarget) { this.pause(); } }); }); }) </script>

Auf die Steuerung der Playerfunktionen vor-/zurück und lauter/leiser (mittels Maus oder Tastatur) muss man mit dieser Lösung aber verzichten.

Nachtrag 3.2.2016:

Eine neue Scriptvariante ermöglicht jetzt die Verwendung des Standardplayers mit allen Funktionen.
In der Praxis heißt dies: Beliebig viele Player einbauen, und nur auf allen Seiten mit Playern den obigen jQuery Code einfügen. (Und natürlich muss jQuery selbst eingebunden sein.)

Nachtrag 22.10.2016

Ich hab' die hier beschriebene Technik mal genutz, um einen "aufgehübschten" Player zu bauen.

Creative Commons Lizenzvertrag
Artikeltext (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE

8 Kommentare

  1. Lars Burgmann schrieb am Samstag, 12.03.16 15:32 Uhr:

    Hallo,

    ich bin leider zu blöd. Ich weiss nicht wo ich den jQuery Code ersetzen muss.
    In den HEAD oder Body Teil ?

    jQuery habe ich eingebunden und nutze auch schon Funktionen.

    Hoffe Du kannst mir einen Tip geben

    Dank
    Lars

  2. Fritz schrieb am Samstag, 12.03.16 16:38 Uhr:

    @Lars Burgmann
    Hab' den Text des Artikels ergänzt. Sollte jetzt klar sein.

  3. Wilfried Foede schrieb am Mittwoch, 20.04.16 22:55 Uhr:

    <!-- Danke, klappt prima. Mein Code (mit flash fallback und main reset): -->

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js" ></script>
    <script>
    jQuery(document).ready(function( $ ) {
    $('audio').on("play", function (me) {
    $('audio').each(function (i,e) {
    if (e !== me.currentTarget) {
    this.pause();
    }
    });
    });
    })
    </script>
    </head>

    <body>
    <p>
    <audio src="audio1.mp3" controls style="width:250px;"title=" Audio 1 ">
    <object type="application/x-shockwave-flash" data="mp3_player.swf" width="68" height="29">
    <param name="movie" value="mp3_player.swf">
    <param name="FlashVars"value="src=audio1.mp3">
    </object>
    </audio>
    </p>

    <p>
    <audio src="audio2.mp3" controls style="width:250px;"title=" Audio 2 ">
    <object type="application/x-shockwave-flash" data="mp3_player.swf" width="68" height="29">
    <param name="movie" value="mp3_player.swf">
    <param name="FlashVars"value="src=audio2.mp3">
    </object>
    </audio>
    </p>

    <button onclick="location.reload()"><span style="font:9px/14px arial;">RELOAD ALL</span></button>
    </body>
    </html>

  4. CNT Radio schrieb am Dienstag, 27.09.16 20:48 Uhr:

    @ Wilfried Foede. Den Effekt des Reset Button entfernen und besser
    this.pause(); this.currentTime = 0;

  5. Jürgen schrieb am Mittwoch, 07.06.17 20:27 Uhr:

    Hallo

    Die Möglichkeit mehrere Player in einer Seite zu integrieren finde ich sehr gut. Ich versuche grad auf meinem Heimserver einige Seiten zu installieren über die im Haus mp3-Dateien abgespielt werden sollten.
    Welche Voraussetzungen benötigt denn mein Server programm technischer Seits? Und wie bekommt man den Code für das tolle Teil?

  6. Fritz schrieb am Mittwoch, 07.06.17 20:43 Uhr:

    @Jürgen
    hm, den Code hab' ich doch hier eingestellt. Das ist doch der Zweck dieses Artikels. Und Voraussetzungen serverseitig? Keine besonderen.

  7. Jürgen schrieb am Donnerstag, 08.06.17 10:34 Uhr:

    Hallo Fritz

    Vielen Dank für die schnelle Antwort.

    Das 'bischen' Code ist alles? Dann zieh ich meinen Hut. Ich habe mir andere Varianten angesehen und dort ist der Code nicht grad klein. Deshalb etwas erstaunt die Frage.
    Hab es grad mal mit einer neuen Seite getestet, allerdings sehe das 'Player-Symbol' nicht und bekomme nur eine Fehlerneldung: 'Ihr Browser kann diese Audio nicht spielen'. Mal sehen woran das liegt.

  8. Blanca schrieb am Montag, 23.10.17 21:39 Uhr:

    Hallo, sieht einfach aus und ist schnell eingebunden. Aber meine Musikdateien (wav und mp3) werden einfach nicht abgespielt. Der Player funktioniert, wenn ich zu Hause von meiner Festplatte aus starte, aber sobald ich das ganze auf den Server hochlade und vom Internet aus die Seite anzeige, funktioniert gar nichts. Mit keinem Player. Keine Datei. Ich habe keine Ahnung, was ich falsch mache, da es lokal ja funktioniert. Habe schon Bitrate und ich weiß nicht was geändert, aber der Player bleibt online stumm.

Ihr Kommentar zu diesem Artikel:

Über Ihren Kommentar zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Spam kommentarlos zu entfernen.