Der Narrative Browser Mit Articulate.js

Viele Websites mit viel geschriebenem Inhalt verwenden speziell angefertigte Druck-Style-Sheets. Auf diese Weise kann ein Benutzer den relevanten Inhalt ausdrucken, ohne Papier für Navigation, Werbung oder etwas anderes zu verschwenden, das nicht relevant ist.

Articulate.js, ein jQuery-Plugin, ist meiner Meinung nach das narrative Äquivalent. Mit nur einer Codezeile ermöglicht es Entwicklern, Links zu erstellen, mit denen Benutzer klicken, sich zurücklehnen und dem Browser zuhören können, wie er den wichtigen Inhalt einer Webseite vorliest. In gewisser Weise kann es einen nachdenklichen Aufsatz oder Artikel in einen Mini-Podcast verwandeln. Und da es integrierte JavaScript-Funktionalität nutzt, sind keine Browser-Erweiterungen oder andere Systemsoftware erforderlich.

Ich dachte, ich würde teilen, wie ich Articulate.js erstellt habe, in der Hoffnung, dass es dem Leser Ideen liefert, wie diese Technologie auf verschiedene Weise angewendet werden kann.

Die Sprachausgabe-Schnittstelle

Articulate.js verwendet die Speech Synthesis-Schnittstelle der Web Speech API. Sie wird derzeit in allen gängigen Browsern unterstützt, einschließlich der neuesten Versionen von Edge, Safari, Chrome, Opera, Firefox, iOS Safari und Chrome für Android.

Es gibt zwei window-Objekte der Speech Synthesis-Schnittstelle, die verwendet werden, um den Browser zum Sprechen zu bringen: SpeechSynthesis und SpeechSynthesisUtterance. Der erste Schritt besteht darin, eine Instanz des SpeechSynthesisUtterance-Objekts zu erstellen und den gewünschten Text festzulegen. Wenn gewünscht, können Sie zusätzliche Eigenschaften wie Geschwindigkeit, Tonhöhe, Lautstärke und Stimme festlegen.

Um mit dem Sprechen zu beginnen, wird dieses Objekt als Parameter an die SpeechSynthesis.speak()-Methode übergeben. Andere Wiedergabefunktionen wie Pausieren, Fortsetzen und Abbrechen sind alles Methoden des SpeechSynthesis-Objekts. Eine nützliche Demo von Microsoft ermöglicht es Ihnen, mit diesen Funktionen zu experimentieren.

Am Ende dieses Artikels sind viele Ressourcen aufgeführt, die Sie durch die Feinheiten dieser Funktionalität führen und zusätzliche Beispiele liefern.

Erste Schritte

Das leichtgewichtige Articulate.js-Plugin ermöglicht es Ihnen, die leistungsstarken Selektoroptionen von jQuery zu nutzen, um anzugeben, welche Teile der Website gesprochen werden sollen. Zum Beispiel kann, je nachdem, wie die Seite aufgebaut ist, eine einzige Codezeile wie die folgende den Browser anweisen, den gesamten Inhalt eines Artikels oder Blogbeitrags zu sprechen.

$('article').articulate('speak');

Hier ist ein Beispiel, das sich nur auf die primären Überschriften und Absätze konzentriert

$('h1, h2, p').articulate('speak');

Intern klont Articulate.js die übereinstimmenden Elemente und alle ihre untergeordneten Elemente und Textknoten. Anschließend wird dieser Klon anhand einer Standardregelmenge analysiert, die entscheidet, was gesprochen und was ignoriert werden soll, und dann die entsprechenden Pausen hinzufügt, damit alles narrationärer klingt.

Dies sind die grundlegenden Methoden zusammen mit einem CodePen-Beispiel

Funktion	Beschreibung
$(selector).articulate('speak');	Spricht die angegebenen DOM-Elemente und ihre Nachkommen laut aus
$().articulate('pause');	Pausiert das Sprechen
$().articulate('resume');	Setzt das Sprechen nach einer Pause fort
$().articulate('stop');	Stoppt das Sprechen dauerhaft

Siehe den Pen Articulate: Basic Functions von Adam Coti (@adamcoti) auf CodePen.

Sie können nur eine SpeechSynthesisUtterance-Instanz gleichzeitig aktiv haben, weshalb für das Pausieren, Fortsetzen oder Stoppen kein jQuery-Selektor benötigt wird. Wie bereits erwähnt, wirken sich diese Methoden auf das SpeechSynthesis-Objekt aus.

