Browser-Surround-Test
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
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:
Osterkarte 2013
Wieder einmal rechtzeitig: Meine animierte Osterkarte mit Sound ist am Wochenende fertig geworden.
Chrome: Abspielen mancher Ogg Files nicht möglich
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
Der schnellste Weihnachtsmann der Welt
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.
Leistungsschutzrecht? Lernresistenz?
Darf ich höflichst fragen, WAS GENAU das Problem ist, dass es ein Leistungsschutzrecht braucht?
Die Darstellung aller Webseiten basiert im wesentlichen auf dem Protokoll HTTP(s) und der Beschreibungssprache HTML.
Wenn das Problem denn tatsächlich wäre, dass Google & Co. Inhalte von Verlagen indexieren, dann ist es doch extrem einfach: Man nimmt sich 10 Minuten Zeit und studiert, wie man das Indexieren seiner Webseite unterbindet.
Selbstverständlich geht das und ist zudem genauestens spezifiziert. Seit über 15 Jahren. Nochmal in Worten: Fünfzehn Jahren.
Wie wäre es mit einer solchen robots.txt
User-agent: * Disallow: /
… oder auf einelnen, nicht zu indexierenden Webseiten ein
<meta name="robots" content="noindex">
in den Header einzubauen?
Was darf man von einer Person/ Instanz halten, die nach mehr als 1 Jahrzent des Vorhandenseins einer Regelung krampfhaft versucht, auf lernresistent zu machen?
Links zum Thema:
Magisches fillRect() mit Javascript
Ich schreibe gerade an einem HTML5 Audioplayer. Bevor jemand sagt: davon gibt es ja bereits hunderte - such’ doch einfach einen davon aus… Nein, der Player wird zu einem späteren Zeitpunkt beleuchtet. Das sollte doch nur ein Aufhänger sein.
In einem Player braucht es einen Fortschrittsbalken. Je nach Abspielposition soll da ein Canvas mit der fillRect Funktion bemalt werden. Canvas … das ist eine Zeichenfläche im Webbrowser auf der man Bildpunkte manipulieren kann und von Microsoft im Internet Explorer 6 eingeführt wurde. In HTML5 wurde es offiziell und endlich in allen neuen Webbrowsern verfügbar gemacht.
<canvas id="progresscanvas"></canvas>
Per CSS wurde Breite und Höhe des Canvas mit 10px x 220px gesetzt.
Eine der Zeichenfunktionen ist fillRect. Damit kann man ein ausgefülltes Rechteck zeichnen. Dazu gibt man als Parameter x- und y- Koordinaten des Start- und Endpunktes an.
Mein Javascript Snippet:
var canvas=document.getElementById('progresscanvas');
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
var iAlpha=0.05 + oAudio.currentTime / oAudio.duration /10*1;
ctx.fillStyle = "rgba(0,0,0, "+iAlpha+")";
var fWidth = Math.round((oAudio.currentTime / oAudio.duration) * (canvas.clientWidth));
if (fWidth > 0) {
ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
}
}
Irgendwie kam allerdings nicht das heraus, was ich meinte, was entstehen müsste. Mit einem console.log geprüft, welche Parameter im “ctx.fillRect(0, 0, fWidth, canvas.clientHeight);” landen - hier kommt sogar das Richtige:
Wenn man den Player anschaut: mein Song ist kurz vor dem Ende. Unten in der Konsolenausgabe ist der letzte fillRect Aufruf drin - es soll das Canvas gefüllt werden von links oben (0,0) bis (10, 215) - javascript-seitig ist alles korrekt. Nur das Ergebnis ist im Webbrowser nicht: hier ist nur ein 2 Pixel hoher und 155 Pixel breiter Balken. Der Fortschrittsbalken an sich funktioniert, aber die Breite wird mit einem ominösen Faktor skaliert.
Das Ganze habe ich mit verschiedenen Browsern getestet: Firefox, IE9 und Chrome verhalten sich gleich falsch.
Der Trick besteht darin: im HTML muss ich im Canvas bereits die korrekte Grösse angeben.
Statt
<canvas id="progresscanvas"></canvas>
nun
<canvas id="progresscanvas" width="220" height="10"></canvas>
… und schon geht es mit dem fillRect.
Html5 Audio und Surround Sound
Wie man stereo-Audiodateien in eine Webseite einbindet und möglichst viele Webbrowser dies abspielen lässt, ist in etlichen Seiten/ Blogs beschrieben.
Alle bekannten, neueren Webbrowser unterstützen zumindest das Format MP3 oder aber OGG.
<audio loop="loop" controls="controls" > <source src="demosong_2.0_.ogg" type="audio/ogg" /> <source src="demosong_2.0_.mp3" type="audio/mp3" /> <!-- Flash-Fallback kommt hierher --> </audio>
Und wer noch Wert auf Abwärtskompatibiltät legt (IE 8 und älter), der setzt noch einen Flashplayer ein und lässt die MP3 Datei abspielen.
Soweit so gut.
Und wie sieht es mit surround-Audiodateien aus? Schliesslich wird seit 1 Jahrzehnt jeder Billigst-PC mit einer 5.1 Soundkarte (oder besser) ausgeliefert…
Meine ersten Experimente habe ich bereits im Oster-Demo gemacht (s. Link [01] unten am Ende des Beitrags). Nachfolgend gibt es nun nachträglich etwas ausführlichere Informationen.
Bekannte Audioformate mit surround-Unterstützung sind
- AAC (Mpeg-4-Audio)
- AC3 (Dolby)
- OGG (Ogg Vorbis)
- WAV (unkomprimierte Audio-Daten)
CSS3 Osterei und HTML5 Audio mit Surround-Sound
Malen wir mal ein Ei. Aber ohne eine Grafik zu verwenden.
Demo-Seite: https://www.axel-hah … -ei-und-html5-audio/
Jubiläum: Axel ist nun 15 Jahre im Web!
Ich habe kürzlich mein uralt-ZIP-Drive rausgekramt und ein altes Backup gefunden.
Meine erste Webseite ging vor - sage und schreibe - 15 Jahren online! F… (ferdammt), ich bin mit der Meldung genaugenommen sogar ein paar Tage zu spät ;-)
Zur Technik:
Damals war HTML 3.2 “state of the art”. Das heisst: die Webseite bestand aus Frames - und es gab zusätzlich eine Noframe-Variante. Es gab auch einige dezent animiert GIFs - natürlich alle selbsterstellt ;-)
Linkerhand das Menü enthielt Icons, die im onmouseover-Event Grafiken austauschten. Tja, das CSS-Pseudoelement :hover - geschweige denn CSS gab es ja noch nicht.
Ich habe versucht, den goldenen Regeln für schlechtes HTML möglichst gekonnt auszuweichen (heute gibt es ja zuhauf HTML-Validatoren und SEO-”Zeugs”).
Dies war die Frame-Variante:
Inhalt:
Was stellte ich in meiner ersten Webseite online? Es gab einige meiner damaligen mit Delphi und Turbo Pascal erstellten Programme für Windows und DOS zum Download - ebenso 2 Tracker-Songs.
Meine Webseiten entstanden mit einem DOS-Editor (Teil des hammermässigen Norton Commander Clons namens “DCC”), für den ich auch gleich eine Datei für das Syntax-Highlight von HTML anbot.
Ja, ich weiss, im Screenshot gibt es HTML-Syntax-Fehler - es ist ja meine allererste Seite ;-)
Und auch damals gab es schon unterschiedliche Browser, auf die es Rücksicht zu nehmen galt. Frames und Animationen konnten nicht alle Webbrowser.
Oooh jaaa. Lang-lang ist’s her!
Links:
- Die Goldenen Regeln für schlechtes HTML
- http://www.emerge.de/dcc.htm (Anm.: die Seite zum DCC wurde deaktiviert)