Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Der HTML5 audio-Player aufgehübscht

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.

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(); this.currentTime = 0; } }); }); }) function play(e) { var de = document.getElementById(e); if (de.paused) { de.play(); 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> .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-device-width:768px) { audio{max-width:75%;} } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-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.


Wenn das Script für Sie nützlich ist, können Sie die weitere Entwicklung mit einer Spende in beliebiger Höhe hier unterstützen.

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

7 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:-)

Ihr Kommentar zu diesem Artikel:

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