hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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

Transcription audio est la version texte du discours, utile pour fournir des matériaux utiles comme des conférences enregistrées, des séminaires, etc. pour les audibles contestées. Ils sont également utilisés pour conserver des enregistrements textuels d'événements tels que des entretiens, des audiences et des réunions.

L'audio de la parole dans les pages Web (comme dans les podcasts) est généralement accompagné de transcriptions, pour le bénéfice de ceux qui ont une déficience auditive ou ne peuvent pas entendre du tout. 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 d'exécution à côté de l'audio . Pour commencer, nous devons avoir la transcription prête. Pour ce post, j'ai téléchargé un échantillon audio et sa transcription de voxtab .

J'utilise HTML ul list 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 seront introduites dans le processus d'appel.
  • Justin : Oui, parce qu'ils sont liés à l'appel.
  • ...

Ensuite, je veux que tout le texte disponible soit flou et ne débloque que le dialogue qui correspondra au discours en cours joué par l'enregistrement audio . Donc, pour effacer les dialogues, j'utilise le filtre CSS "flou".

 #transcript> li {-webkit-filter: filtre flou (3px): flou (3px); transition: tous .8 facilité; ...} 

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

 if (getComputedStyle (dialogues [0]). webkitFilter === non défini && getComputedStyle (dialogues [0]). filter === "aucun") {var headEle = document.querySelector ('head'), linkEle = document.createElement ('lien'); linkEle.type = 'text / css'; linkEle.rel = 'feuille de style'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle); } 

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

L'événement ontimeupdate de l'élément audio est déclenché chaque fois que son currentTime est mis à jour. Nous allons donc utiliser cet événement pour vérifier l'heure actuelle de l'audio et mettre en surbrillance le dialogue correspondant dans la transcription. Commençons par créer quelques 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; 

dialogueTimings est un tableau de nombres représentant les secondes au début de chaque dialogue de la transcription. Le premier dialogue commence à 0s, deuxième à 4s, et ainsi de suite. previousDialogueTime sera utilisé pour suivre les changements de dialogue.

Passons enfin à la fonction ontimeupdate, qui s'appelle "playTranscript". Étant donné que playTranscript est déclenché presque chaque seconde playTranscript la lecture de l'audio, nous devons d'abord identifier le dialogue en cours de lecture. Supposons que l'audio est à 0:14, alors il joue le dialogue qui a commencé à 0:11 (référez-vous au tableau dialogTimings), si l'heure actuelle est 0:30 dans l'audio, alors 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 dans le tableau dialogTimings qui sont en dessous de l'heure actuelle de l'audio. Si l'heure actuelle est 0:14, nous filtrons tous les nôtres. dans le tableau qui sont inférieurs à 14 (qui sont 0, 4, 9 et 11) et trouver le nombre maximum. sur ceux-ci, qui est 11 (ainsi le dialogue a commencé à 0:11).

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

Une fois que le currentDialogueTime est calculé, nous vérifions s'il est le même que le previousDialogueTime (si le dialogue dans l'audio a changé ou non), si ce n'est pas une correspondance (si le dialogue a changé), currentDialogueTime est assigné à previousDialogueTime .

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

currentDialogueTime maintenant l'index de currentDialogueTime dans le tableau currentDialogueTime pour trouver quel dialogue dans la liste des dialogues de transcription doit être mis en surbrillance. Par exemple, si currentDialogueTime est 11, alors l'indice 11 dans le tableau currentDialogueTime est 3 ce qui signifie que nous devons mettre en surbrillance le dialogue à l'index 3 dans le tableau dialogues .

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

Une fois que nous avons trouvé le dialogue à mettre en surbrillance (c'est le currentDialogue ), nous currentDialogue transcriptWrapper (si scrollable) jusqu'à ce que currentDialogue soit 50px sous le sommet de l'encapsuleur, puis nous trouvons le dialogue en surbrillance et en supprimons la classe à currentDialogue .

 function playTranscript () {var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (fonction (v) {return v <= audio.currentTime})); if (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues [dialogTimings.indexOf (currentDialogueTime)]; transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50; var previousDialogue = document.getElementsByClassName ('parlant') [0]; if (previousDialogue! == undefined) previousDialogue.className = previousDialogue.className.replace ('parlant', ''); currentDialogue.className + = 'parlant'; }} 

L'élément avec classe speaking affichera un texte non flou.

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

Et voilà, voici le code HTML complet 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 seront introduites dans le processus d'appel.
  • Justin : Oui, parce qu'ils sont liés à l'appel.
  • ...


Démo

Découvrez la démo ci-dessous pour avoir une idée de comment cela fonctionne lorsque tous les codes sont réunis.

15 Trucs et astuces pour vous aider Maître Prezi

15 Trucs et astuces pour vous aider Maître Prezi

Si vous avez besoin de créer des présentations pour des clients de grande puissance, ou impressionner des professeurs et des professeurs à l'université, vous avez peut-être entendu parler de (ou utilisez déjà) Prezi. Prezi est un outil de présentation basé sur le cloud et est connu pour son interface utilisateur zoom (ZUI) vous permettant de décomposer facilement ou d'entrer dans les détails.Comme il a

(Conseils techniques et de conception)

Dropbox Pro est maintenant Dropbox Plus.  Que souhaitez-vous savoir

Dropbox Pro est maintenant Dropbox Plus. Que souhaitez-vous savoir

Tout récemment, Dropbox a décidé de renommer son option Dropbox Pro en "Dropbox Plus" . Bien que le changement de nom n'affecterait probablement pas ceux qui sont nouveaux sur Dropbox, les utilisateurs de longue date de l'offre premium du système de stockage en nuage peuvent être déroutés par ce changement de nom. Donc,

(Conseils techniques et de conception)