- 2012
- Mai
- 14
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
- 2012
- Mai
- 9
Google Web Fonts einbinden
Per CSS 3 lassen sich mit Webfonts andere Schriftarten als die Systemschriften einbinden. Bis dato musste man bei der Wahl der Schriftart darauf achten, dass dies Systemschriften von Windows / Mac / Linux sind. Auch all diese Tricks mit Image-Replacements (Fahrner Image Replacement [FIR]; Scalable Inman Flash Replacement [sIFR], Malarkey Image Replacement [MIR] oder Definitive Solution to Image Replacement [DIR]) - kann man in Zukunft vergessen.
Eine Quelle für Webfonts sind die Google Web Fonts (es gibt ganz sicher weitere Quellen - bitte immer auf die zur Schriftart angegebene Lizenz achten).
Zwar gibt Google unter “Quick-use” einen funktionierenden Code für Copy & Paste vor, um die Schrift auf seiner Webseite einzubinden … aber es gibt bei dann jedem Seitenaufruf der eigenen Webseite immer einen dynamischen Request zu Google.
Um dies zu vermeiden und Daten nur vom eigenen Server zu holen und nicht zuletzt auch, um Daten effektiv cachen zu können, kann man die Schriftart auch auf seinen Webserver kopieren und von dort einbinden.
- 2012
- Apr
- 2
CSS3 Osterei und HTML5 Audio mit Surround-Sound
Malen wir mal ein Ei. Aber ohne eine Grafik zu verwenden.
Demo-Seite: http://www.axel-hahn … -ei-und-html5-audio/
- 2012
- Feb
- 24
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:
- 2012
- Feb
- 14
X-powered im Header will ich nicht
Wenn in einer bei einem Provider gehosteten Webseite im Header etwas mitgesendet wird, wie
X-Powered-By PleskLin
… das muss ja nicht sein. Selbst wenn der HTTP Response Header selbst nicht als Text auf der Webseite sichtbar ist - Webentwicklertools, wie die “Web Konsole” im Firefox oder “Entwicklertools” in Chrome können es mit den Standard-Boardmitteln eines Webbrowsers anzeigen lassen.
Mit Daten, was für ein System da wohl am Laufen ist, sollte man generell sparsam sein.
Wenn ein Apache Webserver im Einsatz ist (das ist bei Hostern für private Webseiten zumeist der Fall), kann man dies in der .htaccess im Webroot entfernen lassen. Man fügt folgende Zeilen hinzu:
<IfModule mod_headers.c> Header unset X-Powered-By </IfModule>