El reproductor de código abierto para novelas gráficas interactivas

Un solo reproductor muestra cada obra de PanelWave: en la vista previa del estudio, en el lector público y en tu propio sitio. Vista de página y de viñeta, vídeo, sonido, idiomas en directo, elecciones y accesibilidad, con licencia MIT.

Ver en GitHub

Fig. R — Leer una obra de PanelWaveSin app: se abre en el navegador. Por páginas o por viñetas, a tu ritmo, en tu idioma, con o sin sonido.

EspecificacionesDiseñado para obras reales

licencia: MIT
límite gzip (CI): ≤180 KB
versiones de Angular: 20–22
última en npm: 1.2

Tres vistas

Vista de viñeta con transiciones, vista de página por formato de salida y vista de lienzo con desplazamiento y zoom de cámara.

Navegación por grafo

Condiciones JSON Logic, prioridades de las conexiones, historial de atrás/adelante que restaura el estado y un botón de elecciones.

Variables y variantes

Cinco ámbitos, valores de solo lectura que aporta tu sitio, variantes de viñeta condicionales: gana la primera que coincide.

Viñetas de vídeo

Modos de reproducción y de inicio, un solo vídeo activo a la vez, reproducción secuencial en la vista de página.

Motor de audio

Un mezclador WebAudio con buses de ambiente, música, voz en off y efectos de sonido; quien lee puede activar o desactivar el audio, los efectos y la voz.

Idiomas en directo

Cambia de idioma sin recargar, con cadenas de reserva y recursos por idioma. Interfaz del reproductor en inglés y alemán.

Rotulación de cómic

El mismo motor de bocadillos SVG que el estudio: diez tipos de bocadillo, texto real, reajustado para cada idioma.

Muro de pago

Reglas por obra, capítulo, viñeta o extras, vistas previas gratuitas, controles de edad: el reproductor emite eventos y tu sitio gestiona el pago.

Accesible

Control por teclado, etiquetas ARIA, regiones dinámicas, gestión del foco, movimiento reducido; comprobaciones automáticas con axe en CI.

Medición de audiencia

Medición de eventos con consentimiento y lista blanca: vistas de viñeta, elecciones, clics en zonas interactivas, lecturas completadas.

Capas de plugins

Capas de plugins en iframes aislados, con un bus de mensajes que comprueba el origen.

Ligero

Un tamaño máximo de 180 KB con gzip, vigilado en CI, imágenes adaptables y precarga de lo que viene.

IntegraciónDos formas de integrarlo

Intégralo en minutos

En una app de Angular o en cualquier sitio web

Angular: la biblioteca de npm

Instala el paquete y añade el componente contenedor.

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>

Cualquier sitio web: el iframe del lector

Publica desde el estudio y pega el código de inserción que genera.

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>

Por ahora la biblioteca solo funciona con Angular; todavía no hay una etiqueta script lista para usar ni un web component. Algunas funciones del lector ya están en read.panelwave.org y llegarán a npm con la próxima versión del reproductor.

Fig. 7Aloja por tu cuenta una obra completa

Fig. 7 — Formato abierto y reproductorFormato CC BY 4.0, reproductor MIT. Publica con nosotros o descarga el archivo de la obra y alójalo por tu cuenta.

Un archivo de obra se reproduce desde cualquier alojamiento estático

Las URL de los recursos de un archivo exportado son relativas al manifiesto: descomprímelo junto al reproductor y listo. Sin lógica de servidor, sin ataduras a ningún proveedor.

MITPlayer · SDKCC BY 4.0Formato

Da vida a la novela gráfica en tu web.

Código abierto, con licencia MIT, y el mismo reproductor que usa PanelWave.

Ver en GitHub Lee la especificación del formato