Mehrere PHP / JS Audio-Player, Stop Player wenn anderer Player abspielt

[Mota]

Hallo liebe Community,

ich habe eine Mediatheke unteranderen mit Audio-Player auf meiner Homepage.

Jetzt habe ich folgene Schwierigkeit:

Da ich mehrere Playlist-Player verwende laufen diese unabhängig voneinander, was eigendlich nur eine Problem darstellt, wenn zwei Player gleichzeitig laufen, dieses möchte ich nicht. Das heist ist es möglich, wenn Player 1 abspielt dieses zu erkennen und wenn man Player 2 über den Play Button oder die Playlist eine Audio Datei läd den Player 1 auf "Stop" in fall von JS auf Pause zu setzen?

Guckt euch gerne den Code auf meiner HP an unter dem Reiter Mediatheke.

Liebe Grüße Mota

P.S. Rechtschreib und Grammatik fehler dürfen gerne behalten werden! 😀

[Gunnar Bittersmann]

@@Mota

Da ich mehrere Playlist-Player verwende laufen diese unabhängig voneinander, was eigendlich nur eine Problem darstellt, wenn zwei Player gleichzeitig laufen, dieses möchte ich nicht. Das heist ist es möglich, wenn Player 1 abspielt dieses zu erkennen

Ja, Mediaplayer werfen verschiedene Events. play ist dein Freund.

Da das Event nicht bubblet, für jeden Mediaplayer einen EventListener registrieren.

und wenn man Player 2 über den Play Button oder die Playlist eine Audio Datei läd den Player 1 auf "Stop" in fall von JS auf Pause zu setzen?

Ja, Mediaplayer bieten verschiedene Methoden. pause() ist dein Freund.

Wenn das play-Event eines Mediaplayers feuert, alle anderen pausieren.

☞ Beispiel (gleich so gemacht, dass es für Audio- und Videoplayer geht)

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Mota

Guckt euch gerne den Code auf meiner HP an unter dem Reiter Mediatheke.

Warum verlinkst du nicht gleich die Mediatheke-Seite? Ach so, weil deine Seiten gar keine eigenen URLs haben. Schlecht.

Deine Mediatheke ist nicht bedienbar.

<img
  class="controll_button_play"
  id="play-pause10"
  src="audioplayer/images/play.png"
  height="65px"
  onclick="playOrPauseSong10()"

>

Zum einen fehlt das bei jedem img zwingend notwendige alt-Attribut.
Bei Play/Pause: alt="play/pause"

Und das click-Event auf img funktioniert nur bei einigen Nutzern. Per Tastatur ist das img-Element nicht erreichbar, da es kein interaktives Element ist.

Du musst für die Buttons das HTML-Element button verwenden und darauf den Eventhandler:

<button
  class="controll_button_play"
  id="play-pause10"
  onclick="playOrPauseSong10()"

>

  <img
    src="audioplayer/images/play.png"
    height="65px"
    alt="play/pause"
  >
</button>

Rahmen und Hintergrund der Buttons entfernst du mit CSS.

🖖 Live long and prosper

[Mota]

Danke für die Information die Bedienbarkeit mit Tastertur hatte ich komplett vergessen.

Ich bin halt kein Programierer sondern bringe mir alles selbst bei!

Ich habe einfch Spaß an der Webseite (Hobby)

Daher auch der Versuch einer alternativen Seiten Navigation mit Ajax, JS und PHP. Ich wollte in der Adressleist immer motas-home.de stehen haben ohne lange ?BAL=ENDLOS etc.. Das es mit der dirkt Navigation kurz gesagt MIST ist habe ich bereits gemerkt. Gruß Mota

[Hörnchen]

Hi Mota, es gibt mehrere Möglichkeiten wie du darauf reagieren kannst und wie du es abfragst. Eine Möglichkeit wäre zum Beispiel über JavaScript abzufragen ob ein oder mehrere audio-Element gerade etwas abspielen.

function stopAllPlayer() {
    document.querySelectorAll('audio').forEach(audio => {
        if (audio && !audio.paused && !audio.ended && audio.currentTime > 0) {
            audio.pause();
            audio.currentTime = 0;
        }
    });
}

