Le lecteur open source des romans graphiques interactifs

Un seul lecteur affiche toutes les œuvres PanelWave : dans l’aperçu du studio, sur le lecteur public et sur votre propre site. Vue page et vue case, vidéo, son, changement de langue à la volée, choix et accessibilité — sous licence MIT.

Voir sur GitHub

Fig. R — Lire une œuvre PanelWavePas d’appli : tout s’ouvre dans le navigateur. Vue page ou vue case, à votre rythme, dans votre langue, avec ou sans son.

CaractéristiquesConçu pour de vraies œuvres

licence: MIT
budget gzip (CI): ≤180 KB
versions d’Angular: 20–22
dernière version sur npm: 1.2

Trois vues

Vue case avec transitions, vue page par format de sortie, et vue canevas avec panoramique et zoom de caméra.

Navigation par graphe

Conditions JSON Logic, priorités des liens, historique précédent/suivant qui restaure l’état, et un bouton Choix.

Variables et variantes

Cinq portées, des valeurs en lecture seule fournies par votre site, des variantes de case conditionnelles — la première qui correspond l’emporte.

Cases vidéo

Modes de lecture et de démarrage, une seule vidéo active à la fois, lecture séquentielle en vue page.

Moteur audio

Un mixeur WebAudio avec des bus ambiance, musique, voix off et effets sonores ; votre public peut couper ou activer le son, les effets et la voix.

Langues à la volée

Changement de langue sans rechargement, chaînes de repli, médias par langue. Interface du lecteur en anglais et en allemand.

Lettrage BD

Le même moteur de bulles SVG que le studio — dix types de bulles, du vrai texte, réajusté pour chaque langue.

Événements de paywall

Règles par œuvre, chapitre, case ou bonus, aperçus gratuits, contrôles d’âge — le lecteur émet des événements, votre site gère le paiement.

Accessible

Contrôle au clavier, libellés ARIA, régions live, gestion du focus, animations réduites ; audits axe automatisés dans la CI.

Mesure d’audience

Des événements filtrés par liste blanche, qui respectent le consentement : cases vues, choix, clics sur les zones interactives, lecture terminée.

Couches de plugins

Des couches de plugins en iframe isolée, avec un bus de messages qui vérifie l’origine.

Léger

Un bundle plafonné à 180 Ko gzippés, contrôlé par la CI ; des images responsives et un préchargement anticipé.

IntégrationDeux façons de l’intégrer

En place en quelques minutes

Dans une application Angular — ou sur n’importe quel site

Angular : la bibliothèque npm

Installez le paquet et ajoutez le composant shell.

npm

npm install @panelwave/player @ngx-translate/core

<pw-player-shell
  [manifestUrl]="'assets/my-story/panelwave.json'"
  [showToolbar]="true"
  (panelChange)="onPanel($event)">
</pw-player-shell>

Tout autre site : l’iframe du lecteur public

Publiez depuis le studio et collez le code d’intégration qu’il génère.

html

<iframe
  src="https://read.panelwave.org/your-team/your-work?embed=1"
  width="800" height="600" allow="fullscreen"
  style="border:0;max-width:100%" loading="lazy"
  title="Your work title"></iframe>

Pour l’instant, la bibliothèque est réservée à Angular : pas encore de balise script prête à l’emploi ni de web component. Certaines fonctionnalités de lecture tournent déjà sur read.panelwave.org ; elles arriveront sur npm avec la prochaine version du lecteur.

Fig. 7Auto-héberger une œuvre entière

Fig. 7 — Format ouvert et lecteurFormat sous CC BY 4.0, lecteur sous MIT. Publiez chez nous — ou téléchargez l’archive de l’œuvre et auto-hébergez-la.

Une archive d’œuvre se lit sur n’importe quel hébergement statique

Dans une archive exportée, les URL des médias sont relatives au manifeste — décompressez-la à côté du lecteur, c’est prêt. Ni logique serveur, ni enfermement propriétaire.

MITLecteur · SDKCC BY 4.0Format

Donnez vie aux romans graphiques sur votre site.

Open source, sous licence MIT — et c’est le lecteur qu’utilise PanelWave lui-même.

Voir sur GitHub Lire la spécification du format