So zeigen Sie zeitgesteuertes Transkript neben wiedergegebenem Audio an

Audio-Transkript ist die Textversion der Rede, hilfreich bei der Bereitstellung nützlicher Materialien wie aufgezeichnete Vorträge, Seminare, etc. für die hörgeschädigten. Sie werden auch verwendet, um Aufzeichnungen über Ereignisse wie Interviews, Gerichtsverhandlungen und Meetings zu führen.

Sprache Audio in Webseiten (wie in Podcasts) sind in der Regel mit Abschriften begleitet, für diejenigen, die hörgeschädigt sind oder überhaupt nicht hören können. Sie können den Text "spielen" neben dem Audio sehen . Der beste Weg, ein Audio-Transkript zu erstellen, ist die manuelle Interpretation und Aufnahme.

In diesem Beitrag werden wir sehen, wie neben dem Audio ein laufendes Audio-Transkript angezeigt wird . Um anzufangen, müssen wir das Transkript bereit haben. Für diesen Beitrag habe ich ein Beispielaudio und sein Transkript von voxtab heruntergeladen .

Ich benutze HTML ul Liste, um die Dialoge auf einer Webseite wie folgt anzuzeigen:

Justin : Ich versuche zu sagen, dass die Berufung und die Einigung getrennt sind.
Alistair : Sie meinen, dass interne und externe Mitteilungen und Ankündigungen in den Berufungsverfahren einbezogen werden.
Justin : Richtig, weil sie sich mit der Berufung verbinden.
...

Als nächstes möchte ich, dass der gesamte verfügbare Text unscharf ist und nur den Dialog entblößt, der mit der aktuellen Sprache übereinstimmt, die von der Audioaufnahme wiedergegeben wird . Um die Dialoge zu entblößen benutze ich den CSS-Filter "blur".

 #transcript> li {-webkit-filter: Unschärfe (3px) Filter: Unschärfe (3px); Übergang: alle .8s Leichtigkeit; ...} 

