Sitemap Datenschutzerklärung Impressum
weiterführende Links: Javascript | FreeCloudProxy | Verschlüsselung | Xor | MP3 Splitter | Greasemonkey | Grafik | Umwandlung | Smartphone
Du bist hier:Start»Javascript»Sprechende Uhr

Sprechende Uhr mit Javascript

Aus der Rubrik was mit HTML5 möglich aber sinnlos ist, präsentiere ich hier die sprechende Uhr. Frei von Adobe Flash ! Nur mit offenen Webstandards programmiert. Wenn du auf "Uhrzeit ansagen" klickst, dann sollte der Browser die Uhrzeit ansagen.

Lippen Uhr

Uhrzeit ansagen

Bisher habe ich die sprechende Uhr erfolgreich in den folgenden Webbrowsern getestet:

  • Firefox Version 29
  • Konqueror 4.8
  • Google Chrome 35
  • Opera 21
  • Android Browser 4.2.2.
  • Safari 5.0 für Apple

In der Firefox-Konfiguration about:config muss media.wave.enable auf true stehen.

Wenn du den Internet Exploder benutzt, dann lade dir einen modernen HTML5-fähigen Browser herunter. Hier sind die Browser, die definitiv nicht funktionieren:

  • Internet Explorer 8
  • Safari 5.1 für Windows

Zu den technischen Details

Die sprechende Uhr basiert auf dem <audio>-Element von HTML5. Als Audioquelle benutze ich vorgenerierte Sprachdateien, die als Base64-kodierte WAV-Schnipsel zusammengesetzt werden. Base64 übersetzt Binärdaten in Buchstaben, damit die Daten problemlos in einer Webseite gespeichert werden können. WAV ist eines der einfachsten Dateiformate, um Töne zu speichern. WAV-Dateien enthalten die digital kodierten Wellenformen des Schalls. Im HTML-Quelltext sieht das zum Beispiel so aus:

<audio id="audioSource" src="data:audio/wav;base64, UklGRioAAABXQVZFZm10IBAAAAABAAEARKwAAI
hYAQACABAAZGF0YQYAAAAAAAAAAAA="></audio>

Damit die Dateien nicht zu groß werden, habe ich nur mono statt stereo, nur 8 Bit statt 16 Bit und nur 22 Kilohertz statt 44 Kilohertz als Aufnahme-Frequenz benutzt. Gegenüber CD-Qualität ist die Aufnahmegröße somit auf ein Achtel verringert (nur 1 Megabyte statt 8 Megabyte). Zusätzlich habe ich die WAV-Dateien mit Bzip2 komprimiert. Dadurch verringert sich Größe der WAV-Dateien noch einmal - allerdings auf Kosten der Ausführungsgeschwindigkeit von Javascript. Das Dekodieren von Bzip2 kann je nach Browser bis zu eine Sekunde dauern.

Die komprimierten Audio-Dateien sind zwischen 6 und 23 Kilobyte groß. Das Javascript lädt jeweils nur die Sprachdateien herunter, die für die aktuelle Uhrzeit notwendig sind. Wer sich für noch mehr Details interessiert, kann in die Javascript-Datei speaking_clock.js reinschauen. Die WAV-Dateien habe ich über folgendes Kommando in Bzip2 und Base64 umgewandelt:

for filename in $(ls *wav); do
  name="${filename%.*}"
  bzip2 -c "$filename" | base64 -w 0 > ${name}.js
done

Download

Falls du selbst mit der sprechenden Uhr experimentieren möchtest, dann kannst du sie hier herunterladen: