domingo, 11 de agosto de 2024

Sincronización de Texto y Audio con Superposiciones Multimedia

Una de las principales novedades de EPUB 3 es la capacidad de vincular una grabación de audio con el texto y mantener ambos sincronizados. Se pueden resaltar elementos a nivel de palabra, oración, párrafo y página mientras se escucha el audio correspondiente. Varios minoristas llaman a esta función “Leer y Escuchar” o “Léeme”, y se ha utilizado ampliamente en libros ilustrados para niños con diseño de maquetación fija. Actualmente, algunos sistemas de lectura soportan esta función solo para maquetación fija, aunque el concepto debería aplicarse a todos los libros.

EPUB 3 permite esta sincronización a través de las superposiciones multimedia, que es un subconjunto del estándar SMIL (lenguaje de integración multimedia sincronizada) preexistente. Básicamente, un archivo XML (utilizando el vocabulario SMIL) contiene un puntero a cada elemento de texto en el documento y lo empareja con los tiempos de inicio y fin del archivo de audio que se refiere a ese texto:

```xml

<par id="para1">

    <text src="chapter_002.xhtml#c002p0001"/>

    <audio src="mobydick.mp3" clipBegin="0:14:48" clipEnd="0:15:13"/>

</par>

```

En este caso, el elemento `<par>` agrupa una referencia de texto (a un párrafo específico en el capítulo 2) con una referencia de audio (los 25 segundos de sonido que comienzan a las 14:48 en un archivo MP3 específico). En este caso, estamos sincronizando solo a nivel de párrafo, pero es posible apuntar a cada palabra del texto. En ese caso, el segmento de audio que se identifica puede durar menos de un segundo.

El desafío está en crear este archivo SMIL. Necesitas saber exactamente cuándo comienza y termina el audio para cada elemento. Es posible hacerlo a mano, pero cualquier flujo de trabajo de producción realista necesitaría una solución automatizada para generar esta información. Y, por supuesto, necesitas XHTML; esto no se puede hacer con publicaciones de maquetación fija basadas en imágenes.

El Archivo SMIL

A continuación, un ejemplo de un archivo SMIL, que corresponde a una sola página de un libro ilustrado para niños:

```xml

<?xml version="1.0" encoding="UTF-8"?>

<smil xmlns="http://www.w3.org/ns/SMIL"

      xmlns:epub="http://www.idpf.org/2007/ops" version="3.0">

    <body>

        <par id="id-008">

            <text src="../page_009.html#span9line1"/>

            <audio clipBegin="0:00:00.000" clipEnd="0:00:01.0" src="../audio/page009.m4a"/>

        </par>

        <par id="id-009">

            <text src="../page_009.html#span9line2"/>

            <audio clipBegin="0:00:01.0" clipEnd="0:00:02.4" src="../audio/page009.m4a"/>

        </par>

    </body>

</smil>

```

En este caso, cada página tiene un archivo de audio separado, por lo que la línea 1 del texto se escucha de 0.0 segundos a 1.0 segundos, y la línea 2 se escucha de 1.0 segundos a 2.4 segundos. El archivo de contenido correspondiente se ve así:

El Archivo de Contenido

```xml

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:epub="http://www.idpf.org/2007/ops">

    <head>

        <meta name="viewport" content="width=600, height=600"/>

        <meta charset="utf-8"/>

        <title>The Earth Book</title>

        <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>

    </head>

    <body>

        <div class="page009">

            <img src="images/009.png" alt="Familia de búhos en un árbol"/>

            <p class="page9line1"><span id="span9line1">y quiero que los búhos</span></p>

            <p class="page9line2"><span id="span9line2">tengan un lugar donde vivir</span></p>

        </div>

    </body>

</html>

```

Nota cómo el elemento de texto en el archivo SMIL apunta a una línea en el archivo de contenido, y el elemento de audio apunta al audio correspondiente.

El Archivo de Paquete: Metadatos de Superposición Multimedia

Las superposiciones multimedia requieren una codificación especial en el archivo de paquete EPUB 3. Primero, debes asociar el archivo SMIL con el archivo de contenido XHTML correspondiente:

```xml

<item id="pg009" href="page_009.html" mediatype="application/xhtml+xml" media-overlay="page_009-overlay"/>

```

En segundo lugar, debes listar el archivo SMIL en sí:

```xml

<item id="page_009-overlay" href="smil/page_009.smil" mediatype="application/smil+xml"/>

```

Nota cómo el atributo `media-overlay` en el elemento de contenido apunta al ID del archivo SMIL.

Finalmente, hay metadatos para las superposiciones multimedia en sí:

```xml

<meta property="media:duration" refines="#page_009-overlay">0:00:02.4</meta>

<meta property="media:duration">0:23:46</meta>

```

Necesitas listar la duración de cada archivo SMIL, así como el total para todos los archivos SMIL.

Resaltado del Texto: Superposiciones Multimedia y CSS

Finalmente, necesitamos resaltar el texto que corresponde al audio. Esto se hace en el CSS:

```css

.-epub-media-overlay-active {

    background-color: #abc;

}

```

Nota que puedes usar cualquier nombre de clase para esta propiedad, pero debes declarar el nombre en el archivo de paquete:

```xml

<meta property="media:active-class">-epub-media-overlay-active</meta>

```

¡Son muchos elementos en movimiento!

No hay comentarios:

Publicar un comentario