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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

14 Kommentare
maryisdead
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!

Antworten
begs
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!

Antworten
Sebastian
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

Antworten
fimbim

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

Antworten
bekay
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?

Antworten
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!

Antworten
Axel
Axel

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung