Golb Slexa ::

Es ist wieder Ostern und wieder gibt es eine animierte Grusskarte :-)
Wem es gefällt, kann diese mit einem eigenen Titel an Freunde versenden.

Es ist ein kleines Reaktionsspiel. Nach einer zufälligen Wartezeit wird ein Feld hervorgehoben, was schnellstmöglichst angeklickt werden muss. Es wird die Zeit zusammengezählt vom Anzeigen eines Feldes bis es angeklickt wurde.

Schöne Feiertage!
zur Osterkarte 2014

Wie es erstellt wurde?

• Hintergrundmusik und Sounds wurden mit Magix Music Maker erstellt.
• Grafiken / Fotos / Scans wurden mit Paint Shop Pro montiert bzw. nachbearbeitet
• Die Spielsteuerung erfolgt mit Javascript - jQuery nimmt mir teilweise einige Arbeiten ab. CSS 3 animiert die Boxen.

Mit dem Webbrowser kann man die Sourcen einsehen - oder mich nochmal fragen.

Weiterführende Links:

• Osterkarte 2014

Ich bin dabei, eine e-Card vorzubereiten und habe einen loopenden Song erstellt. Wenn ich diesen mit dem Audio Tag mitsamt loop Attribut einbinde:

<audio title="Hintergrundmusik" preload="auto" controls="controls" loop="loop" 
	autoplay="autoplay"
	id="audioBgSound"
	>
	<source type="audio/ogg" src="/axel/download/easter2014-bg_2.0_.ogg" >
	<source type="audio/mp3" src="/axel/download/easter2014-bg_2.0_.mp3" >
</audio>

… so gibt es am Ende des Songs immer eine kurze Pause von ein..zwei Zehntel, bevor der Song von vorn beginnt. Das ist unschön, ich wollte eigentlich einen soften Übergang ohne diese Zwangspause.

Einen Evenlistener auf “ended” zu setzen, der die Position auf 0 (Anfang) setzt, hat genau denselben Effekt, wie das Loop Attribut.

Nun habe ich eine Krüppel-Lösung hergenommen.

Mit window.setTimeout wird eine Funktion forlaufend wiederholt. Diese prüft die Position und ob das Ende “fast” erreicht ist. Fast heisst hier: Länge des Audios ([audio].duration) minus etwas Luft. Ich hab mal 0.2 Sekunden gesetzt.

/**
 * sound hook
 * @returns {undefined}
 */
function soundtrigger() {
	oAudioBgsound = document.getElementById("audioBgSound");
	iPos = oAudioBgsound.currentTime;
	if (iPos>oAudioBgsound.duration - 0.2){
		oAudioBgsound.currentTime=0;
	}
	if (iPos > (oAudioBgsound.duration - 6)) {
		window.setTimeout("soundtrigger();", 50);
	} else {
		window.setTimeout("soundtrigger();", 5000);
	}
}

Es ist echt unschön, aber falls wer was besseres weiss…

weiterführende Links:

• Musik zur Osterkarte 2014

Alle Jahre wieder…
Meine elektronische Weihnachtskarte ist online.

Die Karte hat als Motiv das Bundeshaus in Bern - was mir nicht neutral genug erschien, um es als versendbare Karte zu gestalten.
Aber mit dem Weihnachtsgruss von 2012 ginge dies (s. Link unten “Der schnellste Weihnachtsmann der Welt”).

Weiterhin gibt es eine Weihnachtskarte rein in Papierform:

Weiterführende Links

1. Weihnachtsgruss 2013 - Anm.: diese e-Card wurde vom Server gelöscht
2. Weihnachtsgruss 2012 Der schnellste Weihnachtsmann der Welt
3. Axels Blog Der schnellste Weihnachtsmann der Welt

Wie sowas entsteht?
[Weiterlesen…]

Mein letzter Browser Check auf Unterstützung von Surround-Wiedergabe von HTML5-Audiotags ist ca. 1 Jahr her.

Mehr oder minder zufällig habe ich die Problemkinder Firefox (Version 22) und Opera (Version 15) getestet: siehe da, in beiden kann nun 5.1 Audio wiedergegeben werden.

Yeah!

Firefox
Im Falle von Firefox war die zuletzt von mir getestete Version die Nr. 13.
canPlayType([MIME]) liefert auf Firefox 22:

• audio/mp4 - “maybe”
• audio/ogg - “maybe”

In surround werden sowohl OGG als auch AAC (Extension .m4a) wiedergegeben.

Opera
Opera hat mit der jetzigen Version 15 die Rendering Engine auf die des Chromium-Projektes gewechselt und verwendet für die Darstellung von Webseiten damit dieselbe, wie Google Chrome. In Opera 12 gab es vor 1 Jahr noch keinen Surround-Sound.
canPlayType([MIME]) liefert auf Opera 15:

• audio/mp4 - “false”
• audio/ogg - “maybe”

In surround wird OGG wiedergegeben; AAC kann nicht abgespielt werden.

AMC-Player
Wann in welchen Versionen es genau in beiden Browsern gefixt wurde, weiss ich nicht … aber egal. Ich habe meinen Html5-Player - den AMC player - auf Version 0.15 aktualisiert (*), damit man ist im Firefox die Umschaltung auf Sourround freigegeben (für Opera mit Chromium-Engine war es verfügbar). Den Html5-Player mal wieder anzuschauen, habe ich eh schon zu lange vor mir hergeschoben.

UPDATE:

• Der AMC-Player hat die Version 1 erreicht
• Besuche zum Selbst-Ausprobieren meine “Testseite für unterstützte Audioformate”

Weiterführende Links

• Blog-Eintrag: Html5 Audio und Surround Sound
• Testseite für unterstützte Audioformate
• Sourceforge: AMC Player
• Mozilla Firefox
• Opera