Für IE 10+ können Sie Textschatten hinzufügen, um einen unscharfen Effekt zu erzielen. Sie können diesen Code verwenden, um zu erkennen, ob die CSS-Unschärfe angewendet wurde oder nicht, und um Ihr IE-spezifisches Stylesheet zu laden. Sobald der Text verschwommen ist, habe ich dem Transkript etwas Stil hinzugefügt.

 if (getComputedStyle (Dialoge [0]). webkitFilter === undefined && getComputedStyle (Dialoge [0]). filter === "none") {var headEle = document.querySelector ('Kopf'), linkEle = document.createElement ('Verknüpfung'); linkEle.type = 'text / css'; linkEle.rel = 'Stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle); } 

Fügen wir nun das Audio zur Seite hinzu.

Das ontimeupdate Ereignis des audio Elements wird jedes Mal currentTime, wenn seine currentTime aktualisiert wird. currentTime wir dieses Ereignis, um die aktuelle Laufzeit des Audiomaterials zu überprüfen und den entsprechenden Dialog im Transkript zu markieren. Lassen Sie uns zunächst einige globale Variablen erstellen, die wir benötigen.

 dialogtimings = [0, 4, 9, 11, 18, 24, 29, 31, 44, 45, 47]; dialogues = document.querySelectorAll ('# transkript> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); previousDialogueTime = -1; 

dialogueTimings ist ein Zahlenfeld, das die Sekunden angibt, zu denen jeder Dialog im Transkript beginnt. Der erste Dialog beginnt bei 0s, der zweite bei 4s und so weiter. previousDialogueTime wird verwendet, um Dialogänderungen zu verfolgen.

Gehen wir nun zu der Funktion, die an ontimeupdate ist und "playTranscript" heißt. Da playTranscript fast jede Sekunde playTranscript wird, die der Ton spielt, müssen wir zuerst identifizieren, welcher Dialog gerade gespielt wird. Angenommen, der Ton ist 0:14, dann wird der Dialog wiedergegeben, der mit 0:11 begonnen hat (siehe das Array dialogingsTimings). Wenn die aktuelle Zeit 0:30 im Audio ist, dann ist es der Dialog, der bei 0:29 begann.

Um herauszufinden, wann der aktuelle Dialog begonnen hat, filtern wir zuerst alle Zeiten im dialogueTimings Array, die unterhalb der aktuellen Zeit des Tons liegen. Wenn die aktuelle Zeit 0:14 ist, filtern wir alle Nos heraus. in dem Array, die unter 14 (die 0, 4, 9 und 11 sind) und finden Sie die maximale Nr. von denen, die 11 ist (so begann der Dialog um 0:11).

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

Nachdem die currentDialogueTime berechnet wurde, prüfen wir, ob sie der previousDialogueTime ( currentDialogueTime wenn sich der Dialog im Audio geändert hat oder nicht). Wenn es keine Übereinstimmung gibt ( currentDialogueTime wenn sich der Dialog geändert hat), wird currentDialogueTime zugewiesen previousDialogueTime .

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

Lassen Sie uns nun den Index der currentDialogueTime im Array currentDialogueTime, um herauszufinden, welcher Dialog in der Liste der Transkriptdialoge hervorgehoben werden muss. Wenn z. B. currentDialogueTime 11 ist, ist der Index von 11 im currentDialogueTime Array 3, was bedeutet, dass wir den Dialog im currentDialogueTime im currentDialogueTime hervorheben müssen.

 Funktion playTranscript () {var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (Funktion (v) {return v <= audio.currentTime})); if (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; var currentDialog = Dialoge [dialogTimings.indexOf (currentDialogueTime)]; }} 

Sobald wir den Dialog gefunden haben, der markiert werden soll (das ist der currentDialogue ), scrollen wir transcriptWrapper (wenn scrollbar), bis currentDialogue 50px unter dem Deckblatt des Wrappers ist, dann finden wir den zuvor hervorgehobenen Dialog heraus und entfernen die speaking Klasse und fügen sie hinzu zum currentDialogue .

 Funktion playTranscript () {var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (Funktion (v) {return v <= audio.currentTime})); if (previousDialogueTime! == currentDialogueTime) {previousDialogueTime = currentDialogueTime; var currentDialog = Dialoge [dialogTimings.indexOf (currentDialogueTime)]; transcriptWrapper.scrollTop = aktuelleDialog.offsetTop - 50; var previousDialogue = document.getElementsByClassName ('sprechend') [0]; if (previousDialogue! == undefined) previousDialogue.className = previousDialogue.className.replace ('sprechend', ''); currentDialogue.className + = 'Sprechen'; }} 

Das Element mit der Klasse speaking zeigt nicht markierten Text an.

 .speaking {-webkit-filter: Unschärfe (0px) Filter: Unschärfe (0px); } 

Und das ist es, hier ist der vollständige Code HTML und JS-Code.

Justin : Ich versuche zu sagen, dass die Berufung und die Einigung getrennt sind.
Alistair : Sie meinen, dass interne und externe Mitteilungen und Ankündigungen in den Berufungsverfahren einbezogen werden.
Justin : Richtig, weil sie sich mit der Berufung verbinden.
...

Demo

Sehen Sie sich die folgende Demo an, um eine Vorstellung davon zu bekommen, wie es funktioniert, wenn alle Codes zusammengefügt sind.

Alles, was Sie über Microsoft Build 2017 wissen müssen

Microsoft hat gerade seine Build 2017-Veranstaltung abgeschlossen, und damit haben wir jetzt eine Idee, woran das Unternehmen für das nächste Jahr oder so arbeiten wird.Während das Ereignis in Hardware-Enthüllungen fehlt, wie es bei einem getrennten Ereignis geschehen wird, das später im Mai geplant wird, hat das Unternehmen eine Anzahl von Details bezüglich der Zukunft von Windows 10, Cortana, künstlicher Intelligenz und viel mehr veröffentlicht. Hier f

(Tech- und Design-Tipps)

Das neue Gmail - Material Design und 8 neue Features

Gmail hat kürzlich ein großes Update erhalten, das die schöne Material-Design-Schnittstelle zu unserem bevorzugten E-Mail-Anbieter bringt. Das ist nicht alles, es stellt viele Funktionen vor, mit denen Sie den Posteingang organisieren können, beispielsweise Optionen zum Senden intelligenter Antworten, zum Schlummern von E-Mails und zum Zugriff auf Ereignisse, Notizen und mehr direkt in Google Mail.Ins

(Tech- und Design-Tipps)