Ein Online-Player für barrierefreien Buchgenuss

Projektdauer
Anfang 2021 – August 2022
Technologien & Lösungen
React/TypeScript, Styling mit Tailwind, epub.js, HTML Audio API
Themen
react, tailwind, epup.js
Referenz Buchgenuss
Mit dem neuen Online Player, den die Schweizerische Bibliothek für Blinde, Seh- und Lesebehinderte (SBS) gemeinsam mit Puzzle ITC entwickelte, können Kundinnen und Kunden Hörbücher und E-Books barrierefrei geniessen.
3
unterschiedliche Text-to-Speech Stimmen
60'000
unterschiedliche Hörbücher
10'000
E-Books, die vorgelesen werden
93
Prozent automatisierte Testabdeckung des Programmcodes

Seit über 100 Jahren setzt sich die SBS dafür ein, dass blinde, seh- und lesebehinderte Menschen Zugang zu Büchern und Lehrmitteln haben. Dies tut sie einerseits mit den Bibliotheken in Zürich und Collombey (VS) und andererseits mit der hauseigenen Produktion. Sie macht Bücher, Musiknoten, Filme und Spiele für blinde, seh- und lesebehinderte Menschen zugänglich.

Die SBS macht Bücher, Musiknoten, Filme und Spiele für blinde, seh- und lesebehinderte Menschen zugänglich. Bisher umfasste der digitale Player der SBS diverse Medien, welche nur Daisy Hörbücher (ohne Textanzeige) mit dem Online-Player-Legacy einer Drittfirma abspielen konnte. Aufgrund der verschiedenen Bedürfnisse der Menschen entschied sich die SBS, den Player gemeinsam mit Puzzle von Grund auf neu zu entwickeln.

Barrierefreier Lesegenuss

Ziel des Projekts war es, klassische E-Books in der Online-Bibliothek anzuzeigen und mit Text-to-Speech abspielen zu können. Gemeinsam mit dem SBS erarbeiteten verschiedene Puzzle Entwickler den neuen Player basierend auf einem React/TypeScript. Die URL zum ePUB File (geserved vom SBS-eigenen Buch Service) wird per url Query Param angegeben und vom Client gefetched. Zudem wird das Text-to-Speech Audio Satz für Satz vom TTS Service geladen und durch diesen on-demand generiert (inkl. Prefetching, mit Polling Mechanismus).

Folgende Features wurden im neuen Player umgesetzt:

  • Unterstützung von ePUBs mit Media Overlays (inkl. Audio)
  • Text-to-Speech (TTS) für reine Textbücher
  • Abspielen der integrierten Audiospur
  • Highlighting der Textstellen, synchronisiert mit Audio
  • Navigation in den Inhalten
  • Optimierte Anzeige: Anpassung Schriftart, Schriftgrösse, Kontrast, focused Reading durch Abdecken von Inhalten etc.
  • Keyboard-only Bedienung möglich
  • Bedienung mit Braillezeile (Ausgabegerät für Darstellung von Brailleschrift)
  • Lesezeichen
Michi Zaugg
Leiter Informatik SBS
«Wir waren auf der Suche nach einem Open Source Partner mit viel Erfahrung und wurden fündig. Mit einem hervorragenden Teamgeist und der Professionalität wurde das Projekt wie gewünscht umgesetzt.»

Optimierungen per Januar 2024

  • Die Mary TTS-Engine wurde mit dem TTS Engine von Cereproc ausgewechselt. Dadurch wird eine verbesserte Sprachqualität erzielt. Dabei wurde auch gleich die Sicherheit des TTS-Servers erhöht.
  • Implementierung von Text-Hörbüchern: Bisher war es möglich, Hörbücher (Audiodateien) anzuhören oder Ebooks (EPUB Format) zu lesen und mithilfe der TTS-Engine vorlesen zu lassen. Neu können professionell aufgenommene Hörbücher von einer menschlichen Stimme vorgelesen und gleichzeitig den Text mit der exakten Leseposition angezeigt werden. Dabei wird das aktuell vorgelesene Wort farbig markiert, sodass Lesende dem Hörtext einfacher visuell folgen können. Dieses Format ist in der SBS Onlinebibliothek als Text-Hörbücher verfügbar.
  • Einstellungsmöglichkeiten & kleinere Optimierungen: In der neusten Version wurden zusätzliche Navigationsarten eingebaut und viele kleine Optimierung vorgenommen, die die Nutzung des Online Players noch komfortabler machen.
  • Ent-to-End Testabeckung: Die automatisierten Tests wurden erhöht. Somit wird sichergestellt, dass bei Anpassungen an der Software der gesamte Workflow von der Eingabe bis zur Ausgabe automatisiert geprüft und validiert wird.
Projektbausteine

Diese Technologien & Tools kamen zum Einsatz

HTML
React
Tailwind
Typescript

Dürfen wir dein Projekt auf das nächste Level bringen?

Wir sind bereit, dein Projekt voranzutreiben. Lass uns gemeinsam deine Ziele erreichen und dein Unternehmen weiterbringen.
Baldinger_Joel
Joel Baldinger
Co-Lead Mobility

Weitere Success Stories