Jak wyświetlić zapis czasowy obok odtwarzanego dźwięku

Transkrypcja audio to tekstowa wersja mowy, pomocna w dostarczaniu przydatnych materiałów, takich jak nagrane wykłady, seminaria itp. Do głośno kwestionowanych. Służą również do przechowywania tekstowych zapisów wydarzeń, takich jak wywiady, przesłuchania sądowe i spotkania.

Dźwiękowi mowy na stronach internetowych (podobnie jak w podcastach) zazwyczaj towarzyszą stenogramy, z korzyścią dla osób niedosłyszących lub nie mogących w ogóle słyszeć. Mogą wyświetl tekst „grający” obok dźwięku. Najlepszym sposobem tworzenia transkryptu audio jest ręczna interpretacja i nagrywanie.

W tym poście zobaczymy jak wyświetlać działający zapis audio obok dźwięku. Aby zacząć, musimy mieć gotowy transkrypt. W tym poście pobrałem przykładowy dźwięk i jego zapis voxtab.

Używam HTML ul lista, aby wyświetlić dialogi na stronie internetowej jak poniżej:

  Justin: Próbuję powiedzieć, że apelacja i ugoda są oddzielne.
 Alistair: Oznacza to, że komunikacja i ogłoszenia wewnętrzne i zewnętrzne zostaną wprowadzone do procesu odwoławczego.
 Justin: Racja, ponieważ łączą się z odwołaniem.
…

Następnie chcę, aby cały dostępny tekst był zamazany i do odblokuj tylko dialog, który będzie pasował do bieżącej mowy odtwarzanej przez nagranie audio. Aby odblokować dialogi, używam filtru CSS „blur”.

#transcript> li -webkit-filter: blur (3px) filter: blur (3px); przejście: wszystko .8s łatwe;…

Dla IE 10+ możesz dodać cień tekstu stworzyć niewyraźny efekt. Możesz użyć tego kodu, aby wykryć, czy CSS został zastosowany, czy nie, i załadować arkusz stylów IE. Gdy tekst jest zamazany, poszedłem dalej i dodałem trochę stylu do transkryptu.

 if (getComputedStyle (dialogues [0]). webkitFilter === undefined && getComputedStyle (dialogues [0]). filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ('połączyć'); linkEle.type = 'text / css'; linkEle.rel = 'arkusz stylów'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Dodajmy teraz do strony dźwięk.

The ontimeupdate wydarzenie audio element jest odpalany za każdym razem Obecny czas jest zaktualizowany, więc użyjemy tego zdarzenia, aby sprawdzić bieżący czas pracy audio i zaznaczyć odpowiedni dialog w transkrypcie. Najpierw stwórzmy zmienne globalne, których będziemy potrzebować.

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

dialogTimings jest tablicą liczb reprezentujących sekundy, od których rozpoczyna się każdy dialog w transkrypcie. Pierwszy dialog rozpoczyna się od 0s, drugi od 4s i tak dalej. previousDialogueTime będzie używany do śledzenia zmian w dialogu.

Przejdźmy wreszcie do funkcji powiązanej z ontimeupdate, który nazywa się „playTranscript”. Od playTranscript jest uruchamiany prawie co sekundę podczas odtwarzania dźwięku, musimy najpierw określić, który dialog jest aktualnie odtwarzany. Przypuśćmy, że dźwięk ma wartość 0:14, a następnie odtwarza dialog, który rozpoczął się o godzinie 0:11 (patrz dialogTimings tablica), jeśli aktualny czas wynosi 0:30 w dźwięku, to dialog rozpoczął się o godzinie 0:29.

Dlatego, aby dowiedzieć się, kiedy rozpoczął się bieżący dialog, najpierw filtrujemy cały czas w dialogTimings tablica, która jest poniżej bieżącego czasu dźwięku. Jeśli bieżący czas wynosi 0:14, odfiltrowujemy wszystkie numery. w tablicy poniżej 14 (które są 0, 4, 9 i 11) i dowiedz się maksimum nie. z tych, które wynosi 11 (zatem dialog rozpoczął się o godzinie 0:11).

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

Kiedyś currentDialogueTime jest obliczany, sprawdzamy, czy jest taki sam jak previousDialogueTime(to znaczy, jeśli dialog w audio zmienił się lub nie), jeśli nie jest to mecz (jeśli dialog się zmienił), to currentDialogueTime jest przypisany do previousDialogueTime.

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

Teraz użyjmy indeksu currentDialogueTime w dialogTimings tablica, aby dowiedzieć się, który dialog z listy dialogów transkrypcji musi zostać wyróżniony. Na przykład, jeśli currentDialogueTime wynosi 11, a następnie 11 w indeksie dialogTimings tablica to 3, co oznacza, że musimy podświetlić dialog przy indeksie 3 w dialogi szyk.

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

Po znalezieniu dialogu do podświetlenia (czyli currentDialogue), przewijamy transkrypcja (jeśli można przewijać) do currentDialogue jest 50px poniżej wierzchołka opakowania, a następnie dowiadujemy się o wcześniej podświetlonym dialogu i usuwamy klasę mówienie z niego i dodaj go do currentDialogue.

funkcja playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogueTimings.filter (function (v) return 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';

Element z klasą mówienie wyświetli niewyraźny tekst.

.talking -webkit-filter: filtr blur (0px): blur (0px);

I to wszystko, oto pełny kod HTML i kod JS.

  Justin: Próbuję powiedzieć, że apelacja i ugoda są oddzielne.
 Alistair: Oznacza to, że komunikacja i ogłoszenia wewnętrzne i zewnętrzne zostaną wprowadzone do procesu odwoławczego.
 Justin: Racja, ponieważ łączą się z odwołaniem.
…

Próbny

Zapoznaj się z poniższym demo, aby dowiedzieć się, jak to działa, gdy wszystkie kody są połączone.