hoch

AMC-Player - flat skin

Am Wochenende habe ich v0.33 meines Html 5 Audioplayers freigegeben.
Funktional soll es das erst einmal sein, was ich mir für Version 1 vorstelle. Nun erledige ich ein wenig Code Cleanup.

Und vielleicht noch eine kleine Skin Datei. Eine in einer Art flat Design habe ich da schon mal in Vorbereitung:

2018-11-19-flat-skin.png

… und auch ein Dark Theme

2018-11-22-flat-skin-dark.png

Beide sind noch nicht im Repo verfügbar … seht es als Preview :-)

Updates:

  1. 22.11.2018 - ein dunkles Theme hinzugefügt

weiterführende Links:

  1. Axels Webseite
  2. Dokumentation (en)
  3. Git-Repository (en)
Artikel weiterempfehlen: Google + Facebook

AMC Player - viel fehlt nicht mehr zur Version 1

Der auf meiner Webseite eingebundene Surround Audioplayer kommt der Version 1 immer näher.
In den letzten Tagen kam ein Feature zur Integration und Anzeige von Songinfos+Coverbild hinzu. Get-Funktionen in der API entsprechend auch.
Und so einige kleine Unschönheiten wuden ausgebügelt.

2018-11-10-amcplayer.jpg

Natürlich kann der Player auch für stereo Medien verwendet werden.

Aktuell schreibe ich an Erweiterungen, die es erlauben, Radiostreams einzubinden - analog mit denselben Metadaten und einem Coverbild. Streams oder Audiodateien sollen automatisch erkannt werden - man könnte so Mediadateien und Streams mischen. Entsprechend Medientyp sollen sich die Steuerelemente und dieFortschrittsanzeige anpassen.

weiterführende Links:

  1. Axels Webseite
  2. Dokumentation (en)
  3. Git-Repository (en)
Artikel weiterempfehlen: Google + Facebook

Javascript Snippet: Query Parameter holen

Ab und an brauche ich es mal … und daher ergänze ich hier ein weiteres Snippet.

/**
 * get query parameters from url as object
 * @returns {object}
 */
function getQueryParams() {
    qs = document.location.search.split('+').join(' ');

    var params = {},
            tokens,
            re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

Beispiel:

// to get values from current request
// https://example.com/path/index.html?parameter1=foo&parameter2=bar
var oQuery=getQueryParams();
console.log(oQuery.parameter1); // foo
console.log(oQuery.parameter2); // bar
Artikel weiterempfehlen: Google + Facebook

Html5 Audio Events beobachten

Es entsteht gerade eine weitere Demo Seite zu Html 5 Audio:
Nach Eingabe einer beliebigen Audio URL wird diese als Source eines Audio Tags verwendet.
An dieses Audio Tag werden alle dokumentierten Events angeklebt und man kann bei den Interna eines Audio Tags zuschauen und wann welche Events abgesetzt werden.

Sie erscheinen zum einen rechts als Log (mit Zeitangabe in Millisekunden seit Laden der Seite). Damit kann man z.B. messen, wie lange ein Audio laden muss, bis es abgespielt werden kann (readyState=4).

Unten ist die Liste aller Events, die bei Absetzen hervorgehoben werden … und nach und nach schwächer verfärbt sind.

2018-02-28-audiodebugger.jpg

weiterführende Links:

  1. Demo-Seite: Html5 Audio debugger
Artikel weiterempfehlen: Google + Facebook

PHP-Klasse cdnorlocal

Eigentlich begann es als Abfallprodukt. Ich brauchte da in einer Web-Applikation eine Klasse … und habe halt jene kleine Klasse geschrieben: wenn ein Verzeichnis für eine Bibliothek im Vendor-Verzeichnis lokal existiert, dann wirf eine lokale URL zurück. Wenn nicht, dann eine zu einem CDN Hoster. Sowas packt man an sich als Funktion in einen 3 Zeiler.

Damit kann ich abstrahieren, wo eine benötigte Bibliothek tatsächlich liegt. Mein Produkt-Download wird klein, weil ich Bibliotheken nur extern verlinke, statt mit in den Download zu packen. Soll das Produkt auf einem System ohne Internet-Anbindung verwendet werden, kann man die Bibliotheken aber optional lokal legen und auf einen Internet-Zugang verzichten.

Tja und dann kam mir der Sinn, noch eine Admin dafür zu schreiben: ich will live in einer API nach Bibliotheken browsen, Details einsehen, Versionen wechseln, Bibliotheken zu “mir” herunterladen.

Ach so Versionen … da gibt es bei gefragten Produkten in relativ kurzen Intervallen neue Releases. Sei es jQuery, Font-Awesome, Plugins … eigenlich habe ich selbst gar keine Kontrolle über all jene Updates … und wenn was neu ist, dies in meinen Applikationen zu aktualisieren.

Und wenn man Versionen lokal hat und sie schon mal lokal erfragen als auch remote die aktuellste ermitteln kann … machen wir noch einen Versions-Checker für sämtliche lokal gemachten Bibliotheken auf einmal dazu. Es kam eins zum anderen. Ich glaube, ich habe mal ein Grundgerüst. Das wird später einmal eine gute Hilfe, den Überblick über alle meine Bibliotheken und deren Versionen zu behalten.

Browsing (Rendering der API Such-Abfrage bei CDNJS):

2017-07-25-cdnorlocal-01.png

Details (Rendering der API Abfrage einer Library bei CDNJS):

2017-07-25-cdnorlocal-02.png

Versionscheck: lokal hinterlegte Versionen von Bibliotheken werden mit der online aktuellsten Version verglichen

2017-07-25-cdnorlocal-03.png

weiterführende Links:

  1. Github: cdnorlocal
  2. https://cdnjs.com/
Artikel weiterempfehlen: Google + Facebook