javascript | blog.symolo.de

Fun with HTML5

making some noise

November 2, 2021 - Lesezeit: 25 Minuten

Jetzt gibt es soviele verschiedene Betriebssysteme und so viele unterschiedliche Musikplayerprogramme von VLC über mplayer oder der im Windows integrierte Grooveplayer. Nur sind die meisten Programme entweder nicht direkt installiert oder umständlich einzurichten, wollen ins Internet um irgendwas runterzuladen oder erstmal die ganze Festplatte durchsuchen. Ich will doch einfach nur ein paar mp3 Dateien anhören. Aber es gibt ja glücklicherweise den Browser, der das Abspielen von Musikdateien im HTML5 Standard ja bereits unterstützt. Super, also schnell die mp3 Datei gesucht und via Drag und Drop in den Browser ziehen und schon wird sie abgespielt. Nach 5 Minuten dann die nächste Datei draufziehen. Und dann nach 5 Min.? Genau: nächste Datei draufziehen. Nach 20 Min. war mir das dann zu doof und zu zeitaufwändig. Aber bis ich jetzt im Grooove mir was zusammengezogen habe und das Ganze dann noch für mein Linux und mein Androiden zusammengstellt habe, kam mir die Idee, warum nicht alles einmal fertig machen und auf jeder Plattform genießen. Also hab ich das Ganze mal in eine Website gepackt:

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
 <source type="audio/mp3" src="./Voodoo Suite - Little Grass Shack.mp3">
 Sorry, your browser does not support HTML5 audio.
</audio>

Ok, das war easy. Jetzt kann ich eine Datei abspielen. Die Datei muss im selben Ordner liegen und das Ganze kann, in zusammenarbeit mit einem einfachen Webserver, sogar schon gestreamt werden. Ist aber nur eine Datei, brauchen wir noch eine Playlist:

<ul id="playlist">
 <li><a class='active'href="./Voodoo Suite - Little Grass Shack.mp3">Voodoo Suite - Little Grass Shack.mp3 (Local)</a></li>
 <li><a href="https://files.freemusicarchive.org/storage-freemusicarchive-org/music/WFMU/Voodoo_Suite/blissbloodcom/Voodoo_Suite_-_03_-_Little_Grass_Shack.mp3">Voodoo_Suite_-_03_-_Little_Grass_Shack.mp3</a></li>
</ul>

Ok, jetzt haben wir eine Playlist. Wenn ich die aber anklicke, dann navigiert der Browser und ich bin soweit wie vorher. Dann packen wir doch einfach noch ein bisschen oldskool Javascript dazu:

<script>
  var audio;
  var playlist;
  var tracks;
  function init() {
    audio = document.querySelector('#audio');
    playlist = document.querySelector('#playlist');
    tracks = playlist.querySelector('li a');
    let links = playlist.querySelectorAll('a');
    links.forEach(e => {
      e.onclick = (evt) => {
        evt.preventDefault();
        playlink(e);
      }
    });
    audio.addEventListener('ended', function (e) {
      var current = playlist.querySelector('li a.active');
      var next = current.parentNode.nextElementSibling;
      if (next) {
        let e = next.querySelector('a');
        playlink(e);
      }
      else {
        let links = playlist.querySelectorAll('a');
        playlink(links[0]);
      }
    });
  }
  function playlink(link) {
    let e = link;
    playlist.querySelectorAll('a').forEach(l => { l.classList.remove("active") });
    e.classList.add("active");
    audio.src = e.getAttribute('href');
    audio.load();
    audio.play();
  }
  init();
</script>

So, jetzt kann ich mir in der Playlist aussuchen was ich will und die ganze Liste läuft solange ich nicht stoppe. Ich kann ich der Playlist entweder lokale Einträge verwenden oder Quellen aus dem Internet. Das Ganze lässt sich mithilfe eines Webservers bequem bedienen und funktioniert sogar mit der Xbox. Was will man mehr. Kein generve vom VLC für Updates oder das Verhalten des mplayers unter windows. Man muss nur seinen Browser aktuell halten und das war's schon.

Das Javascript in diesem Beispiel kann zweifelsohne noch deutlich verbessert werden. Ist aber für den vorliegenden Fall vollkommen ausreichend. Denn sonst hätt ich ja auch einen Player installieren können.

Mit Node.js gegen den Rest der Welt

Heute: easy SFTP Upload

Juli 27, 2021 - Lesezeit: 14 Minuten

Immer mal wieder hat man die Anforderung schnell mal ein paar Dateien von einem Rechner auf einen anderen zu laden. Besonders wenn dann noch das Internet beteiligt ist, ist man bestrebt das Ganze auch noch sicher ablaufen zu lassen. Damit entfällt die alte aber zuverlässige Methode des FTP. Aber dafür hat man ja SFTP. Nodejs macht es einem dann sogar recht einfach, da es bereits ein paar tolle Pakete dafür gibt. Eins davon hab ich dann heute mal eingesetzt und wieder lässt sich ein Anforderung in wenigen Zeilen elegant lösen.

Installation

npm i sftp-upload

Danach eigentlich nur noch passend konfigurieren und fertig:

const SftpUpload = require('sftp-upload');

async function uploadFiles() {
  return new Promise((resolve) => {
    process.stdout.write('\r');
    new SftpUpload({
      host: '<HOST HERE>',
      username: '<USER HERE>',
      password: "<PASS HERE>",
      path: './',
      remoteDir: '/<DIR HERE>',
      excludedFolders: ['node_modules'],
      exclude: ['package-lock.json', 'package.json'],
      dryRun: false
    })
      .on('error', (err) =>  {throw err;} )
      .on('uploading',  (progress) =>  process.stdout.write('\r' + progress.percent + '% completed'))
      .on('completed', () => {
        process.stdout.write('\r');
        resolve();
      })
      .upload();
  });
}

