Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Sie sind hier: Startseite · Webmaster Tools · Alle Player · HTML5 Audio Player

Der HTML5 Audio-Player aufgehübscht

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Die Technik "mehrere Player auf einer Seite" kann man ganz leicht ausbauen zu einer hübschen Playlist.

Eine Demo-Playlist

01 Dies ist nur ein Demosong

Hier kann beliebig viel Text eingefügt werden, wie dieses Beispiel zeigt.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, bandit a, eros.

02 Irgendwas mit Seele

… und hier der Text zum Song

Features

Das HTML

<div class="playlist_container"> <div class = "song"> <input onclick="play(1)" type="image" src="image1.jpg" width="120" height="120" alt="Titel 1"> <audio onended="cont(1)" id ="1" src="audio1.mp3" controls preload="none" > </audio> <h3 onclick="play(1)">01 Titel 1</h3> <p onclick="play(1)"> Hier kann beliebig viel Text eingefügt werden, wie dieses Beispiel zeigt. Lorem ipsum ... </div> <div class = "song"> <input onclick="play(2)" type="image" src="image2.jpg" width="120" height="120" alt="Titel 2"> <audio onended="cont(2)" id ="2" src="audio2.mp3" controls preload="none" > </audio> <h3 onclick="play(2)">02 Titel 2</h3> <p onclick="play(2)"> … und hier der Text zum Song </div> </div>