Ich hoffe ich habe dein Problem verstanden und eine passende Lösung für dich erstellt.

[Gunnar Bittersmann]

@@Hörnchen

Ich hoffe ich habe dein Problem verstanden und eine passende Lösung für dich erstellt.

Nein, ich glaube, nicht.

Es sollen ja nicht alle Player^[1] gestoppt werden. Der soeben neu gestartete soll weiterlaufen.

Oder du müsstest erst alle Player stoppen und danach den ausgewählten mit JavaScript starten, was die Komplexität des Scripts unnötig erhöht.

Außerdem: audio.currentTime = 0;? Vom Zurücksetzen der Player war keine Rede. Sie sollten pausieren und beim erneuten Start an der Stelle weiterspielen, wo sie aufgehört haben, nicht wieder vom Anfang an.

    document.querySelectorAll('audio').forEach(audio => {
        if (audio && !audio.paused && !audio.ended && audio.currentTime > 0) {

AFAIS kann audio an der Stelle überhaupt nicht falsy sein, die Abfrage auf audio ist überflüssig.

Und wofür ist die Abfrage auf audio.currentTime > 0 gut?

🖖 Live long and prosper

---

1. Im Englischen ist der Plural auf -s; die Funktion sollte stopAllPlayers heißen. ↩︎

[klawischnigg]

Hi there,

Oder du müsstest erst alle Player stoppen und danach den ausgewählten mit JavaScript starten, was die Komplexität des Scripts unnötig erhöht.

Ja natürlich wäre das die einfachste Lösung. Ich hatte das Problem des TO schon öfter und hab's genauso gelöst. Ich weiß nicht, wo Du da eine "Erhöhung der Komplexität" siehst…

[Gunnar Bittersmann]

@@klawischnigg

Oder du müsstest erst alle Player stoppen und danach den ausgewählten mit JavaScript starten, was die Komplexität des Scripts unnötig erhöht.

Ja natürlich wäre das die einfachste Lösung. Ich hatte das Problem des TO schon öfter und hab's genauso gelöst. Ich weiß nicht, wo Du da eine "Erhöhung der Komplexität" siehst…

Vergleiche meh

for (const mediaplayer of mediaplayers) {
  if (!mediaplayer.paused && !mediaplayer.ended && mediaplayer.currentTime > 0) {
    mediaplayer.pause();
    mediaplayer.currentTime = 0;
  }
}
event.target.play();

und

for (const mediaplayer of mediaplayers) {
  if (mediaplayer !== event.target) {
    mediaplayer.pause();
  }
}

Du siehst es auch?

Abgesehen davon funtioniert @Hörnchen’s Lösung nur mit Zurücksetzen der Player, was – wie gesagt – nicht das gewünschte Verhalten sein dürfte.

🖖 Live long and prosper

[klawischnigg]

Hi there,

Du siehst es auch?

Ja, ich seh's. Was ich nicht sehe, ist so viel mehr "Komplexität"

Ich halte:

function sControl(o)
{
	for (let i=0; i < document.getElementsByTagName('audio').length; i++)
	{
		if (document.getElementsByTagName('audio')[i] != o)
		{
			document.getElementsByTagName('audio')[i].pause();			
		}			
	}
}

dagegen. Wieder einmal wird ersichtlich, vielleicht nicht alle aber viele Wege führen nach Rom.

Abgesehen davon funtioniert @Hörnchen’s Lösung nur mit Zurücksetzen der Player, was – wie gesagt – nicht das gewünschte Verhalten sein dürfte.

Ja eh, aber das ist eine andere Geschichte...

[Gunnar Bittersmann]

@@klawischnigg

Wieder einmal wird ersichtlich, vielleicht nicht alle aber viele Wege führen nach Rom.

Ja, aber die NodeList mit for durchzugehen und darin die Items mit ihrem Index anzusprechen halte ich für keinen guten Stil. Dafür gibt’s ja for...of und forEach().

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

die NodeList

Welche NodeList?!

Dafür gibt’s ja for...of und forEach().

Überraschenderweise ist die Antwort darauf nicht „komplett falsch“, sondern nur „zur Hälfe falsch“.

Die älteren DOM-Methoden liefern keine NodeList, sondern eine HTMLCollection. Eine HTMLCollection ist für zwei Dinge berüchtigt:
(a) sie ist live
(b) sie kann fast nichts.

Die forEach-Methode fehlt erwartungsgemäß.

Die Überraschung ist, dass das HTMLCollection.prototype Objekt Symbol.iterator enthält (in aktuellen Chromes und Feuerfüchsen) und damit for...of unterstützt. Die Spezifikation weiß davon nichts, MDN auch nicht.

Historische Recherche ergibt diese Stackoverflow-Seite, wo jemand auf einen 2014er Commit der DOM Spec verweist. Demnach war es mal geplant, HTMLCollection als iterable zu deklarieren und offenbar haben die Browser das implementiert - aber dann gab's Widerworte und es ist dann wohl aus der DOM-Spec wieder entfernt worden.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Die älteren DOM-Methoden liefern keine NodeList, sondern eine HTMLCollection.

Irrelevant. Von älteren DOM-Methoden war hier nie die Rede. Sowohl bei @Hörnchen als auch bei mir war es querySelectorAll(), was eine NodeList liefert, die mit for...of und forEach() durchiteriert werden kann.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die älteren DOM-Methoden liefern keine NodeList, sondern eine HTMLCollection.

Irrelevant. Von älteren DOM-Methoden war hier nie die Rede. Sowohl bei @Hörnchen als auch bei mir war es querySelectorAll()

Ah, bei @klawischnigg aber nicht. Da war’s getElementsByTagName(). Das fällt dann mit unter „kein guter Stil“.

🖖 Live long and prosper

[klawischnigg]

Hi there,

Die älteren DOM-Methoden liefern keine NodeList, sondern eine HTMLCollection.

Irrelevant. Von älteren DOM-Methoden war hier nie die Rede. Sowohl bei @Hörnchen als auch bei mir war es querySelectorAll()

Ah, bei @klawischnigg aber nicht. Da war’s getElementsByTagName(). Das fällt dann mit unter „kein guter Stil“.

Ich schätz' einnmal, bei ein paar Audioplayern auf der Seite isses wurscht, und abgesehen davon denke ich, daß es auch von der Performance her egal sein dürfte (die in dem Fall ohnehin keine Rolle spielt)...

[Rolf B]

Hallo Gunnar Bittersmann,

Von älteren DOM-Methoden war hier nie die Rede.
Ah, bei @klawischnigg aber nicht

Eben 😉

Von der Performance her dürfte es wirklich wurscht sein, vom Luxus der Weiterverarbeitung her hingegen sieht sie Sache anders aus.

Rolf

[klawischnigg]

Hi there,

Wieder einmal wird ersichtlich, vielleicht nicht alle aber viele Wege führen nach Rom.

Ja, aber die NodeList mit for durchzugehen und darin die Items mit ihrem Index anzusprechen halte ich für keinen guten Stil. Dafür gibt’s ja for...of und forEach().

Hast ja recht. In meinem Alter ist man halt voller schlechter Angewohnheiten...

[Mota]

Moin was ist die Variable o ?

Da diese ja in der if Abfrage als Vergleicher agiert.

Gruß Mota

[MudGuard]

Hi,

Moin was ist die Variable o ?

der Parameter der Funktion.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

genauer gesagt: die Objektreferenz auf das Audio-Element, das nicht gestoppt werden soll

Rolf

[Gunnar Bittersmann]

@@Mota

Moin was ist die Variable o ?

Schon das Aufkommen deiner Frage offenbart, was es ist: schlechter Stil.

Und entgegen dem anderswo im Thread erwähnten „kein guter Stil“ meine ich hier: richtig schlechter Stil.

Code sollte lesbar sein. Kryptische Variablenbezeichner sind das Gegenteil.

Wofür steht e? Error? Event? Don’t make me think! Verwende sprechende Variablennamen! Und nein, nicht err bzw. evt, sondern error bzw. event.

Da diese ja in der if Abfrage als Vergleicher agiert.

Ja, der übergebene Parameter wird der Reihe nach mit allen Audioplayern verglichen. Vermutlich soll die Funktion mit sControl(event.target) aufgerufen werden.

Unnötig zu erwähnen, dass deren Bezeichner sControl genauso blöd ist wie o.

🖖 Live long and prosper

[klawischnigg]

Hi there,

Moin was ist die Variable o ?

Schon das Aufkommen deiner Frage offenbart, was es ist: schlechter Stil.

Das Aufkommen seiner Frage offenbart nur, daß er wissen will, was die Variable "o" ist.

Und entgegen dem anderswo im Thread erwähnten „kein guter Stil“ meine ich hier: richtig schlechter Stil.

Code sollte lesbar sein. Kryptische Variablenbezeichner sind das Gegenteil.

Geh bitte, hör auf Dich als Programmier-Talib (für weniger Informierte, das ist die Singularform von Taliban) zu gerieren. Es ging in unserem Disput um verschiedene Lösungsansätze eines spezifischen Problems und Du verteilst da Haltungsnoten wegen irgendwelcher in diesem Zusammenhang völlig irrelevanter Variablenbezeichnungen.

Unnötig zu erwähnen, dass deren Bezeichner sControl genauso blöd ist wie o.

siehe oben. Dein Klugschi** hat schon oft auf die Erwähnung des Kontext hingewiesen - den kennst Du hier nicht, und wie ich meine Funktionen benenne müssen wir schon mir überlassen. Dein Verhalten diesbezüglich ist schon ziemlich arrogant...

[Gunnar Bittersmann]

@@klawischnigg

und wie ich meine Funktionen benenne müssen wir schon mir überlassen.

Für dich selbst kannst du gerne Code schreiben, den du nach 2 Wochen selbst nicht mehr verstehst. Aber wenn du sowas in einem öffentlichen Form tust, musst du halt mit Kritik rechnen.

🖖 Live long and prosper

[klawischnigg]

Hi there,

und wie ich meine Funktionen benenne müssen wir schon mir überlassen.

Für dich selbst kannst du gerne Code schreiben, den du nach 2 Wochen selbst nicht mehr verstehst.

Ist das jetzt "Kritik" oder mutmaßt Du öffentlich über eine von Dir angenommene bei mir vorliegende intellektuelle Minderbegabung?

Aber wenn du sowas in einem öffentlichen Form tust, musst du halt mit Kritik rechnen.

Niemand sagt etwas gegen Kritik. Aber

"Unnötig zu erwähnen, dass deren Bezeichner sControl genauso blöd ist wie o."

ist keine Kritik weil das erstens einfach eine "Gunnar hätte es halt gern anders und hält es für blöd"-Meinung ist und Du es zweitens offensichtlich auch für unnötig hältst, das zu begründen…

[Gunnar Bittersmann]

@@klawischnigg

Auf deine Polemik gehe ich nicht weiter ein.

"Unnötig zu erwähnen, dass deren Bezeichner sControl genauso blöd ist wie o."

ist keine Kritik weil das erstens einfach eine "Gunnar hätte es halt gern anders und hält es für blöd"-Meinung ist

Nein, es geht nicht um mich. Es geht um anderen außer dir, die es gern anders hätten.

und Du es zweitens offensichtlich auch für unnötig hältst, das zu begründen…

Die Begründung findest du hier im Thread.

🖖 Live long and prosper

[klawischnigg]

Hi there,

Nein, es geht nicht um mich. Es geht um anderen außer dir, die es gern anders hätten.

Ich staune. Nicht nur, daß Du weißt, was ich in zwei Wochen vergesse hast Du offenbar auch universelle Kenntnis über die Wünsche aller anderen (ausser mir). So etwas nur Hellsicht zu nennen wäre fast schon eine Untertreibung. Ich kämpfe mit mir gerade um den Begriff "göttliche Eingebung"...

[Gunnar Bittersmann]

@@klawischnigg

hast Du offenbar auch universelle Kenntnis über die Wünsche aller anderen (ausser mir).

Ich habe bewusst eine Formulierung gewählt, die nicht sagt, dass alle anderen es gern andern hätten.

Aber viele andere – das war mein Punkt.

🖖 Live long and prosper

[Felix Riesterer]

Lieber klawischnigg,

Deine offensichtliche Verärgerung über Gunnars Einschätzung hinsichtlich Stil habe ich in diesem Forum auch schon bei anderen Postern erlebt. Sicher hast Du dafür (mindestens) einen guten Grund.

Geh bitte, hör auf Dich als Programmier-Talib (für weniger Informierte, das ist die Singularform von Taliban) zu gerieren.

Warum Du aber in Deiner Antwort eine im September 1994 gegründete deobandisch-islamistische Terrorgruppe zum Vergleich heran ziehst, leuchtet mir hinsichtlich der Verhältnismäßigkeit nicht ein. Hat es dieses Maß an Eskalation gebraucht?

Es ging in unserem Disput um verschiedene Lösungsansätze eines spezifischen Problems und Du verteilst da Haltungsnoten wegen irgendwelcher in diesem Zusammenhang völlig irrelevanter Variablenbezeichnungen.

Gunnar hat Dir schon an anderer Stelle erklärt, dass es ihm keinesfalls um persönliche Vorlieben geht, sondern um den Beispielcharakter, den Lösungsvorschläge in diesem Forum haben sollten. Dabei sollten sie im Idealfall auch gleich best practices vorführen.

und wie ich meine Funktionen benenne müssen wir schon mir überlassen. Dein Verhalten diesbezüglich ist schon ziemlich arrogant...

Du darfst selbstverständlich Deinen Code so schreiben, wie Du das für Dich und Deine Projekte für richtig hältst. Deinem Argument entnehme ich, dass Du der alleinige Autor an diesen Quelltexten bist. Stimmt das? Wenn man nämlich in einem Team an Projekten arbeitet, ist es natürlich sinnvoll, den Schreibstil verbindlich festzulegen. Auch dabei darfst Du das so halten, wie Du das mit Deinen Mitstreitern für richtig hältst. Das hat aber wenig Relevanz für bei SELFHTML für gut befundene Vorschläge!

Wenn Gunnar dann in seiner Art und Weise Deinen Stil oder Dein Vorgehen in absoluten Formulierungen abkanzelt, dann denke Dir bitte dazu, dass es sich nicht um Gunnars persönliche Meinung handelt, sondern dass es um eine Haltung und ein Vorgehen geht, das bedenkenlos anderen empfohlen werden kann. Wie ich Gunnars Postingverhalten kennengelernt habe, sieht er immer auch die Verantwortung, dass vorgestellte Lösungen gerne gedankenlos via cop&paste Verwendung finden und genau deshalb gewissen Mindestkriterien in Sachen Stil und Vorgehensweise genügen müssen.

Liebe Grüße

Felix Riesterer

[klawischnigg]

Hi there,

Danke für Deine Einschätzungen.

Geh bitte, hör auf Dich als Programmier-Talib (für weniger Informierte, das ist die Singularform von Taliban) zu gerieren.

Warum Du aber in Deiner Antwort eine im September 1994 gegründete deobandisch-islamistische Terrorgruppe zum Vergleich heran ziehst, leuchtet mir hinsichtlich der Verhältnismäßigkeit nicht ein. Hat es dieses Maß an Eskalation gebraucht?

Mir ging es selbstverständlich nicht um den gewalttätigen oder gar terroristischen Aspekt dieser Gruppe sondern um deren äusserst strenge und wortwörtliche Auslegung der Schrift, die sie für heilig halten. Jemand wie Gunnar als ein mit hellsichtigen Gaben Gesegneter wird das schon richtig verstanden haben.

und wie ich meine Funktionen benenne müssen wir schon mir überlassen. Dein Verhalten diesbezüglich ist schon ziemlich arrogant...

Du darfst selbstverständlich Deinen Code so schreiben, wie Du das für Dich und Deine Projekte für richtig hältst. Deinem Argument entnehme ich, dass Du der alleinige Autor an diesen Quelltexten bist. Stimmt das?

Auch seinerzeit als Projektleiter und Geschäftsführer meiner Firma hätte ich an der Benennung der Funktion nichts zu beanstanden gehabt. Und die Verwendung der Variablenbezeichnung 'o' für ein als Parameter übergebenes Objekt findet sich unter Garantie (ohne es jetzt überprüfen zu wollen, jetzt müssen wir mir hellsichtige Fähigkeiten einräumen) in der Hälfte aller je zum Thema Javascript geschriebenen Lehrbücher und Tutorials.

Wenn Gunnar dann in seiner Art und Weise Deinen Stil oder Dein Vorgehen in absoluten Formulierungen abkanzelt, dann denke Dir bitte dazu, dass es sich nicht um Gunnars persönliche Meinung handelt, sondern dass es um eine Haltung und ein Vorgehen geht, das bedenkenlos anderen empfohlen werden kann.

Ich würde die Beanstandung einer Funktionsbenennung als "blöd" schon eher unter "persönliche Meinung" einordnen.

Wie ich Gunnars Postingverhalten kennengelernt habe, sieht er immer auch die Verantwortung, dass vorgestellte Lösungen gerne gedankenlos via cop&paste Verwendung finden und genau deshalb gewissen Mindestkriterien in Sachen Stil und Vorgehensweise genügen müssen.

Kein Einwand, aber das kann man auch anders vorbringen...

[Felix Riesterer]

Lieber klawischnigg,

Kein Einwand, aber das kann man auch anders vorbringen...

in der Tat. 😇

Liebe Grüße

Felix Riesterer

[klawischnigg]

Hi there,

Moin was ist die Variable o ?

Da diese ja in der if Abfrage als Vergleicher agiert.

Das ist das aufrufende Player-Objekt…

[Mota]

Moin an alle, danke für die tollen Lösungsansätze mit dem Event batsch an die Stirn finde ich gut und werde die Idee versuchen umzusetzen.

Ich finde es auch gut mit dem Reset der Player auf currentTime = 0, danke für das Mitdenken @Hörnchen, nur bin ich noch am überlegen ob ich diesen umsetze oder nicht.

Ich werde mich im laufe der Woche, mit den Lösungen auseinander setzen und berichten!

Danke liebe Community!

[Mota]

Ich habe jetzt versucht die stopAllPlayer Funktion von Hörnchen um zu setzen.

Dazu lasse ich die stopAllPlayer Funktion durch die playOrPauseSong Funktion als erstes starten. function playOrPauseSong() { stopAllPlayer("schicke hier die SongID mit zum Test); .....

Habe auch in der stopAllPlayer Funktion ein Consolen.Log gemacht um zu sehen das diese auch angesprochen wird, CHECK klappt!

Bekomme auch alle, zur Zeit 13 HTML audio tags angezeigt über die Console nur dann ist Feierabend.

Die If Abfrage scheint nicht zu laufen!

Habe die Console Logs auch noch drin, hilfe was mache ich falsch?

Gruß Mota

[Mota]

Moin Community,

ich habe noch einen Lösungsansatz warum dei Player nicht Stoppen ob mit zurücksetzen oder ohne, ist soweit ich das überblicke auch nicht relevant für das Problem.

Mein Lösungsansatz bzw. meine Idee:

In der Konsole werden die Audio Tags mit der ID audio_file1, audio_file2, ... ausgegeben nur fängt die ID vergabe bei jeden Player bei 1 an. Dadurch entstehen doppel IDs Player 1 hat also 4 Songs somit ID 1 - 4 Player 2 hat 9 Songs also ID 1 - 9. Könnte das, dass Stoppen verhindern?

Oder was könnte es noch sein?

Gruß Mota

[Gunnar Bittersmann]

@@Mota

Ich finde es auch gut mit dem Reset der Player auf currentTime = 0

Es klingt hart, muss aber immer wieder gesagt werden: Was du findest, ist irrelevant. Relevant ist, was die Nutzer deiner Seite finden. Der Wurm muss dem Fisch schmecken, nicht dem Angler.

Ich würde erwarten, dass die Player nicht zurückgesetzt werden, sondern jeweils an der Stelle weiterspielen, wo sie zuvor pausiert wurden. Andere Nutzer könnten das anders sehen.

Mache keine Annahmen über Nutzer, sondern sprich mit ihnen!

🖖 Live long and prosper

[Mota]

@@ Gunnar,

wie ich oben bereits geschrieben habe ich bin diesbezüglich noch nicht sicher ob ich den Reset möchte oder nicht.

Ich danke aber für deinen Gedankenanstoß dies bezüglich,.

Grüß Mota