es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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.

Facebook ahora te permite programar transmisiones en vivo.  He aquí cómo hacerlo.

Facebook ahora te permite programar transmisiones en vivo. He aquí cómo hacerlo.

Facebook Live Broadcast recibirá una función solicitada con frecuencia el jueves, ya que la compañía ha anunciado que actualizará su Live API para permitir a los usuarios programar transmisiones en vivo antes de la transmisión real .Lamentablemente, esta función solo estará disponible para usuarios con páginas verificadas, por lo que quienes deseen utilizar esta característica necesitarán adquirir la verificación de Facebook. Suponiendo

(Consejos de tecnología y diseño)

Un desarrollador en el cambio de Windows a macOS

Un desarrollador en el cambio de Windows a macOS

Siempre he sido un "chico de Windows". Hubo un tiempo en el que jugué con Linux, principalmente la distribución de Ubuntu, y fue una experiencia interesante. Aunque Linux era bastante poderoso, volví a Windows después de un corto tiempo debido a la facilidad de uso de Windows. No tuve que compilar mis propios controladores y había más software disponible .Recie

(Consejos de tecnología y diseño)