Ich habe auf Jamendo einen zweiten Song abgelegt. Musikalisch geht es in Richtung Trance.
Nicht, dass mir graues Wetter besonders viel ausmacht … aber es braucht manchmal einen schlauen Songtitel. Bei Blick auf die Wetterprognose waren Synthesizer für Donner und Regen schnell in den Titel eingebaut :-)

weiterführende Links:

• auf Jamendo den Song bewerten
• Axels Songs - Hier kann man den Song in verschiedenen Formaten und auch als 5.1 Surround-Version herunterladen

Wieder einmal rechtzeitig: Meine animierte Osterkarte mit Sound ist am Wochenende fertig geworden.

Osterkarte anzeigen

TV Geräte von heute haben einen Internet Anschluss, man hat darauf einen Webbrowser, kann Apps darauf installieren und so Youtube Videos konsumieren und vieles andere mehr.

Wenn zudem noch ein Icon “Allshare” zu finden ist, dann kann man sich Audios, Videos und Fotos auf dem Fernseher reinziehen, die auf anderen Geräten abgelegt sind - sei es auf dem Mobiltelefon oder dem Laptop/ Rechner.

DNLA ist hier das Zauberwort.

Was es zunächst braucht, ist ein DNLA Server, der die Mediainhalte bereitstellen kann. Auf dem Mobilgerät gibt es eine Allhare Funktion, die alle Telefoninhalte per WLAN verfügbar macht.
Auf einem Rechner braucht man einen DNLA Server. Der steckt beispielsweise im DivX-Player (es gibt aber auch noch andere Produkte).

Das TV Gerät mit Allshare Funktion ist ein DNLA Client, der die geteilten Inhalte anzeigen kann.

Und so schaut man ein Videofile am Rechner am heimischen TV … [Weiterlesen…]

Mehr durch Zufall habe ich festgestellt: manche meiner Stereo-Ogg Files lassen sich im Chrome mit dem html5 audio player gar nicht abspielen. Firefox spielte sie allesamt klaglos.

Ich habe zwar schon als Stereo-Quelle MP3 Dateien in verschiedenen Bitraten, aber alle Ogg Files, die daraus erstellt werden, gehen vorher durch ffmpeg und werden zu PCM WAV Dateien umgewandelt.

• Die Quelle zum Encoden nach Ogg ist somit immer WAV mit 44.1 kHz.
• Encoder ist immmer oggenc2 - also immer derselbe Encoder und denselben Parametern.

Also habe ich irgendwann die Suche nach Encoder-Problemen aufgegeben.

Soweit ich es debuggt habe, wird im Javascript-Code das Audio Objekt erfolgreich initialisiert. Auch die Methode play() wird erfolgreich aufgerufen. Chrome macht anschliessend - was man in der Entwicklerkonsole unter Netzwerk sieht - partial Requests auf das Audiofile. Und hier bleibt er hängen: “pending” steht da im Status.

Workaround:
Was ich gefunden hab: die URLs der Audiosourcen werden um ein “?” ergänzt - und schon funktionierts im Chrome.

also ALT:

<audio>
  <source src="/data/song_2.0_.ogg" type="audio/ogg">
  <source src="/data/song_2.0_.mp3" type="audio/mp3">
  (...)
</audio>

und NEU:

<audio>
  <source src="/data/song_2.0_.ogg?" type="audio/ogg">
  <source src="/data/song_2.0_.mp3?" type="audio/mp3">
  (...)
</audio>

… und das Javascript Snippet:
aSource ist ein Array mit den Keys src (eine URL des Audios) und type (MIME Type). Wenn kein “?” in der Audio-URL vorkommt, wird dieses angefügt.

s+='<audio>';
(...)
  sourcesrc=String(aSource.src);
  if(sourcesrc.indexOf("?")<0) sourcesrc+="?";
  s+='<source src="' + sourcesrc + '" type="'+aSource.type+'">';
(...)
s+='</audio>';
(...)
document.getElementById("divaudios").innerHTML=s;

weiterführende Links

• Ogg Encoder
• ffmpeg.org
• AMC Player - Html 5 Player für stereo und surround Medien

Ich habe Anfang Dezember meinen Song “Jingle Bells” (1) zur Weihnachtskarte 2011 dem Aufruf nach Weihnachtssongs auf jamendo.com (2) folgend hochgeladen.

Eigentlich mal nur so auf gut Glück und aus guter Laune.

Meine Überraschung ist nun riesengross, dass es so viele Downloads gegeben hat. Waren es kurz vor Weihnachten um die 3.000 … ist der Song nun im Januar gar auf Platz 4:

… und hat über 10.000 Downloads.

Hey Leute, da bin ich echt platt!!

[Weiterlesen…]

Alle Jahre wieder … male ich zu div. Anlässen meine Karten. Und erstelle elektronische, animierte Varianten mit HTML.

In diesem Jahr entstand die nachfolgende Weihnachtskarte:

Zunächst aber entstand die animierte Version. Brainstorming zur Animation und eine erste Skizze auf Papier erfolgte im Zug nach München sitzend.

Einzelgrafiken sind von Hand gezeichnet, dann gescant und in der Bildbearbeitung zugeschnitten und - ganz wichtig - mit Transparenzen versehen.
Die Animation erfolgte per Javascript - es wäre vielleicht auch mit CSS3 gegangen, aber ich war mit jQuery schneller am Ziel.

Ach, ich mache später mal ein ausführlicheres “Making of” und beleuchte dann das Technische genauer.

Schaut es euch an:

Link: Der schnellste Weihnachtsmann der Welt

Wer mag, kann diese Karte mit einer eigenen Grussbotschaft versehen an Freunde weitersenden.