Außerdem stoppt der Browser das Sprechen erst, wenn kein Text mehr zum Lesen vorhanden ist oder ein "Stop"-Aufruf ausgeführt wird. Wenn das Sprechen pausiert wird, muss es fortgesetzt oder gestoppt werden, bevor etwas anderes gesprochen werden kann.

Die Anpassung von Geschwindigkeit, Tonhöhe und Lautstärke ist möglich. Durch die Verwendung eines Schiebereglers können Anpassungen dem Benutzer zusätzliche Kontrolle bieten. Während die Standardgeschwindigkeit des Systems 1 beträgt, habe ich sie nach ausgiebigen Tests leicht auf 1,1 erhöht, da dies eine natürlichere Sprechgeschwindigkeit zu bieten schien. Das ist natürlich subjektiv und kann überschrieben werden.

Funktion	Beschreibung
$().articulate('rate',num);	Stellt die Geschwindigkeit der sprechenden Stimme ein Standard = 1.1 Bereich = [0.1 – 10]
$().articulate('pitch',num);	Stellt die Tonhöhe der sprechenden Stimme ein Standard = 1.0 Bereich = [0 – 2]
$().articulate('volume',num);	Stellt die Lautstärke der sprechenden Stimme ein Standard = 1.0 Bereich = [0 – 1]

Siehe den Pen Articulate : Voice Parameters von Adam Coti (@adamcoti) auf CodePen.

Es gibt viele weitere Optionen für Entwickler, aber lassen Sie uns kurz darüber sprechen, was unter der Haube passiert, wenn Articulate.js gebeten wird, etwas auf der Seite zu sprechen.

Der Articulate.js-Algorithmus

Die Speech Synthesis-Schnittstelle, die Articulate.js nutzt, liest jeden Textstring, den sie erhält, auf sehr buchstäbliche Weise vor. Einige Symbole werden ausgesprochen (z. B. wird „Prozent“ gesagt, wenn „%“ angetroffen wird), andere werden ignoriert (z. B. wird das Anführungszeichen nicht gesprochen). Sein Takt wird hauptsächlich durch Kommas bestimmt, die eine kleine Pause verursachen, und durch Punkte, deren Pause etwas länger ist.

In diesem Sinne ist eine Menge Manipulation erforderlich, um eine Webseite für die Sprachausgabe vorzubereiten. Leider kann man nicht einfach alle ausgewählten Textknoten im DOM verketten, da dies zu viel Fließtext ergeben würde (z. B. Listen), Inhalte einschließen, die nicht auf kohärente Weise zum Vorlesen geeignet sind (z. B. Tabellen) und Elemente ignorieren, die beschrieben werden sollten (z. B. Bilder).

Articulate.js handhabt dies, indem es unter anderem die folgenden Regeln auf die im jQuery-Selektor angegebenen DOM-Elemente anwendet

• Entfernt HTML-Tags, die Textknoten enthalten können, aber nicht vorgelesen werden sollten, wie z. B. <form> und <s>. Eine Liste von 21 Tags ist standardmäßig zum Ignorieren vorgesehen.
• Findet Instanzen von <h1> bis <h6>, <li> und <br>-Tags und hängt an jeden entweder einen Punkt oder ein Komma an. Dies dient dazu, sicherzustellen, dass beim Sprechen eine Pause eingelegt wird, da diese Elemente oft visuell ohne Interpunktion dargestellt werden.
• Fügt beschreibenden Text ein, der aus den alt-Attributen von Bildern, <caption>-Tags von Tabellen und <figcaption>-Tags von Abbildungen gesammelt wird.

Nachdem dies abgeschlossen ist, wird das Verbleibende in einen langen Textstring umgewandelt, der nun weiterer Manipulation bedarf, einschließlich

• Findet <q>-Tags und Paare von intelligenten Anführungszeichen und fügt den Text „Zitat“ am Anfang und „Zitatende“ am Ende ein, um sie beim Sprechen zu unterscheiden.
• Fügt Start- und Endtext hinzu, um Listen und Blockzitate zu kennzeichnen.
• Findet Gedankenstriche und fügt an deren Stelle ein Komma ein, um eine kurze Pause zu bewirken.
• Entfernt verbleibende HTML-Tags und Kommentare.
• Entfernt verbleibende Zeilenumbrüche und Wagenrückläufe sowie übrig gebliebene HTML-Sonderzeichen.

