Archiv für den Monat: Dezember 2018

Musik sichtbar machen 2: ein animiertes Volume Meter

Ich hab noch ein bisschen nach Audiospielereien gegooglet, und bin bei dzone fündig geworden. Hier wird ganz genau erklärt, wie man mit der Web Audio API von HTML5 einen Audioplayer und ein einfaches Zweikanal-Volumemeter konstruiert:

https://dzone.com/articles/exploring-html5-web-audio

Mit den vorgefertigten Beispielen ist es einfach, sich ein kleines Animationsbeispiel selber zu basteln. Kleiner Wermutstropfen: es funktioniert nicht mit dem Internet Explorer. Aber hübsch ist es trotzdem!

Statt langer Rede stelle ich hier einfach eine kleine Demo rein:

https://evileu.de/demos/peters_roll/peters_roll.html

Das Script läuft mit einer lokalen Kopie von jquery-1.8.0.min.js, wer mag kann das ja noch anpassen. Viel Vergnügen beim Nachbasteln!

Musik sichtbar machen: der Wavesurfer

Ich habe an den Feiertagen ein bisschen mit Audio/Multimedia rumgespielt, und bin da auf ein sehr hübsches Skript gestossen, den wavesurfer.js. Er ermöglicht die Darstellung einer wav-Datei als Frequenzkurve, die beim Abspielen der Musik animiert durchlaufen wird. Das sieht dann zum Beispiel so aus:

peters_roll_screenshot

peters_roll_screenshot

Die Animation läuft synchron zur Musik, das Layout ist fully responsive – eine sehr hübsche Angelegenheit!

Die Implementierung ist denkbar einfach, man bindet das Skript ein:

<script src="https://unpkg.com/wavesurfer.js"></script>

Dann kann man schon loslegen. Man braucht nur eine Div, in die der wavesurfer-Output geschrieben werden kann, und einen Button zum Starten:

<input type="button" value = "Abspielen" onclick = "play()" >
<div id="waveform"></div>

Die Function play sieht dann Beispielsweise so aus:

function play(){
    
    var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'yellow',
    progressColor: 'blue',
    });

Man legt eine neue Instanz von WaveSurfer auf eine Variable, und stellt die Ausgabe-div und die Farbe ein. Mit der Variablen kann man dann weiterarbeiten:

wavesurfer.load('musik.wav');

wavesurfer.on('ready', function () {
    
    wavesurfer.play();
    var dauer = wavesurfer.getDuration();
    console.log("Dauer:"+dauer);
    
}); //Ende von play()

