Cómo mostrar la transcripción programada 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 los audiblemente desafiados. También se usan 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, para el beneficio de las personas con problemas de audición o que no pueden oír. Pueden ver el texto "jugando" junto con el audio . La mejor forma de crear una transcripción de audio es mediante interpretación manual y grabación.

En esta publicación, vamos a ver cómo mostrar una transcripción de audio en ejecución junto con el audio . Para comenzar, necesitamos tener la transcripción lista. Para esta publicación, descargué una muestra de audio y su transcripción de voxtab .

Uso HTML ul list 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 están 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 con la apelación.
...

A continuación, quiero que todo el texto disponible esté borroso y para desdibujar solo el diálogo que coincidirá con la voz actual que está siendo reproducida por la grabación de audio . Entonces, para desdibujar los diálogos, uso el filtro CSS "blur".

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

Para IE 10+ puede agregar text-shadow para crear un efecto borroso. Puede usar este código para detectar si se ha aplicado o no el desenfoque de CSS, y para cargar su hoja de estilo específica de IE. Una vez que el texto está borroso, continué 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, agreguemos el audio a la página, con esto.

El evento ontimeupdate del elemento de audio ontimeupdate cada vez que se actualiza su currentTime, 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 creemos algunas variables globales que necesitaremos.

 dialogueTimings = [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; 

dialogueTimings es una matriz de números que representa los segundos cuando comienza cada diálogo en la transcripción. El primer diálogo comienza en 0s, segundo en 4s, y así sucesivamente. previousDialogueTime se usará para rastrear los cambios de diálogo.

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

Por lo tanto, para saber cuándo comenzó el diálogo actual, primero filtramos todas las veces en el conjunto de diagramas de dialogueTimings que están debajo del tiempo actual del audio. Si la hora actual es 0:14 filtramos todos los nep. en la matriz que están por debajo de 14 (que son 0, 4, 9 y 11) y descubre el máximo no. de ellos, que es 11 (por lo tanto, el diálogo comenzó a las 0:11).

 function playTranscript () {var currentDialogueTime = Math.max.apply (Matemáticas, dialogueTimings.filter (función (v) {return v <= audio.currentTime})); } 

Una vez que se calcula el tiempo de currentDialogueTime, verificamos si es el mismo que el tiempo de diálogo previousDialogueTime (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 se asigna el currentDialogueTime a previousDialogueTime .

 function playTranscript () {var currentDialogueTime = Math.max.apply (Matemáticas, dialogueTimings.filter (función (v) {return v <= audio.currentTime})); if (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; }} 

Ahora usemos el índice del currentDialogueTime en la matriz dialogueTimings para averiguar qué diálogo de la lista de diálogos de transcripción debe resaltarse. Por ejemplo, si el currentDialogueTime es 11, entonces el índice de 11 en la matriz currentDialogueTime es 3, lo que significa que tenemos que resaltar el diálogo en el índice 3 en la matriz de dialogues .

 function playTranscript () {var currentDialogueTime = Math.max.apply (Matemáticas, dialogueTimings.filter (función (v) {return v <= audio.currentTime})); if (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues [dialogueTimings.indexOf (currentDialogueTime)]; }} 

Una vez que hemos encontrado el diálogo para resaltar (que es el currentDialogue ), desplazamos transcriptWrapper (si se puede desplazar) hasta currentDialogue 50px debajo de la parte superior de la envoltura, luego encontramos el diálogo resaltado previamente y eliminamos la clase que speaking de él y lo agregamos al currentDialogue .

 function playTranscript () {var currentDialogueTime = Math.max.apply (Matemáticas, dialogueTimings.filter (función (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 que speaking mostrará texto no difuminado.

 .speaking {-webkit-filter: blur (0px) filter: blur (0px); } 

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

Justin : Lo que estoy tratando de decir es que la apelación y el acuerdo están 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 con la apelación.
...

Manifestación

Consulte la demostración a continuación para tener una idea de cómo funciona cuando se combinan todos los códigos.

Live Test Fonts en el navegador fácilmente con Font Dragr

La tipografía contribuye a la experiencia de lectura de un sitio, por lo que los diseñadores web pasan mucho tiempo buscando fuentes geniales que se adapten al diseño de su sitio web.Aplicar una fuente personalizada en su página web requiere varios pasos. Seleccionamos una fuente, luego la convertimos a un formato compatible con Web y luego la agregamos a las reglas de estilo. Es

(Consejos de tecnología y diseño)

Cómo actualizar archivos de Google Drive sin cambiar sus enlaces

En Google Drive, si cargamos un archivo y compartimos su enlace con otras personas, luego de realizar cualquier cambio en el archivo, necesitamos compartir nuevamente el enlace para el archivo actualizado. Google Drive permite la carga de varios archivos con el mismo nombre y formato, lo que significa que no puede reemplazar archivos antiguos con una versión actualizada, incluso si ambos tienen los mismos nombres .

(Consejos de tecnología y diseño)