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.

Entschlüsselung des seltsamen Falles, wie japanisches Webdesign funktioniert [Op-Ed]

Japan, Heimat einer großartigen Ästhetik und Vorreiter des Minimalismus; Von der Mode bis zur Architektur scheinen sie alles herausgefunden zu haben. Ich mag japanische Anime und Manga besonders gern. Die Art und Weise, wie sie Storytelling und Kunst kombinieren, hat für immer die Art und Weise geprägt, wie ich meine eigenen Geschichten erzählen möchte.Ihre

(Tech- und Design-Tipps)

Wann ist Markendesign wirklich wichtig?

Als Designer für Markenidentität habe ich oft mit dieser Frage zu kämpfen. Wenn man sich Unternehmen wie Apple, Dell, Google und Amazon anschaut, die alle mit langweiligen, uninteressanten Logos und ohne echte Markenidentität begannen, über die ich sprechen kann, denke ich oft darüber nach, welche meiner potenziellen Kunden wirklich von meinen Diensten profitieren würden Das kann noch ein paar Jahre dauern, bevor man die maximale Kosteneffektivität der Anstellung von mir erreichen kann.Heute u

(Tech- und Design-Tipps)