Die Wav-Datei muss erst vollständig geladen sein, ehe die Animation loslegen kann, deswegen erst den load, dann die Statusabfrage  wavesurfer.on(‚ready’…, die Musik wird erst gestartet wenn der ready-Event zündet. Ich hab hier gleich mal noch ein bisschen gespielt und gebe mir die Dauer des Musikstücks in der Konsole aus, das funktioniert mit dem .getDuration().

Hier habe ich eine kleine Demoversion gebastelt, der Trommelwirbel stammt von meinem Lieblingscousin:

https://evileu.de/demos/wavesurfer_min.html

Mehr zu den Wavesurfer-Methoden gibts hier:

https://wavesurfer-js.org/docs/methods.html

Die Doku ist zwar sehr knapp gehalten, aber das Nötigste findet man schnell heraus, und es gibt auch einige hübsche Plugins. Ein gelungene Sache, finde ich – und ausbaufähig!

WordPress 5.0 und Gutenberg – der erste Eindruck

Was soll ich sagen? Gerade WordPress 5.0 installiert, und gleich beim ersten Versuch mit dem neuen Editor Gutenberg einen Bug produziert. Ich hab einfach mal rumgeklickt und einen „Drop Cap“ angewählt, also ein Initial, und dazu eine Hintergrundfarbe. Das sah dann erstmal so aus:

dropcap_bug

dropcap_bug

Ist jetzt irgendwie nicht so ideal, oder?

Das neue Theme Twenty Nineteen ist ausserdem so ziemlich das häßlichste Theme, das mir je untergekommen ist. Das Design ist absolut grottig, die Schriften sind für meinen Geschmack lieblos zusammengeklatscht, und statt eines schönen Titelbilds ist nur ein minikleines rundes Logo vorgesehen. Die Startseite sieht dann z.B. so aus:

schriften

schriften

Weiter unten ist es auch nicht schöner, der Widget-Bereich ist vom Layout her so schön wie eine billige Einwurfzeitung:

widgetarea

widgetarea

Dann wollte ich ein Bild einfügen – hab erstmal nur die Option „Beitragsbild“ gefunden, das stellt sich dann so dar, blaugetönt und über die ganze Seite ausgebreitet:

beitragsbild

beitragsbild

Finde ich jetzt auch nicht wirklich prickelnd…

Aber ein Theme kann man wechseln, ich hör da mal auf zu meckern und nehm das Twenty Sixteen, damit bin ich eigentlich immer gut gefahren. Wollen doch mal sehen, wie sich der neue Editor benimmt.

Ich möchte gerne eine Liste mit Bullets, erster Ansatz: ich schreib mal meine Listenpunkte untereinander hin, mach jeweils ein Return am Ende. Und jetzt? Noch nichts weiter in Sicht. Ich markiere mal meine drei Listenpunkte, dann ändert sich das Bild. Anscheinend wird für jeden Listenpunkt ein Block angelegt.

drei_blocks

drei_blocks

Ah, guxtu! Wenn man auf das Paragraph-Zeichen drauffährt, kommt auch ein Tooltip, der sagt „Change Block Type“, und hier kriege ich schließlich die Auswahl Liste oder Zitat:

transform_to_list

transform_to_list

Ah, geschafft! Anscheinend brauche ich für jeden Listenpunkt einen eigenen Block, so läuft der Hase.

liste

liste

Dann werde ich wohl für ein Bild auch einen eigenen Block brauchen, schätze ich mal. Ich mach da mal unterhalb der Liste weiter. Wenn man da ganz genau hinguckt, aber wirklich ganz genau, sieht man drei ausgegraute Icons, das mittlere davon könnte evtl. für ein Bild sein:

graue_icons

graue_icons

Sehen sie die Icons in der rechten unteren Ecke? Also, ohne Brille hätte ich da keine Chance. Na gut, klicken wir mal auf das Bild-Icon. Hurra, da kommt der Media-Uploader!

media_uploader

media_uploader

Wenn ich das Bild eingefügt habe, erscheinen rechts im Editorfenster die Bildeigenschaften, das ist OK:

bildeigenschaften

bildeigenschaften

Wenn ich jetzt rechts neben dem Bild Text weiterlaufen lassen will, geht das wieder nur mit einem neuen Block. Hier vermisse ich die Oprion „Als Text einfügen“, die hab ich einfach nicht gefunden. Wenn ich jetzt z.B. aus Word einen Text mit einer Überschrift reinkopiere, baut er mir gleich wieder zwei Blocks, einen für die Überschrift und einen für den Textkörper. Langsam wirds hier unübersichtlich. Ausserdem fehlen im Text etliche Leerzeichen, das ist nicht schön:

leerzeichen_fehlen

leerzeichen_fehlen

Jetzt möchte ich gern noch ein Video einfügen, also frisch auf, ein neuer Block. Klick auf das Icon „Add file“, dann gehts wieder in die Mediathek oder zum Upload und wird defaultmässig zum Download angeboten, das ist ganz OK.

file_download

file_download

Man kann aber auch mit „Change Block Type“ das ganze in ein eingebettetes Video konvertieren, wer das möchte ist auch gut bedient.

Ich lasse es hier mal gut sein, für einen ersten Eindruck reicht das. Das man für jeden Pfiffkaas einen eigenen Block braucht, finde ich dann doch etwas gewöhnungsbedürftig. Man hat dann quasi den Bildschirm voll mit lauter kleinen spezialisierten Editorfenstern, die einem immer nur die Optionen anbieten, die für den jeweiligen Blocktype gültig sind. Na ja. Das kann man mögen oder nicht, ich finde es ziemlich gewöhnungsbedürftig. Was mich definitiv stört: ich bin mehrfach in eine „Keyboard Trap“ gefallen, wo die Tab- und Pfeiltasten nicht mehr so durch den Artikel navigieren, wie man es erwarten würde. Das ist natürlich total grottenschlecht für Benutzer, die Gutenberg nicht mit der Maus, sondern über die Tastatur bedienen möchten. Aber das geht schon stark ans Thema Barrierefreiheit, und sprengt den Rahmen dieses ersten subjektiven Eindrucks.  Mein Fazit: geht so. Ich sehe keinen großen Vorteil im Block-Konzept, aber man kanns wahrscheinlich doch recht schnell lernen. Man kann mit Gutenberg arbeiten, aber wo der grosse bahnbrechende Innovationsvorsprung liegt, hat sich mir nic.ht erschlossen.