Das JavaScript

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script> <script> jQuery(document).ready(function($){ $("audio").on("play",function(me){$("audio").each(function(i,e){if(e!==me.currentTarget){this.pause();if(document.getElementById('1')){this.style.display="none";}}});});}) function play(e) { var de = document.getElementById(e); var div = document.getElementsByClassName('playlist_container')[0]; // alle Buttons löschen var number = div.getElementsByTagName('input').length; for (var i = 0, n = number; i < n; i++){ div.getElementsByTagName('input')[i].style.background="none"; } if (de.paused) { // Cachen eines streams vermeiden: (nur, wenn die JavaScript Funktionalität verwendet wird, und nicht, wenn die nativen audio-controls benutzt werden) url = de.src.split("?")[0]; var de1 = url + "?" + new Date().getTime(); document.getElementById(e).src = de1; // aktiven Sender mit einem Button kennzeichnen: div.getElementsByTagName('input')[e-1].style.background="url('/images/play_button.png') no-repeat 2px 2px / 16px"; de.play(); de.style.display="block"; de.onended = function (){ if (document.getElementById(e+1)) { play(e+1); } else { play(1); } } } else { de.pause(); } } function cont(e) { if (document.getElementById(e+1)) { play(e+1); } else { play(1); } } </script>

Hinweis: jQuery ist erforderlich für die Funktion "nicht mehrere Player gleichzeitig abspielen". Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht natürlich die erste Zeile des obigen Codes nicht mehr.

CSS Beispiel

Hier nur ein wenig grundsätzliches CSS. Weitere CSS Anweisungen sind natürlich möglich, und können erforderlich sein, um den Player nahtlos an jedes Design anzupassen.

<style> audio {display:none;margin:0;} .song {clear:left; margin:1 0;} .song input {margin: 0 1em .5em 0;float:left;padding:0;} .song p {margin:0 0 1.5em 0;} .song:after { content : "."; display : block; height : 0; clear : left; visibility : hidden; } audio{ margin:0;min-width:0} @media only screen and (min-width:768px) { audio{max-width:75%;} } @media only screen and (min-width: 320px) and (max-width: 480px) and (-webkit-min-pixel-ratio: 2) and (orientation: portrait) { audio{max-width:10em;} } </style>

Nachtrag 06.11.2017

Der HTML-Code musste für Safari V. 11 und iOS neu geschrieben werden.


Creative Commons Lizenzvertrag

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

17 Kommentare

  1. CNT Radio schrieb am Freitag, 30.09.16 18:45 Uhr:

    Wow, Meister Weissheit am Werk, mit dem jQuery komme ich nicht zurecht. Danke vielmals, werde das mit ein paar Modifikationen bei mir einbauen.

  2. CNT Radio schrieb am Dienstag, 06.12.16 22:11 Uhr:

    Griaß di no oamoi, der textbasierte Player ist klasse, ich verwende ihn um neue Musik Alben vorzustellen mit Hörprobe und als Auswahlplayer für verschiedene online Radios, leider kann man Firefox über noCache nicht ansprechen. Das führt dazu, dass nach dem Pausieren und erneuten Play leider häufig der gecachete Stream wiedergegeben wird statt des aktuellen Live Stream und der DJ im Chat wundert sich, warum man erst jetzt auf einen Musik Titel reagiert, den er vor ner halben Stunde gespielt hat.
    Der Bug ist seit langem bekannt, Tickets bei Bugzilla häufen sich, aber es tut sich nichts.
    Man kann Firefox autricksen und vorgaukeln einen anderen Stream aufzurufen indem man einen Zeitstempel oder eine zufällig generierte Zahl an die Streamadresse hängt.

  3. CNT Radio schrieb am Dienstag, 06.12.16 22:13 Uhr:

    function callback() {
    var url = "*" + new Date().getTime();
    var audio = new Audio(url);
    audio.load();
    audio.play();
    }
    oder + Math.floor(Math.random() * 1000000) z. Bsp.

    Wie kann ich das in den bestehenden jQuery String einfügen?

  4. CNT Radio schrieb am Dienstag, 06.12.16 22:16 Uhr:

    Quelle:
    http://stackoverflow.com/questions/28245407/audio-and-mozilla-firefox- cache-issue
    http://stackoverflow.com/questions/25821915/how-to-force-the-html5-aud io-tag-to-reload-a-changing-file
    http://stackoverflow.com/questions/13041206/html5-audio-replacing-elem ent-still-the-same-audio-file-cached-how-to-solve

  5. Fritz (Gast) schrieb am Mittwoch, 07.12.16 19:30 Uhr:

    @CNT
    Ich hab' mal einen Testcase aufgesetzt:
    webdesign.weisshart.de/audio_tag_mult_demo_stream.php
    Dort sollte das Caching unterbunden sein.
    PS: In meinem Supportforum gibt es übrigens bei Antworten eine Benachrichtigungsfunktion.

  6. CNT Radio schrieb am Donnerstag, 08.12.16 13:18 Uhr:

    Wow, vielen Dank, funktioniert einwanfrei!
    Live HTTP headers zeigt an:
    Play:
    GET http://br-mp3-bayern1obb-m.akacast.akamaistream.net/7/273/142690/v1/gn l.akacast.akamaistream.net/br_mp3_bayern1obb_m
    Pause/Play:
    GET http://br-mp3-bayern1obb-m.akacast.akamaistream.net/7/273/142690/v1/gn l.akacast.akamaistream.net/br_mp3_bayern1obb_m?1481197866731
    usw.
    GET http://br-mp3-bayern1obb-m.akacast.akamaistream.net/7/273/142690/v1/gn l.akacast.akamaistream.net/br_mp3_bayern1obb_m?1481197866731?148119848 0986

    Da ist wohl ne Spende fällig, geht das auch mit Paysafe?

    Du musst bei"Das HTML" noch das 3. div einfügen.
    Klasse Seite, klasse Support, ja ich melde mich im Forum an!
    Achso, dein Spamschutz mochte meine 3 Quellen nicht, als direkt Link gepostet.

  7. Olaf Köhler schrieb am Dienstag, 07.11.17 15:39 Uhr:

    Hallo zusammen,

    ich bin sehr dankbar für diese wertvollen Hinweise! Früher;-) wurden damit noch Profis beauftragt, mittlerweile "dürfen" wir alles selber basteln: Ich habe ein HTML-Seite mit mehreren Audiodateien (WAV) - klappt wunderbar, nur möchte ich nicht 20 Player untereinander haben - eleganter ist doch die hier beschriebene Variante, einen Player mit einem Auswahlmenü zu haben. Probiere ich morgen aus:-)

  8. Christine Resties schrieb am Donnerstag, 30.08.18 19:36 Uhr:

    Guten Tag!
    Ich bemühe mich, die oberste Playlist zu erstellen, die mit dem Click über das Bildchen. Soweit einigermaßen gelungen, nur erfolgt mit dem Click auf das Bild nichts, d.h. das Bild wird zwar angezeigt, aber öffnet den Player nicht, weil der wird auch angezeigt. Was nicht klappt ist das hübsche Wechselspiel.
    Ich komme nicht dahinter, was ich falsch gemacht habe. Bitte helfen Sie mir.
    Danke.
    Christine Resties

    www.res-life,de

  9. Fritz schrieb am Donnerstag, 30.08.18 20:22 Uhr:

    @Christine et al
    Immer wieder kommt hier in den Kommentaren die Bitte um Hilfe bei der Fehlersuche.
    Aber wie bitte soll ich einen Fehler suchen, wenn ich ihn nicht sehe?
    Zum anderen ist eine Kommentarfunktion recht spröde, wenn es um Kommunikation geht. Dafür ist das Supportforum webdesign.weisshart.de/forum viel besser geeignet.

  10. Marc Fröhlich schrieb am Freitag, 26.06.20 14:09 Uhr:

    Danke für die coole Seite. Sehr schön!
    Die zwei Beispiele oben (die zwei Bildchen mit den zwei Songs) funktionieren bestens.

    Dein Code funktioniert auch super, mit einer Ausnahme.
    Ein Klick auf ein Bild lässt den Song ertönen, ein Klick auf das andere Bild lässt den ersten Song verstummen und der zweite beginnt. Cool.

    Was aber nicht geht (wie oben), dass bei Klick auf ein Bild nicht nur der andere Player verstummt, sondern dass auch der Player verschwindet.

    Also im Prinzip GENAU so wie Dein schönes Beispiel oben.
    Geht bei mir leider nicht, gibt es einen Weg, das zu erreichen?

    Schon Dank im Voraus, falls Du das kannst (weiss nicht, ob das überhaupt geht).
    Marc

  11. Fritz schrieb am Freitag, 26.06.20 14:46 Uhr:

    @Marc Fröhlich
    > sondern dass auch der Player verschwindet.
    Das ist in dieser Demo einfach nicht vorgesehen.

    > falls Du das kannst
    Ich denke schon, dass ich auch das könnte. Aber in dieser Demo ist es halt einfach … s.o. ;-)

  12. Marc Fröhlich schrieb am Samstag, 27.06.20 12:00 Uhr:

    Wow, danke für die schnelle Antwort.
    Wie gesagt, oben in Deiner Demo (mit den 2 Bildchen) ist es perfekt.

    Aber mit Deinem Code unten, den ich genau übernommen habe, ist es halt eben nicht so wie Du es in Deiner Demo zeigst. Leider.

    Aber alles klar, wenn Du das so vorgesehen hast, etwas als Demo zu zeigen und den Code dann nicht genau gleich für die user abzubilden, das kannst Du machen, ist ja allein Deine Entscheidung.

    Trotzdem danke für den Code, den Du den usern anbietest.

  13. Fritz schrieb am Samstag, 27.06.20 12:51 Uhr:

    @Marc Fröhlich,
    sorry, ich hatte wohl deinen ersten Kommentar nicht genau genug gelesen.
    Ja, du hast recht. Die Demo verwendet nicht die obigen Code-Snippets, sondern greift auf Code in externen JavaScript-Dateien auf meiner Site zu. Und diese externen JavaScripts wurden nach dem Erstellen des Artikels geändert, was zu dem von dir beanstandeten, abweichenden Verhalten geführt hat.
    Ich habe die obigen Code-Snippets angepasst. Sollte jetzt passen.

  14. Marc Fröhlich schrieb am Samstag, 27.06.20 13:17 Uhr:

    Also, an Schnelligkeit bist Du kaum zu übertreffen!!!
    DANKE!
    Schon krass, ich "übe" 2 Stunden vergebens, Du kommst und haust einige Befehle rein, und es geht einfach. :-)
    Tja, mit Dir werkelt eben ein Meister, wohl mit jahrelanger Erfahrung.

    Super, vielen Dank, ich werde mir Deine Seiten mal etwas besser anschauen.

  15. MAN schrieb am Donnerstag, 06.08.20 11:33 Uhr:

    Cool wäre jetzt noch ein SHOUTcast Link Unterstütung.

    Beispiel:
    Name:TOPradio Belgium (MP3)
    Beschreibung: MP3 (192 kbps)
    URL: http://yp.shoutcast.com/...

    Ansonsten ein cooles Ding der Player. Hab ich bei mir mal auf der Page eingebaut. Dann muss ich nicht immer die Radio Seiten aufrufen :-) Top!

  16. Peter schrieb am Montag, 10.01.22 15:40 Uhr:

    Hallo, ich habe den folgenden Code in einen Platzhalter definiert und in diesem den Code als Body eingefügt:

    <div class="playlist_container">
    <div class = "song">
    <input onclick="play(1)" type="image" src="Klavier.jpg" width="120" height="120" alt="Titel 1">
    <audio onended="cont(1)" id ="1" src="Walzer.mp3" controls preload="none" >
    </audio>
    <h3 onclick="play(1)">01 Titel 1</h3>
    <p onclick="play(1)"> Hier kann beliebig viel Text eingefügt werden, wie dieses Beispiel zeigt. Lorem ipsum ...
    </div>

    Es erscheint Bild und ein Image zur Bedienung der Play-Taste (vom Standard Audio Player).
    Das Bild läßt sich nicht anklicken!
    Was muss ich tun um das Image zur Bedienung zu entfernen (Controls entfernen?) und wie funktioniert der Start durch anklicken des Bildes?

  17. Wolfgang Müller schrieb am Montag, 01.08.22 15:29 Uhr:

    Wie nehme ich die endlos funktion heraus?

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat