Javascript

Audio

HTML5 und die Web-Audio-API, Teil 2: Wir erstellen ein visuelles Audiospektrum per Canvas

17. Oktober 2014
von
HTML5 und die Web-Audio-API, Teil 2: Wir erstellen ein visuelles Audiospektrum per Canvas

Die neue Web-Audio-API mit ihren verschiedenen Möglichkeiten der Audiowiedergabe und -manipulation wurde hier bereits vorgestellt. Dabei haben wir einige der interessantesten Funktionen bereits vorgestellt. Ein recht komplexes Feld haben wir aber einem eigenem Artikel, nämlich diesem hier, vorbehalten. Denn, zusammen mit den Canvas-Zeichenfunktionen von JavaScript lässt sich damit auch ein visuelles Audiospektrum einer Wiedergabe realisieren. HTML-Elemente und „AudioContext“ bereitstellen Zunächst einmal werden ein Audioelement...

Weiterlesen »

Audio

HTML5 und die Web-Audio-API: Audiodateien abspielen, manipulieren und Klänge erzeugen

10. Oktober 2014
von
HTML5 und die Web-Audio-API: Audiodateien abspielen, manipulieren und Klänge erzeugen

Mit HTML5 und dem „<audio>“-Element ist es möglich, Audiodateien ganz ohne Plug-in im Browser abzuspielen. Mit der neuen Web-Audio-API kann man nun Audiodateien direkt per JavaScript laden oder eigene Klänge erzeugen. Außerdem kann die API die Wiedergabe von Audiodateien manipulieren, indem zum Beispiel Frequenzbereiche verändert werden. Wir werfen einen genaueren Blick auf die musikalische Schnittstelle. Anwendungsfall 1: Wiedergabe einer Audiodatei Zunächst einmal muss festgelegt...

Weiterlesen »

Canvas

3D im Browser: Seen.js erstellt komplexe Grafiken und Animationen für Canvas und SVG

2. Oktober 2014
von
3D im Browser: Seen.js erstellt komplexe Grafiken und Animationen für Canvas und SVG

HTML5 und JavaScript bieten alle Funktionen, um komplexe Grafiken und Animationen im Browser zu realisieren. Die JavaScript-Bibliothek „seen.js“ bietet hierfür eine umfangreiche Auswahl an Möglichkeiten, um aufwändige 3D-Welten im Browser entstehen zu lassen. „seen.js“ ist unabhängig von jQuery oder anderen Bibliotheken und erstellt eindrucksvolle 3D-Objekte und Szenerien auf der Basis von HTML5-Canvas und SVG. 3D im Browser, ganz ohne Plugin… So entwickeln Sie mit...

Weiterlesen »

Javascript

HTML5: So blenden Sie mit der Pointer-Lock-API den Mauszeiger bei Bedarf einfach aus

30. September 2014
von
HTML5: So blenden Sie mit der Pointer-Lock-API den Mauszeiger bei Bedarf einfach aus

Der Browser wird mehr und mehr zum Ort für Spiele. Dank HTML5 und den neuen JavaScript-APIs lassen sich komplexe und anspruchsvolle Anwendungen realisieren. Dabei ist der Mauszeiger nicht immer der richtige Begleiter. Vor allem, wenn die Steuerung per Tastatur erfolgt, stört der Mauszeiger in der Regel. Daher sorgt die neue Pointer-Lock-API dafür, dass er bei Bedarf einfach ausgeblendet werden kann. Pointer-Lock-API: Einfaches Aus- und...

Weiterlesen »

CSS

Sequence.js: Responsiver Content-Slider mit CSS3-Transitions und Gestensteuerung

18. September 2014
von
Sequence.js: Responsiver Content-Slider mit CSS3-Transitions und Gestensteuerung

Plug-ins für Content-Slider findet man wie Sand am Meer. Viele dieser Slider unterstützen auch CSS3-Transitions für Animationen und sind zum Teil responsiv gestaltet. Sequence.js ist dennoch eine Besonderheit unter den Content-Slidern. Denn dieses JavaScript ermöglicht nicht nur einen animierten Wechsel der einzelnen Slides. Auch die einzelnen Inhalte der Slides – Überschriften, Bilder etc. – können beim Wechsel animiert eingeblendet werden. Und wie es sich...

Weiterlesen »

Canvas

HTML5-Canvas: Einfacher zeichnen mit „Fabric.js“

26. August 2014
von
HTML5-Canvas: Einfacher zeichnen mit „Fabric.js“

Die Zeichenfunktionen von Canvas sind durchaus umfangreich und erlauben das Erstellen komplexer Formen und Animationen. Allerdings ist eine Kombination mehrerer Methoden notwendig, um beispielsweise eine Form zu erstellen, zu drehen und mit einer Farbe zu füllen. Die JavaScript-Bibliothek „Fabric.js“ vereinfacht die Möglichkeiten von Canvas und stellt Funktionen bereit, die gerade für komplexe Form- und Animationserstellungen Arbeitserleichterungen bringen. Außerdem sind Animationen und Interaktionen schnell eingerichtet...

Weiterlesen »

CSS

HTML5: Native Dialogfenster mit dem neuen Dialog-Element

14. August 2014
von
HTML5: Native Dialogfenster mit dem neuen Dialog-Element

Die neuen HTML5-Elemente und JavaScript-APIs ermöglichen es, komplexe Anwendungen für den Browser zu entwickeln. Dazu gehören ganz häufig auch Dialogfenster, über die Nutzer das Ausführen von bestimmten Handlungen bestätigen müssen oder die einfach eine Meldung ausgeben. Mit dem neuen „<dialog>“-Element lassen sich solche Dialogfenster zukünftig nativ per HTML5 auszeichnen. Einfache Auszeichnung ohne Stylesheets möglich Das „<dialog>“-Element kann an beliebiger Stelle im HTML-Body platziert werden....

Weiterlesen »

Javascript

Besser als pures CSS3: realistische, komplexe Schatten mit Shine.js

8. August 2014
von
Besser als pures CSS3: realistische, komplexe Schatten mit Shine.js

Dank CSS3 verfügen wir inzwischen über zahlreiche Möglichkeiten, Elemente mit Schatten zu versehen. So gibt es neben Text- und Elementschatten auch einen Schattenfilter. Allerdings erzeugen alle CSS3-Schatten lediglich einfache Schlagschatten, bei denen neben der Farbe bloß noch die Unschärfe, der Versatz und die Ausbreitung definiert werden können. Die JavaScript-Bibliothek „shine.js“ hingegen ermöglicht weitaus komplexere und realistischere Schatteneffekte. Schatten erzeugen shine.js von Benjamin Bojko und Naim...

Weiterlesen »

Formulare

MagicSuggest für jQuery: Schicke Eingabefelder mit Mehrfachauswahl auf Basis von Bootstrap 3

16. Juli 2014
von
MagicSuggest für jQuery: Schicke Eingabefelder mit Mehrfachauswahl auf Basis von Bootstrap 3

Mit dem „<select>“-Element ist es ein Leichtes, Eingabefelder auszuzeichnen, bei denen mehrere Einträge ausgewählt werden können. Allerdings funktioniert das nur mit einigen Einschränkungen und sieht bei weitem nicht so ansprechend aus wie bei MagicSuggest. Statt Auswahllisten lassen sich mit dem jQuery-Plugin schicke Eingabefelder erstellen, die eine Mehrfachauswahl an freien und vorgegebenen Einträgen ermöglicht. Einfache Einbindung Da MagicSuggest jQuery voraussetzt, müssen Plug-in und jQuery gemeinsam...

Weiterlesen »

Audio

HTML5-Sprechstunde: Texte vorlesen lassen mit der Speech-Synthesis-API

10. Juli 2014
von
HTML5-Sprechstunde: Texte vorlesen lassen mit der Speech-Synthesis-API

Was Navigationsgeräte schon lange können, lernen jetzt auch die Browser: Sprachsynthese. Die neue Speech-Synthesis-API erlaubt es, Texte mit einer menschlichen Sprechstimme auszugeben. Dabei stehen Stimmen für mehrere Sprachen zur Verfügung – teilweise auch mehrere Stimmen pro Sprache. Per Knopfdruck können sich Ihre Besucher den Text eines HTML-Dokumentes einfach vorlesen lassen. Sprachen- und Stimmenvielfalt Die Anzahl der zur Verfügung stehenden Sprachen und Stimmen ist abhängig...

Weiterlesen »