Golb Slexa ::

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.

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)

[Weiterlesen…]

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 .. s. Link [01] .. (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.

[Weiterlesen…]

Malen wir mal ein Ei. Aber ohne eine Grafik zu verwenden.

Demo-Seite: https://www.axel-hah … -ei-und-html5-audio/

[Weiterlesen…]

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)

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>

Hinweis:

Dieser Inhalt ist veraltet. Google Plus exitiert nicht mehr.

—

Um den G+ Button einzubetten, sieht Google das Laden eines Javascripts vom Google-Server und diesen Tag vor:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="inline"></g:plusone>

Nur ist das nicht konform mit der HTML-Syntax, auch nicht mit HTML5. Macht man einen Testlauf mit einem Validator, so wird diese Zeile angemahnt.
[Weiterlesen…]

Der Internet Explorer zeigt Inhalte vom Twitter Widget nicht an.
Selbst wenn man es auf dem Twitter-eigenen “Baukasten” versucht, bleibt die Vorschaubox einfach leer.

Die Webdeveloper Toolbar bringt das Problem ans Licht:

SEC7112:
Das Skript von “http://api.twitter.com/1/twitter/lists/d9/statuses.json?callback=TWTR.Widget.receiveCallback_1&include_rts=true&clientsource=TWITTERINC_WIDGET&1314634493205=cachebust” wurde aufgrund eines fehlerhaften MIME-Typs geblockt.
widget_list

[Weiterlesen…]

Im Laufe der Zeit sammeln sich mehr und mehr kleine Skripte und CSS-Dateien an, die um Einbindung in den Header bitten. Bei mir wurde das Arsenal auch immer grösser:

Javascript:
Ich hatte mehrere Dateien mit eigenen Javascript-Funktionen (wobei die ein oder andere nur im Fall der Verwenung nachgeladen wurde). Hinzu kommen ein Javascript Framework (jQuery) und diverse jQuery Plugins und sonstige Javascripts von Fremdanbietern.

CSS:
Ich verwende 2 CSS-Dateien für die Darstellung auf Bildschirmen und eine CSS Datei für Druckausgabe. Weitere Dateien kommen CSS-Dateien von jQuery-Plugins und sonstigen PHP-Skripten.

[Weiterlesen…]

Nun ist der IE 9 also fertig. Nicht dass es mein persönlicher Favourit ist…, aber ich würde es begrüssen, wenn meine Webseite auf allen Browser etwa gleich daherkäme.

Also habe ich die 64-Bit Installation gewählt. Dieses Setup hat sowohl die 64 Bit als auch die 32 Bit Version des Internet Explorer eingerichtet.

Nach der Installation meine Webseite aufgerufen … und es sah aus, wie auch im IE8. Es benötigt in der Webseite eine kleine Zeile speziell für den IE 9, damit dieser weiss: ich darf hier mehr Funktionen ausreizen. [Weiterlesen…]