So zeigen Sie das zeitgesteuerte Protokoll neben dem abgespielten Audio an

Audio-Transkription ist die Textversion der Sprache, die hilfreich ist, um nützliche Materialien wie aufgezeichnete Vorlesungen, Seminare usw. für Hörgeschädigte bereitzustellen. Sie werden auch verwendet, um Textaufzeichnungen von Ereignissen wie Interviews, Gerichtsverhandlungen und Meetings zu führen.

Sprachaudio auf Webseiten (wie in Podcasts) wird normalerweise von Transkripten begleitet, von denen die Hörgeschädigten profitieren oder überhaupt nicht hören können. Sie können Sehen Sie sich den Text neben dem Audio an. Der beste Weg, ein Audio-Transkript zu erstellen, ist die manuelle Interpretation und Aufnahme.

In diesem Beitrag werden wir sehen So zeigen Sie ein laufendes Audio-Transkript neben dem Audio an. Um anzufangen, müssen wir die Abschrift bereithalten. Für diesen Beitrag habe ich ein Beispiel-Audio und das Transkript von heruntergeladen Voxtab.

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

  JustinWas ich zu sagen versuche, ist, dass die Berufung und der Vergleich getrennt sind.
 Alistair: Sie meinen, dass interne und externe Kommunikationen und Ankündigungen in den Berufungsprozess einbezogen werden.
 Justin: Richtig, weil sie sich auf den Aufruf beziehen.
…

Als nächstes möchte ich, dass der gesamte verfügbare Text unscharf ist und zu Deaktivieren Sie nur den Dialog, der der aktuellen Sprache entspricht, die von der Audioaufnahme gespielt wird. Um die Dialoge unscharf zu machen, verwende 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 hinzufügen Text-Schatten einen unscharfen Effekt erzeugen. Sie können diesen Code verwenden, um zu ermitteln, ob CSS-Unschärfe angewendet wurde oder nicht, und um Ihr IE-spezifisches Stylesheet zu laden. Sobald der Text unscharf ist, habe ich der Abschrift etwas Stil hinzugefügt.

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

Jetzt fügen wir das Audio mit dieser Seite der Seite hinzu.

Das ontimeupdate Ereignis der Audio- Element wird jedes Mal ausgelöst aktuelle Uhrzeit wurde aktualisiert, daher verwenden wir dieses Ereignis, um die aktuelle Laufzeit des Audios zu überprüfen und den entsprechenden Dialog im Protokoll zu markieren. Lassen Sie uns zunächst einige globale Variablen erstellen, die wir benötigen.

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;

dialogTimings ist ein Zahlenfeld, das die Sekunden darstellt, wenn jeder Dialog in der Abschrift beginnt. Der erste Dialog beginnt bei 0s, der zweite bei 4s usw.. previousDialogueTime wird verwendet, um Dialogänderungen zu verfolgen.

Lassen Sie uns schließlich zu der Funktion gehen, die mit der Funktion verbunden ist ontimeupdate, das heißt "playTranscript". Schon seit playTranscript Fast jede Sekunde, in der das Audio abgespielt wird, müssen wir feststellen, welcher Dialog gerade abgespielt wird. Angenommen, der Ton ist um 0:14 Uhr, dann spielt er den Dialog ab, der um 0:11 Uhr begann (siehe dialogTimings Array), wenn die aktuelle Uhrzeit 0:30 im Audio ist, beginnt der Dialog um 0:29.

Um herauszufinden, wann der aktuelle Dialog begonnen hat, filtern wir zuerst alle Zeiten im dialogTimings Array, das unter der aktuellen Uhrzeit des Audios liegt. Wenn die aktuelle Uhrzeit 0:14 ist, filtern wir alle Nummern heraus. in dem Array, das unter 14 ist (0, 4, 9 und 11) und die maximale Anzahl herausfinden. von denen, die 11 ist (so begann der Dialog um 0:11).

Funktion playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (Funktion (v) Rückgabe v <= audio.currentTime));

Einmal die currentDialogueTime berechnet wird, prüfen wir, ob es dem previousDialogueTime(Dies ist der Fall, wenn sich der Dialog im Audio geändert hat oder nicht), wenn er nicht übereinstimmt (dh, wenn sich der Dialog geändert hat), dann currentDialogueTime ist zugeordnet previousDialogueTime.

Funktion playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (Funktion (v) Rückgabe v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;

Verwenden wir nun den Index der currentDialogueTime in dem dialogTimings Array, um herauszufinden, welcher Dialog in der Liste der Transkript-Dialoge hervorgehoben werden muss. Zum Beispiel, wenn die currentDialogueTime ist 11, dann Index von 11 im dialogTimings Array ist 3, was bedeutet, dass wir den Dialog bei Index 3 in der hervorheben müssen Dialoge Array.

Funktion playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (Funktion (v) Rückgabe v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];

Sobald wir den Dialog gefunden haben, der hervorgehoben werden soll (das ist das currentDialogue), wir scrollen transcriptWrapper (falls scrollbar) bis currentDialogue ist 50px unter der Oberseite des Wrappers, dann finden wir den zuvor hervorgehobenen Dialog heraus und entfernen die Klasse Sprechen von ihm und fügen Sie es hinzu currentDialogue.

Funktion playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (Funktion (v) Rückgabe 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';

Das Element mit der Klasse Sprechen zeigt unscharfen Text an.

.Sprechen -Webkit-Filter: Unschärfe (0px) Filter: Unschärfe (0px);

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

  JustinWas ich zu sagen versuche, ist, dass die Berufung und der Vergleich getrennt sind.
 Alistair: Sie meinen, dass interne und externe Kommunikationen und Ankündigungen in den Berufungsprozess einbezogen werden.
 Justin: Richtig, weil sie sich auf den Aufruf beziehen.
…

Demo

Schauen Sie sich die Demo unten an, um eine Vorstellung davon zu bekommen, wie es funktioniert, wenn alle Codes zusammengestellt sind.