Como exibir transcrição temporizada ao lado de áudio reproduzido

A transcrição de áudio é a versão em texto do discurso, útil para fornecer materiais úteis, como palestras gravadas, seminários, etc., aos audivelmente desafiados. Eles também são usados para manter registros textuais de eventos como entrevistas, audiências judiciais e reuniões.

O áudio de fala em páginas da Web (como em podcasts) geralmente é acompanhado de transcrições, para o benefício daqueles que têm deficiência auditiva ou não conseguem ouvir nada. Eles podem ver o texto "jogando" ao lado do áudio. A melhor maneira de criar uma transcrição de áudio é por meio de interpretação manual e gravação.

Neste post, vamos ver como exibir uma transcrição de áudio em execução ao lado do áudio. Para começar, precisamos ter a transcrição pronta. Para este post, eu baixei uma amostra de áudio e sua transcrição de voxtab.

Eu uso HTML ul lista para exibir os diálogos em uma página da Web como abaixo:

  Justin: O que estou tentando dizer é que o apelo e o acordo são separados.
 Alistair: Você quer dizer que as comunicações e anúncios internos e externos seriam trazidos para o processo de recurso.
 Justin: Certo, porque eles se conectam ao apelo.
…

Em seguida, quero que todo o texto disponível seja desfocado e Unblur apenas o diálogo que irá coincidir com o discurso atual sendo reproduzido pela gravação de áudio. Então, para liberar os diálogos eu uso o filtro CSS "blur".

#transcript> li -webkit-filter: blur (3px) filter: blur (3px); transição: todos os .8s facilidade;…

Para o IE 10+, você pode adicionar text-shadow para criar um efeito desfocado. Você pode usar esse código para detectar se o blur do CSS foi aplicado ou não e para carregar sua folha de estilo específica do IE. Uma vez que o texto está embaçado, fui em frente e adicionei algum estilo à transcrição.

 if (getComputedStyle (diálogos [0]). webkitFilter === undefined && getComputedStyle (diálogos [0]). filter === "nenhum") var headEle = document.querySelector ('head'), linkEle = document.createElement ('ligação'); linkEle.type = 'text / css'; linkEle.rel = 'folha de estilo'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Agora, vamos adicionar o áudio à página, com isso.

o ontimeupdate evento do áudio elemento é demitido toda vez que o seu hora atual é atualizado, então usaremos esse evento para verificar o tempo de execução atual do áudio e destacar o diálogo correspondente na transcrição. Vamos primeiro criar algumas variáveis globais que precisaremos.

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 é uma matriz de números que representa os segundos em que cada diálogo da transcrição começa. O primeiro diálogo começa às 0s, ao segundo às 4s, e assim por diante. previousDialogueTime será usado para rastrear mudanças de diálogo.

Vamos finalmente passar para a função ligada a ontimeupdate, que é chamado "playTranscript". Desde a playTranscript é acionado quase a cada segundo que o áudio está sendo reproduzido, primeiro precisamos identificar qual diálogo está sendo reproduzido no momento. Suponha que o áudio esteja em 0:14, então ele está tocando o diálogo que começou em 0:11 (consulte o dialogueTimings array), se a hora atual é 0:30 no áudio, então é o diálogo que começou às 0:29.

Assim, para descobrir quando o diálogo atual começou, primeiro filtramos todas as vezes no dialogueTimings matriz que estão abaixo da hora atual do áudio. Se a hora atual for 0:14, filtramos todos os nsa. na matriz que estão abaixo de 14 (que são 0, 4, 9 e 11) e descubra o máximo não. daqueles, que são 11 (assim o diálogo começou às 0:11).

função playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (função (v) retornar v <= audio.currentTime));

Uma vez o currentDialogueTime é calculado, nós verificamos se é o mesmo que o previousDialogueTime(isto é, se o diálogo no áudio mudou ou não), se não é um jogo (isto é, se o diálogo mudou), então currentDialogueTime é atribuído a previousDialogueTime.

função playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (função (v) retornar v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;

Agora vamos usar o índice do currentDialogueTime no dialogueTimings array para descobrir qual diálogo na lista de diálogos de transcrição precisa ser destacado. Por exemplo, se o currentDialogueTime é 11, então o índice de 11 no dialogueTimings array é 3, o que significa que temos de destacar o diálogo no índice 3 no diálogos matriz.

função playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (função (v) retornar v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];

Uma vez que encontramos o diálogo para destacar (que é o currentDialogue), nós rolamos transcriptWrapper (se rolável) até currentDialogue é 50px abaixo do topo do wrapper, então descobrimos o diálogo destacado anteriormente e removemos a classe Falando a partir dele e adicioná-lo a currentDialogue.

função playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (função (v) retornar 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';

O elemento com classe Falando mostrará o texto não borrado.

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

E é isso, aqui está o código HTML e JS completo.

  Justin: O que estou tentando dizer é que o apelo e o acordo são separados.
 Alistair: Você quer dizer que as comunicações e anúncios internos e externos seriam trazidos para o processo de recurso.
 Justin: Certo, porque eles se conectam ao apelo.
…

Demonstração

Confira a demonstração abaixo para ter uma ideia de como funciona quando todos os códigos são colocados juntos.