Artikel-Hilfsmenü
Freitag, 27. März 2015 – aktualisiert am Dienstag, 26. März 2024
Tools · JavaScript · Audio
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 Starten einea 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 controls src="/audios/MHO-0003.mp3" ></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.102016
Ich hab' die hier beschriebene Technik mal genutz, um einen "aufgehübschten" Player zu bauen.
Nachtrag 21.12.2021
Martin Mützenberg hat mit seiner Frage in den Kommentaren dafür gesorgt, dass ich das Script um das Feature "nächsten Song automatisch starten am Ende des vorherigen" erweitert habe.
<script>
var songs = document.getElementsByTagName('audio');
var anz = songs.length;
for (var i = 0; i < anz; i++) {
z = i + 1;
songs[i].setAttribute('id',z);
songs[i].setAttribute('onended',"next(" + z + ")");
songs[i].setAttribute('oncontextmenu',"return false;"); // verhindert den Rechtsklick
songs[i].setAttribute('controlslist',"nodownload noplaybackrate"); // blendet in Chrome u.a. das 3-Punkte-Menü aus
songs[i].volume=0.7; // Damit Screen Reader Ausgaben nicht übertönt werden
}
function playnext(e) {
var de = document.getElementById(e);
de.focus();
de.play();
}
function next(e) {
if (document.getElementById(e+1)) {
playnext(e+1);
} else {
playnext(1); // nach dem letzten Audio Sprung zum Anfang. Wenn das nicht gewünscht ist, die Zeile einfach wegkommentieren
}
}
</script>
Und hier noch ein weiterer Player, um zu demonstrieren, dass die Player nicht unmittelbar aufeinander folgen müssen.
Song 4:
Nachtrag 12.11.2023
Diese Technik lässt sich auch auf Videos anwenden.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
18 Kommentare
Ü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.
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
Fritz schrieb am Samstag, 12.03.16 16:38 Uhr:
@Lars Burgmann
Hab' den Text des Artikels ergänzt. Sollte jetzt klar sein.
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>
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;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?
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.
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.
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.
Carsten schrieb am Dienstag, 11.12.18 14:04 Uhr:
Wie kann ich denn im Player den Download verhindern?
(bei Klick auf die 3 Punkte am rechten Rand, wird der Download der MP3-Datei angeboten)
Antwort:
mit dem Attribut controlslist="nodownload"
also z. B.:
<audio controls controlslist="nodownload" src="demo.mp3" ></audio>Klaus-Jürgen Lein schrieb am Freitag, 08.03.19 10:04 Uhr:
Hallo. Ich bin neu hier und habe bereits erfolgreich (obwohl Null Ahnung von html) den Player eingebaut. Ich habe die Songs benannt. Aber jetzt verschieben sich je nach Song länge die einzelnen Player optisch auf der Homepage nach rechts oder links. Ich hänge den Code mal dran. Kann jemand helfen, so dass die Player alle schön aufgereiht untereinander wie in einer Excel Liste optisch ansprechend zu sehen sind? Bin für jeden Tip dankbar.
<p>
<b>
Weiss der Geier - Wolfgang Petry:
</b>
<audio src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/Weiss%2520der%2520Geier%2520-%2520Wolfgang%2520Petry.mp3 " controls="">
</audio>
</p>
<p>
<b>
1000 und 1 Nacht - Klaus Lage:
</b>
<audio controls="" src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/1000%2520und%2520eine%2520Nacht%2520-%2520Klaus%2520Lage .mp3">
</audio>
</p>
<p>
<b>
Mambo - Herbert Groenemeier:
</b>
<audio controls="" src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/Mambo%2520-%2520Groenemeier.mp3">
</audio>
</p>
<p>
<b>
Kling Klang - Keimzeit:
</b>
<audio src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/Kling%2520Klang%2520-%2520Keimzeit.mp3" controls="">
</audio>
</p>
<p>
<b>
Willenlos - Westernhagen:
</b>
<audio controls="" src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/1000%2520und%2520eine%2520Nacht%2520-%2520Klaus%2520Lage .mp3">
</audio>
</p>
<p>
<b>
San Franzisco - Scott McKenzie:
</b>
<audio controls="" src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/San%2520Franzisco%2520-%2520Scott%2520McKenzie.mp3">
</audio>
</p>
<p>
<b>
Lodi - C.C.R.:
</b>
<audio src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/Lodi%2520-%2520C.C.R..mp3" controls="">
</audio>
</p>
<p>
<b>
Albany - Roger Whittaker:
</b>
<audio controls="" src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/Albany%2520-%2520Roger%2520Whittaker.mp3">
</audio>
</p>
<p>
<b>
Woelfe - Peter Maffay:
</b>
<audio controls="" src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/Woelfe%2520sterben%2520niemals%2520aus%2520-%2520Peter%2 520Maffay.mp3">
</audio>
</p>
<p>
<b>
Griechischer Wein - Udo Juergens:
</b>
<audio controls="" src="https://cdn.website-editor.net/17f1b82af1eb45448a762edd3715a773/f iles/uploaded/Griechischer%2520Wein%2520-%2520Udo%2520Juergens.mp3">
</audio>
</p>
<script>
jQuery(document).ready(function( $ ) {
$('audio').on("play", function (me) {
$('audio').each(function (i,e) {
if (e !== me.currentTarget) {
this.pause();
}
});
});
})
</script>
Klaus-Jürgen Lein schrieb am Freitag, 08.03.19 10:54 Uhr:
Hallo. Ich habe eine elegante Lösung gefunden. Einfach die Seiten gewechselt. Der Player ist jetzt ganz links und der Song Titel darunter rechts. da kann der so lang sein wie er will. Stört mich nicht mehr.
Aber noch mal an den Entwickler: das Tool ist Super.
Danke
Klaus
Charlene schrieb am Montag, 22.04.19 17:06 Uhr:
Man kann sich da lange totsuchen, bis es wirklich das tut, was man möchte.
Sehr entscheidend ist, dass der Pfad zur Audiodatei wirklich stimmt. Bei relativen Pfaden fällt man leicht auf den Bauch.
Das obige Script, das per Ajax alle anderen player stoppt, wenn man einen startet, benötigt den Verweis auf Ajax offenbar mit https:// wenn die eigene Webseite auch mit https:// aufgerufen wird. Ansonsten arbeitet das Script kommentarlos einfach nicht. Das ist für Anfänger sicher ein wichtiger Hinweis. Ansonsten alles gut.
Stefan Admin schrieb am Donnerstag, 11.03.21 10:27 Uhr:
Ich verwende den hier geposteten Code um teilweise über 20 Dateien untereinander weg anzubieten, und bei mir und fast allen anderen Leuten die es getestet haben funktioniert es super. Aber es gibt eine Benutzerin die sich bereits gemeldet hat, bei der nur einige der Player auf der Seite funktionieren und andere nicht. Welche funktionieren und welche nicht ist bei jedem Reload des Browsers neu zufällig verteilt. Eine Idee was man am Javascript ändern könnte um ein solches Problem zu umgehen?
Martin Mützenberg schrieb am Samstag, 18.12.21 09:48 Uhr:
Mehrere Audioplayer auf einer Seite, welche stoppen beim Anwählen eines anderen, genau, nach dem ich gesucht habe! Und sehr einfach zu implementieren für "Nicht-so-Profis" wie mir. Merci!
Gibt es zu diesem Muster eine ebenso einfache Erweiterung, welche den nächsten Player automatisch starten lässt, wen der "obere" zu Ende ist? So wie beim "aufgehübschten Player", einfach ohne "Aufhübschung"?
Fritz schrieb am Samstag, 18.12.21 12:09 Uhr:
@Martin Mützenberg
JavaScript onended ist das, was du suchst.
Martin Mützenberg schrieb am Samstag, 18.12.21 14:34 Uhr:
@ FRITZ
Danke für die prompte Antwort! Wie (für mich als ""Nicht-so-Profi") würde dann der Code ausschauen, um den nächsten Audio-Player zu starten?
Klaus Kurt schrieb am Dienstag, 19.07.22 17:26 Uhr:
Super Leistung des Entwicklers. Herzlichen Dank.
rachael schrieb am Freitag, 23.02.24 15:03 Uhr:
danke fuer den code :)