(async () => {
  await uploadFiles();
  console.log("DONE");
})();

Lässt sich super für Kontinuierliche Integration einsetzen und man könnte das ganze jetzt mit dem Komprimieren passend kombinieren. Jetzt muss das Ganze nur noch zyklisch ausgeführt werden...

Ha-GUID! Gesundheit!

GUIDs für Jedermann

Juni 30, 2021 - Lesezeit: ~1 Minute

GUIDs sind eine tolle Möglichkeit eine Eindeutigkeit z. B. an einem Datensatz zu erzeugen. Im Gegensatz zu Zahlenindetifiaktionen sind GUIDs absolut eindeutig und übergreifend. Als Entwickler braucht man immer mal wieder eine GUID für alle möglichen Zwecke. Deshalb haben wir ein kleines Programm entwickelt, dass einfach eine GUID erzeugt und in die Zwischenablage schiebt.

GUID Generator

Kann man auch als App verknüpfen.

Bruchailromantik

Bruchrechnen in JavaScript

Mai 3, 2021 - Lesezeit: 41 Minuten

So, hier jetzt also ein JavaScript für Bruchrechenaufgaben. Das ist diesmal etwas größer, um der Anzeige von Bruchzahlen auch gerecht zu werden und nicht irgendeine komische Schreibweise verwenden zu müssen.

//(
var myCalcer = (NumberToUse, targetElement) => {
  // the brain -> calcing stuff
  function Fraction(zahl) {
    let numerator = 0;
    let denominator = 0;
    for (i = 1; true; i *= 10) {
      if ((zahl * i) == Math.floor(zahl * i)) {
        numerator = (zahl * i);
        denominator = i;
        break;
      }
    }
    return ([numerator, denominator]);
  }

  function calc_ggt(a, b) {
    let h = (a > b) ? b : a;
    for (i = h; i > 1; i--) {
      if ((a % i) == 0 && (b % i) == 0) {
        return i;
      }
    }
    return 1;
  }
  // the eye -> formatting output
  function writeFraction(zaehler, nenner) {
    let outSpan = document.createElement("SPAN");
    outSpan.setAttribute('class', 'frac');
    outSpan.setAttribute('style', 'padding-right:5px;');
    outSpan.innerHTML = `<sup>${zaehler}</sup><span>/</span><sub>${nenner}</sub>`;
    targetElement.appendChild(outSpan);
  }

  function writeOperatorOrLine(opToWrite) {
    let outSpan = document.createElement("SPAN");
    outSpan.setAttribute('style', 'vertical-align:14px;padding-right:5px;');
    outSpan.innerText = opToWrite;
    targetElement.appendChild(outSpan);
  }

  function addcss() {
    let styleHelper = document.createElement("style");
    styleHelper.id = 'styleHelper';
    styleHelper.innerHTML = `span.frac {
          display: inline-block;
          text-align: center;
        }

        span.frac>sup {
          display: block;
          border-bottom: 1px solid;
          font: inherit;
        }

        span.frac>span {
          display: none;
        }

        span.frac>sub {
          display: block;
          font: inherit;
        }`;
    targetElement.appendChild(styleHelper);
  }
  // the hand -> doing things
  let bruch = Fraction(NumberToUse);
  let ggt = calc_ggt(bruch[0], bruch[1]);
  addcss();
  writeOperatorOrLine(NumberToUse);
  writeOperatorOrLine("=");
  writeFraction(bruch[0], bruch[1]);
  writeOperatorOrLine(":");
  writeOperatorOrLine(ggt);
  writeOperatorOrLine("=");
  writeFraction(bruch[0] / ggt, bruch[1] / ggt);
};
//)(0.45);
var inputElement = document.createElement("INPUT");
var buttonElement = document.createElement("BUTTON");
var targetOutElement = document.createElement("DIV");
buttonElement.innerHTML = "Calc";
buttonElement.onclick = () => {
  /*
  for(var mainCounter = 1; mainCounter < 100; mainCounter++ ) {
    myCalcer(
      mainCounter /
      Math.pow(10, ("" + mainCounter).length),
      targetElement
    );
    targetElement.appendChild(document.createElement("BR"));
    targetElement.appendChild(document.createElement("BR"));
  }
  */
  targetOutElement.innerHTML = "";
  let numberToUse = parseFloat(inputElement.value.replace(',', '.'));
  myCalcer(numberToUse, targetOutElement);
};
targetOutElement.style.backgroundColor = "white";
targetOutElement.style.border = '1px solid black';
targetOutElement.style.borderRadius = '4px';
targetOutElement.style.padding = '10px';
targetOutElement.style.margin = 'auto';
targetOutElement.style.width = '200px';
targetOutElement.style.textAlign = 'center';
document.body.appendChild(inputElement);
document.body.appendChild(buttonElement);
document.body.appendChild(targetOutElement);

Hierbei teilt sich die Funktion myCalcer in 3 Teile. Der erste Teil sind die Berechnungsfunktionen. Der zweite Teil regelt die Ausgabe und der dritte Teil macht die Rechnung. Am Ende kommt noch ein bisschen Styling dazu, damit das auch was hermacht. Kann man direkt in der Konsole benutzen oder hier:

EOF