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.

Skeuomorphic PSD zu Flat Design mit Skeuomorphism.it

So ist Skeuomorphismus out und flaches Design ist in, das ist alte Nachrichten, aber hey, Trends können echte Unbeständig sein und Designer sind der Gnade ausgeliefert, mitzuhalten. Wenn Sie skeuomorphe Designs haben, die Sie flach drehen möchten, ist hier ein Werkzeug, das eine große Hilfe sein wird.Ske

(Tech- und Design-Tipps)

Ein Leitfaden zur Anpassung der Android Phone Benachrichtigungsleuchte

Die Benachrichtigungsleuchte auf Ihrem Android-Telefon kann viele Informationen über Ihr Telefon geben. Sie können sich über eine wichtige Benachrichtigung informieren oder wissen, ob der Akku fast leer ist, ohne Ihr Telefon zu berühren. Benachrichtigungslicht ist definitiv ein nützliches Feature, aber nutzen Sie es voll aus?Ihr

(Tech- und Design-Tipps)