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.

Usando el Editor TinyMCE en WordPress [Guía]

Aunque es posible que no sepan su nombre, todos los que usan WordPress están familiarizados con el editor TinyMCE . Es el editor que usa cuando crea o edita su contenido; el que tiene los botones para crear texto en negrita, encabezados, alineación de texto, etc. Eso es lo que veremos en esta publicación, y le mostraré cómo puede agregar funcionalidad y cómo puede usarla en sus complementos .El ed

(Consejos de tecnología y diseño)

Cómo crear una cinta CSS

Hablamos de cintas CSS en el diseño web cuando una tira de caja (llamada cinta) envuelve otra caja . Es una técnica de diseño bastante utilizada para decorar texto, especialmente los títulos. En el sitio web del W3C puede comprobar cómo las cintas CSS usadas correctamente pueden ayudar a estructurar el contenido de una manera sutil.Por

(Consejos de tecnología y diseño)