<audio> per Leertaste stoppen / weiterspielen

[Linuchs]

Moin,

ich möchte die Audio-Files (= mehrere Spuren) einer Webseite per Leertaste stoppen und beim nächsten Druck weiterlaufen lassen. Unabhängig davon, welches Element im Focus ist.

Test erstmal mit nur einer Spur.

Das klappt, wenn das Audio-Tag nicht im Focus steht:

  // Leertaste = toggle
  function startStop( evt ) {
    if ( evt.keyCode == 32 ) {
      for ( let i=0; i < arr_ausgewaehlte_audios.length; i++ ) {
        if ( arr_ausgewaehlte_audios[i].paused ) arr_ausgewaehlte_audios[i].play();
        else arr_ausgewaehlte_audios[i].pause();
      }
      evt.stopPropagation();
    }
  }

  window.addEventListener('load', function ( ) {
    // Leertaste bedeutet start/stop
    document.addEventListener("keydown", startStop );
  });

Wenn das Audio-Tag den Focus hat (ich starte das Lied dort per Klick) und das Lied läuft, stoppt es. Normale Reaktion des Audio-Tags, Leertaste toggled.

Bei der nächsten Leertaste läuft es kurz an und stoppt wieder.

Wie kann ich dem Audio-Tag die Leertaste entziehen?

Fragt Linuchs

[Linuchs]

Versuch mit var focused = document.hasFocus();

  // Leertaste = toggle
  function startStop( evt ) {
    if ( evt.keyCode == 32 ) {
      for ( let i=0; i < arr_ausgewaehlte_audios.length; i++ ) {
        if ( arr_ausgewaehlte_audios[i].hasFocus() ) {
          // Leertaste wird bereits von audio ausgewertet
        } else {
          if ( arr_ausgewaehlte_audios[i].paused ) arr_ausgewaehlte_audios[i].play();
          else arr_ausgewaehlte_audios[i].pause();
        }
      }
      evt.stopPropagation();
    }
  }

Jetzt klappt's, wenn <audio> den Focus hat (da ist aber Javascript überflüssig), wenn nicht, meldet Javascript TypeError: arr_ausgewaehlte_audios[i].hasFocus is not a function

[Der Martin]

Hallo,

Versuch mit var focused = document.hasFocus();

  // Leertaste = toggle
  function startStop( evt ) {
    if ( evt.keyCode == 32 ) {
      for ( let i=0; i < arr_ausgewaehlte_audios.length; i++ ) {
        if ( arr_ausgewaehlte_audios[i].hasFocus() ) {
          // Leertaste wird bereits von audio ausgewertet
        } else {
          if ( arr_ausgewaehlte_audios[i].paused ) arr_ausgewaehlte_audios[i].play();
          else arr_ausgewaehlte_audios[i].pause();
        }
      }
      evt.stopPropagation();
    }
  }

Jetzt klappt's, wenn <audio> den Focus hat (da ist aber Javascript überflüssig), wenn nicht, meldet Javascript TypeError: arr_ausgewaehlte_audios[i].hasFocus is not a function

die Beschreibung auf MDN, die du selbst gefunden und verlinkt hast, besagt auch ausdrücklich, dass hasFocus() eine Methode des document-Objekts ist (und nicht jedes Element-Objekts), die true liefert, wenn das Dokument oder eines der darin enthaltenen Objekte den Focus hat.
Heißt letztendlich: Wenn das Browser-Tab mit dieser Abfrage den Focus hat.

Das kann dir also nicht helfen.

Live long and pros healthy,
 Martin

[klawischnigg]

Hi there,

ich möchte die Audio-Files (= mehrere Spuren) einer Webseite per Leertaste stoppen und beim nächsten Druck weiterlaufen lassen. Unabhängig davon, welches Element im Focus ist.

Das klappt, wenn das Audio-Tag nicht im Focus steht:

Ja, klar, wenn das Audio-Element den Focus hat, dann greift je nach Browser die eingebaute Funktionalität, und die overruled Dein Javascript immer.

Bei der nächsten Leertaste läuft es kurz an und stoppt wieder.

Ja, da laufen dann zwei Prozesse ab, Deiner und der native Prozess des Audioelements.

Wie kann ich dem Audio-Tag die Leertaste entziehen?

Du könntest ja versuchen, den Focus auf ein anderes Element zu setzen, sobald das Audio-Element den Focus bekommt, das wäre allerdings wenn's überhaupt funktioniert ein Pyrrhussieg, weil es das Element völlig unbedienbar macht, damit schlitterst Du ins nächste Usability-Problem; kann man aber uU machen, wenn man mit JS alternative Steuerungselemente nachbaut.

