Comment afficher une transcription chronométrée en même temps que l'audio lu

La transcription audio est la version textuelle du discours, utile pour fournir du matériel utile tel que des conférences enregistrées, des séminaires, etc. aux personnes audibles. Ils sont également utilisés pour conserver des archives textuelles d'événements tels que des entretiens, des audiences et des réunions.

La parole audio dans les pages Web (comme dans les podcasts) est généralement accompagnée de transcriptions, au profit des personnes malentendantes ou incapables d’entendre. Ils peuvent voir le texte "jouer" à côté de l'audio. La meilleure façon de créer une transcription audio est d’interpréter et d’enregistrer manuellement.

Dans ce post, nous allons voir comment afficher une transcription audio en cours à côté de l'audio. Pour commencer, nous devons avoir la transcription prête. Pour cet article, j'ai téléchargé un exemple audio et sa transcription à partir de voxtab.

J'utilise HTML ul liste pour afficher les dialogues sur une page Web comme ci-dessous:

  Justin: Ce que j'essaie de dire, c'est que l'appel et le règlement sont séparés.
 Alistair: Vous voulez dire que les communications et les annonces internes et externes seraient intégrées au processus d'appel.
 Justin: Droit, parce qu'ils se connectent à l'appel.
…

Ensuite, je veux que tout le texte disponible soit flou et ouvrir uniquement le dialogue correspondant au discours en cours de lecture de l'enregistrement audio. Donc, pour brouiller les dialogues, j'utilise le filtre CSS "flou".

#transcript> li -webkit-filter: blur (3px) filtre: blur (3px); transition: tous les .8s à l'aise;…

Pour IE 10+, vous pouvez ajouter ombre de texte pour créer un effet flou. Vous pouvez utiliser ce code pour déterminer si le flou CSS a été appliqué ou non, et pour charger votre feuille de style spécifique à IE. Une fois que le texte est flou, je suis allé de l'avant et j'ai ajouté du style à la transcription..

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

Maintenant, ajoutons l'audio à la page, avec cette.

le date de mise à jour événement du l'audio l'élément est déclenché à chaque fois que son heure actuelle est mis à jour, nous allons donc utiliser cet événement pour vérifier la durée d'exécution actuelle de l'audio et mettre en surbrillance le dialogue correspondant dans la transcription. Créons d'abord des variables globales dont nous aurons besoin.

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;

dialogues est un tableau de nombres représentant les secondes lorsque chaque dialogue de la transcription commence. Le premier dialogue commence à 0 secondes, le second à 4 secondes, etc.. précédentDialogueTime sera utilisé pour suivre les changements de dialogue.

Passons enfin à la fonction accrochée à date de mise à jour, qui s'appelle "playTranscript". Puisque playTranscript est déclenché presque chaque seconde que le son est joué, nous devons d’abord identifier le dialogue en cours de lecture. Supposons que l’audio soit à 0:14, alors il joue le dialogue qui a commencé à 0:11 (reportez-vous à la dialogues tableau), si l’heure actuelle est 0h30 dans l’audio, c’est le dialogue qui a commencé à 0:29.

Par conséquent, pour savoir quand le dialogue actuel a commencé, nous filtrons d’abord tous les temps de la dialogues tableau qui sont en dessous de l'heure actuelle de l'audio. Si l'heure actuelle est 0:14, nous filtrons tous les non. dans le tableau qui sont en dessous de 14 (qui sont 0, 4, 9 et 11) et trouver le maximum non. de ceux qui est 11 (ainsi le dialogue a commencé à 0:11).

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

Une fois la currentDialogueTime est calculé, nous vérifions si c'est le même que le précédentDialogueTime(c’est-à-dire si le dialogue dans l’audio a changé ou non), si ce n’est pas une correspondance (c’est-à-dire si le dialogue a changé), currentDialogueTime est assigné à précédentDialogueTime.

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

Maintenant, utilisons l'index du currentDialogueTime dans le dialogues tableau pour savoir quel dialogue dans la liste des dialogues de transcription doit être mis en évidence. Par exemple, si le currentDialogueTime est 11, puis index de 11 dans le dialogues tableau est 3 ce qui signifie que nous devons mettre en évidence le dialogue à l'index 3 dans le dialogues tableau.

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

Une fois que nous avons trouvé le dialogue à mettre en évidence (c’est le currentDialogue), nous faisons défiler transcriptWrapper (si défilement) jusqu'à currentDialogue est 50px en dessous du sommet du wrapper, nous découvrons le dialogue précédemment mis en surbrillance et supprimons la classe Parlant de lui et l'ajouter à currentDialogue.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (fonction (v) retour 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';

L'élément avec classe Parlant affichera du texte non flou.

.parler -webkit-filter: blur (0px) filtre: blur (0px);

Et voilà, voici le code complet HTML et le code JS.

  Justin: Ce que j'essaie de dire, c'est que l'appel et le règlement sont séparés.
 Alistair: Vous voulez dire que les communications et les annonces internes et externes seraient intégrées au processus d'appel.
 Justin: Droit, parce qu'ils se connectent à l'appel.
…

Démo

Regardez la démo ci-dessous pour avoir une idée de comment ça marche quand tous les codes sont assemblés.