An diesem Punkt ist der Textstring bereit, an die Speech Synthesis-Schnittstelle gesendet zu werden, um vom Browser gesprochen zu werden. Wenn Sie sich diesen String ansehen würden, würden Sie Instanzen von mehreren Punkten, Kommas und Leerzeichen sehen – das ist in Ordnung – da dies keinen Einfluss darauf hat, wie es klingt. Das heißt, ein oder mehrere zusammen gruppierte Kommas oder Punkte erzeugen keine noch längeren Pausen.

Anpassung

Durch die Verwendung von JavaScript und HTML-Datenattributen kann Articulate.js angepasst werden, um das Benutzererlebnis zu optimieren. Wie die folgenden CodePens zeigen, können Sie

• HTML-Tags angeben, die gesprochen werden sollen, obwohl sie sonst ignoriert würden, und umgekehrt.
• Eine Suche und Ersetzung im Text durchführen, was für Abkürzungen hilfreich ist. Sie können zum Beispiel angeben, dass alle Instanzen von „d. h.“ als „das heißt“ gesprochen werden sollen.
• Textblöcke angeben, die ignoriert werden sollen. Zum Beispiel muss ein Satz, der lautet „klicken Sie hier für weitere Informationen“, nicht gesprochen werden.
• Wörter angeben, die buchstabiert werden sollen.
• Text in speziell erstellten Kommentar-Tags angeben, der gesprochen werden soll und der ansonsten auf dem Bildschirm verborgen ist.

Siehe den Pen Articulate: Text Manipulation von Adam Coti (@adamcoti) auf CodePen.

Siehe den Pen Articulate: HTML Data Attributes von Adam Coti (@adamcoti) auf CodePen.

Browserkonsistenz

Sie werden feststellen, dass die Speech Synthesis-Schnittstelle zwischen Browsern und Betriebssystemen geringfügig unterschiedlich ist. So klingt beispielsweise die Standard-Sprechgeschwindigkeit auf einem iPhone etwas schneller als auf den Desktop-Implementierungen. Entwickler können Eingaberegler oder Radiobuttons bereitstellen, damit Benutzer ihre Erfahrung feinabstimmen können.

Darüber hinaus stellen Browser je nach Betriebssystem und Gerät unterschiedliche Stimmen für die Speech Synthesis-Schnittstelle zur Verfügung. Wie in der zuvor erwähnten Demo von Microsoft gezeigt, können diese Stimmen ausgewählt werden, um die standardmäßige „native“ Stimme zu überschreiben. Aus Gründen der Einfachheit verwendet Articulate.js jedoch nur die Standardstimme – spätere Versionen werden es ermöglichen, auch diesen Parameter zu ändern.

Einige abschließende Gedanken

Die Inspiration für Articulate.js kam aus der Idee, dass ich mit einem einfachen Klick Artikel genießen kann, wenn es nicht praktisch oder wünschenswert ist, auf einen Bildschirm zu starren – insbesondere wenn ich mein Handy benutze. Vielleicht im Park liegend mit geschlossenen Augen oder während ich mit dem Kochen beschäftigt bin. Das Ziel war es, Entwicklern zu ermöglichen, die entsprechenden Anpassungen vorzunehmen, damit es weniger wie ein Screenreader und mehr wie ein Freund klingt, der Ihnen die Webseite vorliest.

Articulate.js kann als Sprachoption für alles auf der Webseite verwendet werden, von der Aussprache eines einzelnen Wortes bis zur Vermittlung von Inhalten, die nicht auf dem Bildschirm angezeigt werden. Wenn Sie interessiert sind, laden Sie den Quellcode herunter und experimentieren Sie. Und vor allem: Viel Spaß damit!

Download und Dokumentation

Der kommentierte Quellcode und minimierte Versionen von Articulate.js können von seiner Github-Homepage heruntergeladen werden. Eine vollständige Dokumentation finden Sie ebenfalls dort.

Ressourcen

• Kann ich die SpeechSynthesis-Schnittstelle verwenden
• W3C: Die SpeechSynthesis-Schnittstelle
• Web Apps, die sprechen – Einführung in die Speech Synthesis API
• Einführung in die Speech Synthesis API in Microsoft Edge
• Mozilla Developer Network: Verwenden der Web Speech API