Loopende Sounds mit Html5 Audio

Montag, 14. April, 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:

Webseite umgestellt auf Concrete 5

Dienstag, 11. März, 2014

Wer ab und an auf meiner Webseite war, wird es bemerkt haben: sie sieht nun anders aus. Die bisherigen Inhalte sind (zumeist) noch da, haben aber eine neue URL.

Ich habe meine Webseite auf das CMS Conrete 5 umgestellt.

Wer eine alte Adresse ansurft …
… sei es, er wählt einen Bookmark, einen nunmehr veralteten Link aus einem Forum oder dem noch nicht aktualisierten Suchindex einer Suchmaschine, der kommt auf eine Umleitungsseite.
Diese Umleitungsseite kennt das Mapping von der alten zur neuen URL. Suchmaschinen werden sofort mit einem 30x auf die neue Seite umgeleitet (Google hat übrigens so sehr schnell gelernt!); andere Benutzer bekommen einen Hinweis und den neuen Link angeboten.

Apache-Rewrite Regel für alte Seiten:

RewriteRule ^(axel.*).html$ /(...)/redirector_phpcms.php [PT,QSA]

Wenn das Redirect-Skript einen Bot erkennt, dann gibt es statt der Hinweis-Seite ein 301:

// ----- Bots ein 30x senden
if ($sNewUrl){
    if (
            stripos($_SERVER["HTTP_USER_AGENT"], "spider")>0
            || stripos($_SERVER["HTTP_USER_AGENT"], "bot")>0
            || stripos($_SERVER["HTTP_USER_AGENT"], "wget")>0
            (...)
       ){
            header("HTTP/1.1 301 Moved Permanently");
            header("Location: $sNewUrl");
       }
}

Warum das Ganze?
Bisher habe ich einen Parser verwendet, dessen Entwicklung seit einer gefühlten Ewigkeit eingestellt ist. Securitymässg ist das keine so tolle Ausgangslage.
Die Wahl fiel deshalb auf Concrete 5, weil ich bereits andere Webseiten damit umgesetzt habe und das Benutzerinterface beim Bearbeiten ganz nett und angenehm finde.

Was blieb gleich?
Die visuelle Menüstruktur blieb weitestgehend identisch. Die neue Webseite wurde aufgeschaltet, als ich ca. 95% der Inhalte und Funktionen drin hatte. Nur mit neuen URLs halt. Was fehlt, sind Fotos und VB-Script- und einige veraltete Javascript-Seiten.
Was sonst so gleich blieb:

  • Statistik erfolgt weiterhin mit Piwik
  • die Suche ist immernoch die von Sphider
  • mein bisheriger HTML5-Audioplayer ist integriert (AMC Player)
  • RSS News zu div. Themen werden im Hintergrund aktualisiert

Um meine Inhalte übernehmen zu können, brauchte ich unbedingt den Ersetzungsmechanismus aus dem bisherigen Parser. Dafür habe ich eine PHP-Klassse (mit Hilfe der Originalvorlage) geschrieben.

Was ist neu?
Neben dem Unterbau und den URLs (eben wg. des neuen CMS)

  • werden Elemente von Bootstrap 3 genutzt: Menüs, Icons, Tabellen und andere Elemente nutzen dieses Framwork.
  • das Layout wurde etwas frischer.
  • Seiten können Tags haben. Mit Klick auf einen Tag kommt man zu einer Suchseite, die Seiten aufzeigt, die denselben Tag verwenden.
  • Seiten-Inhalte zu verwalten ist für mich einfacher. Davon habt ihr zwar nichts direkt, aber ihr profitiert davon.

weiterführende Links

  • Concrete 5 (CMS; Opensource)
  • Matomo.org (Statistik-Tool; früher: Piwik)
  • Bootstrap (HTML-Framework)
  • http://www.sphider.eu/ - Sphider (PHP-Suchmaschine - Anm.: hat bekannte Sicherheitslücken und wird nicht mehr weiterentwickelt)
  • AMC Player (HTML5 Audioplayer für surround und stereo)
  • RSS-News (im Menü rechts dann eine Rubrik wählen)

Weihnachtskarten 2013

Samstag, 21. Dezember, 2013

Alle Jahre wieder…
Meine elektronische Weihnachtskarte ist online.

2013-12-21-weihnachtskarte.jpg

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:

2013-12-21-wkarte-papier.png

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…]

Browser-Surround-Test

Dienstag, 30. Juli, 2013

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

Ausgabe des Blogs wurde verbessert

Montag, 22. Juli, 2013

Ein paar Kleinigkeiten verbessert man immer mal wieder hier und da …

1) Microdata eingeführt

Naja, zumindest einmal rudimentär. Vielleicht können Suchmaschinen dann etwas genauer die Bloginhalte analysieren.
Die Anpassung erfolgte in den Template-Files unter
[Flatpress-Root]/fp-interface/themes/[Theme-Name]/*.tpl
anhand des Links [01] (s.u.).

2) Filtertyp und Wert anzeigen
Wenn man im Archiv Monat/ Jahr wählte oder aber eine der Kategorieen, so war funktionell die darauffolgende Ansicht korrekt, aber es wurde in Flatpress nicht ausgegeben, dass und welche Filteraktion gerade greift. Nun wird der Anzeigemodus eingeblendet:

2013-07-22-h2-nach-datum.png 2013-07-22-h2-archiv.png 2013-07-22-h2-artikel.png
[Weiterlesen…]