Ich sähe sonst als einzige Möglichkeit dem Audioelement sämtlich native Steuerungsmöglichkeiten zu entziehen, allerdings müßte man das, soferne das überhaupt möglich ist, über die Browsereinstellungen machen, das geht sicher nicht über irgendwelche JS-Anweisungen, ist also vermutlich auch nicht so richtig praktikabel.

[Julius]

Hallo klawischnigg,

Ich sähe sonst als einzige Möglichkeit dem Audioelement sämtlich native Steuerungsmöglichkeiten zu entziehen, allerdings müßte man das, soferne das überhaupt möglich ist, über die Browsereinstellungen machen, das geht sicher nicht über irgendwelche JS-Anweisungen, ist also vermutlich auch nicht so richtig praktikabel.

Wenn man das controls-Attribut weglässt, hat man doch genau das erreicht? Dann kann man mittels play() die Wiedergabes starten. Siehe MDN: HTMLAudioElement

Gruß
Julius

[klawischnigg]

Hi there,

Ich sähe sonst als einzige Möglichkeit dem Audioelement sämtlich native Steuerungsmöglichkeiten zu entziehen, allerdings müßte man das, soferne das überhaupt möglich ist, über die Browsereinstellungen machen, das geht sicher nicht über irgendwelche JS-Anweisungen, ist also vermutlich auch nicht so richtig praktikabel.

Wenn man das controls-Attribut weglässt, hat man doch genau das erreicht? Dann kann man mittels play() die Wiedergabes starten. Siehe MDN: HTMLAudioElement

Du sprichst eine große Wahrheit gelassen aus. Ich hab einfach nicht weitergedacht, aber Du hast völlig recht, anstatt dem Element die Kontrolle zu entziehen implementiert man es natürlich sinnvollerweise gleich ohne selbige. Die Frage ist, ob das Audio-Element ohne Control-Attribut einen Focus bekommen kann, ich seh' jetzt nicht, wie das funktionieren sollte und damit wäre das Problem von Linuchs eigentlich ja schon gelöst...😉

[Mitleser 2.0]

Ich sähe sonst als einzige Möglichkeit dem Audioelement sämtlich native Steuerungsmöglichkeiten zu entziehen, allerdings müßte man das, soferne das überhaupt möglich ist, über die Browsereinstellungen machen, das geht sicher nicht über irgendwelche JS-Anweisungen, ist also vermutlich auch nicht so richtig praktikabel.

Das Video-Element bei YouTube sieht irgendwie auch nicht mehr so aus, wie das Browser-Native. Habe nie was an den Browsereinstellungen geändert. Bei Amazon Prime sieht es wieder ganz anders aus. Komisch ;-)

[klawischnigg]

Hi there,

Ich sähe sonst als einzige Möglichkeit dem Audioelement sämtlich native Steuerungsmöglichkeiten zu entziehen, allerdings müßte man das, soferne das überhaupt möglich ist, über die Browsereinstellungen machen, das geht sicher nicht über irgendwelche JS-Anweisungen, ist also vermutlich auch nicht so richtig praktikabel.

Das Video-Element bei YouTube sieht irgendwie auch nicht mehr so aus, wie das Browser-Native. Habe nie was an den Browsereinstellungen geändert. Bei Amazon Prime sieht es wieder ganz anders aus. Komisch ;-)

Naja, so komisch ist das nicht, Du kannst ja alle Funktionen (und viele mehr) mit Javascript nachbauen - das Video-Element selbst ist ja quasi nur die Rohversion, deswegen sieht's auch in jedem Browser anders aus (oder auch gar nicht, wenn man auf das Control-Attribut verzichtet, woran mich zu erinnern Julius sich erlaubt hat)...

[Mitleser 2.0]

Das Video-Element bei YouTube sieht irgendwie auch nicht mehr so aus, wie das Browser-Native. Habe nie was an den Browsereinstellungen geändert. Bei Amazon Prime sieht es wieder ganz anders aus. Komisch ;-)

Naja, so komisch ist das nicht, Du kannst ja alle Funktionen (und viele mehr) mit Javascript nachbauen

Faszinierend, was es so alles gibt.

[Linuchs]

Danke fürs Mitdenken.

Hier ist mein vorläufiges Karaoke-Ergebnis für alle, die es bei flotten Songs nicht auf dem Stuhl halten kann:

My Song