Cómo visualizar la transcripción temporizada junto con el audio reproducido

La transcripción de audio es la versión de texto del discurso, útil para proporcionar materiales útiles como conferencias grabadas, seminarios, etc. para personas con problemas de audición. También se utilizan para mantener registros textuales de eventos como entrevistas, audiencias judiciales y reuniones.

El audio del habla en las páginas web (como en los podcasts) suele ir acompañado de transcripciones, en beneficio de las personas con problemas de audición o que no pueden escuchar en absoluto. Ellos pueden ver el texto "jugando" junto al audio. La mejor manera de crear una transcripción de audio es mediante la interpretación y grabación manual..

En este post, vamos a ver cómo mostrar una transcripción de audio en ejecución junto con el audio. Para empezar necesitamos tener la transcripción lista. Para esta publicación, he descargado una muestra de audio y su transcripción de Voxtab.

Yo uso HTML ul Lista para mostrar los diálogos en una página web como a continuación:

  Justin: Lo que estoy tratando de decir es que la apelación y el acuerdo son separados.
 Alistair: Quiere decir que las comunicaciones y los anuncios internos y externos se incluirán en el proceso de apelación..
 Justin: Correcto, porque se conectan a la apelación..
...

A continuación, quiero que todo el texto disponible esté borroso y Desenfocar solo el diálogo que coincidirá con la voz actual que se está reproduciendo en la grabación de audio.. Por lo tanto, para desbloquear los diálogos utilizo el filtro CSS "desenfoque".

#transcript> li -webkit-filter: blur (3px) filter: blur (3px); transición: todo .8s facilidad; ...

Para IE 10+ puedes agregar sombra de texto para crear un efecto borroso. Puede usar este código para detectar si el desenfoque de CSS se ha aplicado o no, y para cargar su hoja de estilo específica de IE. Una vez que el texto está borroso, seguí adelante y agregué un poco de estilo a la transcripción..

 if (getComputedStyle (dialogues [0]). webkitFilter === undefined && getComputedStyle (dialogues [0]). filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ('enlazar'); linkEle.type = 'text / css'; linkEle.rel = 'hoja de estilo'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Ahora, vamos a añadir el audio a la página, con este.

los ontimeupdate evento de la audio elemento se dispara cada vez que su tiempo actual se actualiza, por lo que usaremos ese evento para verificar el tiempo de ejecución actual del audio y resaltar el diálogo correspondiente en la transcripción. Primero creamos algunas variables globales que necesitaremos.

Tiempos de diálogo = [0,4,9,11,18,24,29,31,44,45,47]; dialogues = document.querySelectorAll ('# transcript> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); previousDialogueTime = -1;

tiempo de diálogo es una matriz de números que representan los segundos cuando comienza cada diálogo en la transcripción. El primer diálogo comienza en 0s, segundo en 4s, y así sucesivamente. previoDialogueTime Se utilizará para realizar un seguimiento de los cambios de diálogo.

Vamos a pasar finalmente a la función enganchada a ontimeupdate, que se llama "playTranscript". Ya que playTranscript se dispara casi cada segundo que se reproduce el audio, primero debemos identificar qué diálogo se está reproduciendo actualmente. Supongamos que el audio es a las 0:14, luego se reproduce el diálogo que comenzó a las 0:11 (consulte la tiempo de diálogo matriz), si la hora actual es 0:30 en el audio, entonces es el diálogo que comenzó a las 0:29.

Por lo tanto, para averiguar cuándo comenzó el diálogo actual, primero filtramos todos los tiempos en el tiempo de diálogo array que están por debajo de la hora actual del audio. Si la hora actual es 0:14, filtraremos todos los números. en la matriz que están debajo de 14 (que son 0, 4, 9 y 11) y encuentre el máximo no. de esos, que es 11 (por lo tanto, el diálogo comenzó a las 0:11).

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (function (v) return v <= audio.currentTime));

Una vez el currentDialogueTime se calcula, comprobamos si es lo mismo que el previoDialogueTime(es decir, si el diálogo en el audio ha cambiado o no), si no es una coincidencia (es decir, si el diálogo ha cambiado), entonces currentDialogueTime se asigna a previoDialogueTime.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (function (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;

Ahora vamos a usar el índice de currentDialogueTime en el tiempo de diálogo matriz para averiguar qué diálogo en la lista de diálogos de transcripción debe resaltarse. Por ejemplo, si el currentDialogueTime es 11, luego el índice de 11 en el tiempo de diálogo array es 3, lo que significa que tenemos que resaltar el diálogo en el índice 3 en el diálogos formación.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (function (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];

Una vez que hemos encontrado el diálogo a resaltar (ese es el dialogo actual), nos desplazamos transcriptWrapper (si es desplazable) hasta dialogo actual está 50px debajo de la parte superior del envoltorio, luego encontramos el diálogo resaltado anteriormente y eliminamos la clase Hablando de ello y añádelo a dialogo actual.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (function (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)]; transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50; var previousDialogue = document.getElementsByClassName('speaking')[0]; if(previousDialogue !== undefined) previousDialogue.className = previousDialogue.className.replace('speaking',"); currentDialogue.className +=' speaking';

El elemento con clase. Hablando mostrará el texto sin borrar.

.hablando -webkit-filter: blur (0px) filtro: blur (0px);

Y eso es todo, aquí está el código completo HTML y el código JS.

  Justin: Lo que estoy tratando de decir es que la apelación y el acuerdo son separados.
 Alistair: Quiere decir que las comunicaciones y los anuncios internos y externos se incluirán en el proceso de apelación..
 Justin: Correcto, porque se conectan a la apelación..
...

Manifestación

Echa un vistazo a la demostración a continuación para tener una idea de cómo funciona cuando todos los códigos se juntan.