Linuchs: Wie testen, ob ein Event gesetzt wurde / aktiv ist?

Moin,

einige meiner Songtexte haben einen (oder mehrere) mp3-Balken und eine Tempo-Schiebefläche, um langsamer üben zu können.

Neues Lied, Tempo-Gedöns von funktionierendem Lied kopiert, aber beim Schieben keine Reaktion, auf der Konsole keine Fehleranzeige.

Habe den Verdacht, dass der EventListener 'input' nicht wirkt.

'use strict';
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#tempo').addEventListener('input', setTempo);
  setTimeout( setTempo, 1000 ); // 
});
function setTempo() {
  console.log("setTempo");
  var tempo = document.getElementById("tempo").value;
  console.log("setTempo=[" +tempo +"]");
  document.getElementById("tempoId").textContent = "Tempo " +Number.parseFloat(tempo).toFixed(1);
  for ( let i=0; i < arr_ausgewaehlte_videos.length; i++ ) {
    arr_ausgewaehlte_videos[i].playbackRate  = tempo;
  }
  for ( let i=0; i < arr_ausgewaehlte_audios.length; i++ ) {
    arr_ausgewaehlte_audios[i].playbackRate  = tempo;
  }
  return false;
};

Console:

setTempo
setTempo=[1.0]

Hier ein Test, wie das Tempo zu ändern ist: http://osmer.de/karaoke/teenage_queenie.htm

Die beiden Spuren können nicht synchron sein, da aus verschiedenen Quellen.

Gruß, Linuchs

  1. Lieber Linuchs,

    Neues Lied, Tempo-Gedöns von funktionierendem Lied kopiert, aber beim Schieben keine Reaktion, auf der Konsole keine Fehleranzeige.

    Du schreibst „kopiert“? Was hast Du kopiert? JS-Code? Anstatt eine JS-Datei zentral einzubinden? Oder habe ich etwas missverstanden?

    Liebe Grüße

    Felix Riesterer

    1. Hast du richtig verstanden.

      In der Testphase ist es unsinnig, an zentralen Dateien rumzuschrauben, um etwas auszuprobieren.

      Der "Erfolg" ist mit Sicherheit, dass bereits laufende Seiten nicht mehr das tun, was sie mal konnten.

      Und ich teste auch Alternativen: Das eine Dokument links rum, das andere rechts rum. Vielleicht kann eine mp3-Datei rückwärts laufen? Oder - was sehr Sinn macht, transponiert werden?

      Und ja, bin nicht auf dem neuesten Stand. Das war nicht immer sinnvoll, weil neue Browser zwar alte Dokumente akzeptieren, aber nicht umgekehrt.

      Und ich leiste der Wegwerf-Gesellschaft keinen Vorschub, alle 2 Jahre neue Geräte mit neuen Browsern zu verkaufen. Ich kenne Leute, die haben Schubladen voller Smartphones ...

  2. Lieber Linuchs,

    Du schreibst nur, dass keine Fehlermeldungen in der Konsole erscheinen, nicht aber, ob Deine Log-Ausgaben ankommen und was sie beinhalten. Kein Wunder also, dass sich niemand Deiner Sache annimmt...

    Liebe Grüße

    Felix Riesterer

  3. Hallo

    Habe den Verdacht, dass der EventListener 'input' nicht wirkt.

    Versuchen wir mal das auseinander zu nehmen.

    'use strict';
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#tempo').addEventListener('input', setTempo);
      setTimeout( setTempo, 1000 ); // 
    });
    

    Wenn das DOM geladen ist, registriere auf das Element mit der ID „tempo“ einen Event-Listener vom Typ input, der bei Eintritt des Events die Funktion setTempo aufruft, warte eine Sekunde und rufe die Funktion setTempo einmalig ohne Eintritt des Events auf.

    Soweit, so gut.

    Die Ausgabe dieses einmaligen Aufrufs ist vermutlich die Ausgabe der Konsole, die du zeigst.

    Console:

    setTempo
    setTempo=[1.0]
    
    • Was passiert, wenn du die „Tempo-Schiebefläche“ betätigst?
    • Wie sieht überhaupt deren HTML-Struktur aus?
    • Was wird im Element mit der ID „tempoID“ angezeigt?
    • Wie sieht die HTML-Struktur des Elements mit der ID „tempoID“ aus?
    • Woher kommen die Arrays arr_ausgewaehlte_videos und arr_ausgewaehlte_audios und was beinhalten sie real?
    function setTempo() {
      console.log("setTempo");
      var tempo = document.getElementById("tempo").value;
      console.log("setTempo=[" +tempo +"]");
      document.getElementById("tempoId").textContent = "Tempo " +Number.parseFloat(tempo).toFixed(1);
      for ( let i=0; i < arr_ausgewaehlte_videos.length; i++ ) {
        arr_ausgewaehlte_videos[i].playbackRate  = tempo;
      }
      for ( let i=0; i < arr_ausgewaehlte_audios.length; i++ ) {
        arr_ausgewaehlte_audios[i].playbackRate  = tempo;
      }
      return false;
    };
    

    Tschö, Auge

    --
    „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde
  4. @@Linuchs

      for ( let i=0; i < arr_ausgewaehlte_videos.length; i++ ) {
        arr_ausgewaehlte_videos[i].playbackRate  = tempo;
      }
    

    So eine Schleife hab ich ja auch schon ewig nicht mehr gesehen!

    Warum nicht

      for ( let video of arr_ausgewaehlte_videos ) {
        video.playbackRate  = tempo;
      }
    

    oder

      arr_ausgewaehlte_videos.forEach(video => {
        video.playbackRate  = tempo;
      });
    

    🖖 Живіть довго і процвітайте

    --
    Ad astra per aspera