Karl-Heinz Osmer


Wissenswertes über Datenbanken und Webseiten


Zwischen Hörproben wechseln (Javascript)


Wenn mehrere Audio- und/oder Video-Dateien ¹) auf einer Webseite einzeln angeboten werden, läuft die erste weiter, wenn eine andere gestartet wird. Mit einer kleinen Javascript-Funktion werden alle anderen auf Pause gestellt.

¹) Gilt für Videos im HTML-video-Element, nicht für eingebetteten Code von Youtube.


So sieht es aus:

Neuer Arbeitsplatz   mp4 (4MB)

Deutschland Hymne   mp3

Europa Hymne   mp3


Übernehmen Sie diesen Javascript-Code in Ihre Webseite mit beliebig vielen audio- und/oder video-Elementen:

<script>
window.addEventListener('DOMContentLoaded', function () {
  // Nodeliste aller audio- und video-Objekte dieser Webseite
  const av_objects  = document.querySelectorAll( "audio, video" );
  // Kontroll-Anzeige
  console.log( "[" +av_objects.length +"] audio- und video-Objekte" );
  for ( let i = 0; i < av_objects.length; i++ ) {
    av_objects[i].volume = 0.2;  // audio, video: Halbe Lautstaerke
    // wenn "play" aktiviert wird ...
    av_objects[i].addEventListener( "play", function() {
      // ... alle anderen auf "pause" setzen
      for ( let k = 0; k < av_objects.length; k++ ) {
        if ( i != k ) av_objects[k].pause();
      }
    });
  }
});
</script>