Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Speak.js: Von Text zu Sprache mit HTML5 und JavaScript

Speak.js ist eine JavaScript Bibliothek, die Umwandlung von Text in Sprache auf einfache Art und Weise im Browser ohne Plugins mit HTML5 möglich macht. Wir stellen euch Speak.js kurz vor.

Online-Demo zu Speak.js

Mit Speak.js den Browser sprechen lassen

Speak.js ist eine Portierung des Open-Source Sprachsynthesizers eSpeak von C++ zu JavaScript mit Hilfe von Emscripten. Dabei wird Text als String in eine wav-Datei umgewandelt. Die wav-Datei wird dann kodiert und als Daten-URL in ein HTML5 Audio-Element geladen, dass nativ vom Browser wiedergegeben werden kann. Auch wenn Speak.js bisher nicht auf Schnelligkeit ausgelegt ist, kann man über einen Einzeiler in JavaScript simpel Text in Sprachausgabe transformieren, nachdem man die JavaScript Bibliothek eingebunden und einen div-Tag für das Audio-Element im HTML-Markup ergänzt hat:

Speak.js in HTML einbinden

Zusätzlich ist es möglich, Optionen wie z.B. Lautstärke, Höhe, Geschwindigkeit oder Stimme für die Sprachausgabe festzulegen.

Speak.js Beispiel für zusätzliche Optionen

Speak.js unterstützt Mehrsprachigkeit. In der Online-Demo zu Speak.js kann man ausprobieren, wie sich englische und französische Texte in Sprache umwandeln lassen. Um bei eigenen Implementierungen mit Speak.js verschiedene Sprachen zu nutzen, kann man zusätzliche Sprachpakete einbinden. Speak.js kann je nach Bedarf mit oder ohne Web Worker verwendet werden.

Derzeit wird Speak.js nur von Firefox und Chrome unterstützt, da Safari, Opera und Internet Explorer bislang nichts mit Typed-Arrays anfangen können.

Was haltet ihr davon, euren Browser mit JavaScript zum Sprechen zu bekommen?

Weiterführende Links:

Bildnachweis für die Newsübersicht: aka streetfly jz / flickr.com, Lizenz: CC-BY

Bitte beachte unsere Community-Richtlinien

7 Reaktionen
Axel

Gibt es nicht mehr, Projekt und Domain leider tot :(

Monika Steinberg

@bekay Chrome hat schon eine eigene HTML5 Text-To-Speech API. Ansatz von Speak.js ist aber, eine möglichst einheitliche Lösung zu schaffen, die hoffentlich bald von allen Browsern unterstützt wird. Viele Grüße!

bekay

Mich würde viel eher interessieren, wie die von Mirko angedeutete reine HTML5-Variante des Text2Speech-Features eigentlich funktioniert? Oder hat er sich da einen Spaß erlaubt?

fimbim

Ich finds auch cool. Da fallen mir doch gleich ein paar lustige Webprojekte ein wo man das auch Spaß nutzen könnte… 

Sebastian

Menschen mit Einschränkungen haben zudem nicht immer den neusten Browser parat.
Darum "thumbs up" für die Entwicklung solcher Tools!

An der Stimme könnte man aber noch etwas schrauben. Klingt derzeit nach einem Screenreader von 2000.
cheers

begs

Genau! Stimme maryisdead hier voll zu.
Ein schönes Szenario hierfür wäre z.B. für sehbehinderte/eingeschränkte Menschen Teile einer Webseite einfach vorlesbar zu machen.
Man könnte dann z.B. in der Navigation, der Sidebar, einem Newsbereich und einzelnen Artikeln große/auffällige/kontrastreiche Buttons positionieren, die nur diese Bereiche vorlesen lassen.
Im Endeffekt so wie z.b. mit dem kostenpflichtigen Readspeaker.
Eine super Geschichte!

maryisdead

Ich glaube, bei der Geschichte geht es nicht unbedingt darum, inwieweit das Ganze sinnvoll ist, Mirko Brunner.

Zurück in dein Pessimistenloch, wo du herkommst!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst