Jak zobrazit časovaný přepis vedle hraného zvuku

Zvukový přepis je textová verze řeči, která je užitečná při poskytování užitečných materiálů, jako jsou nahrané přednášky, semináře atd., Slyšitelným způsobem. Používají se také k uchovávání textových záznamů o událostech, jako jsou rozhovory, soudní jednání a schůzky.

Zvuk řeči na webových stránkách (podobně jako podcasty) je obvykle doprovázen přepisy, ve prospěch těch, kteří jsou sluchově postiženi nebo nejsou schopni vůbec slyšet. Oni mohou zobrazit text "přehrávání" vedle zvuku. Nejlepším způsobem, jak vytvořit přepis zvuku, je ruční interpretace a nahrávání.

V tomto příspěvku uvidíme jak zobrazit vedle běžícího zvuku přepis zvukového záznamu. Abychom mohli začít, musíme mít připravený přepis. Pro tento příspěvek jsem si stáhl ukázkový zvuk a jeho přepis voxtab.

Používám HTML ul zobrazení dialogů na webové stránce, jako je následující:

  JustineSnažím se říci, že odvolání a vyrovnání jsou oddělené.
 Alistair: Myslíte, že komunikace a oznámení, která jsou interní i externí, budou uvedena do odvolacího procesu.
 Justine: Správně, protože se připojují k odvolání.
…

Dále chci, aby byl veškerý dostupný text rozmazán a do odblokovat pouze dialog, který bude odpovídat aktuálnímu řeči přehrávanému zvukovým záznamem. Takže, abych rozbalil dialogy, používám filtr CSS "rozostření".

#transcript> li -webkit-filter: rozostření (3px) filtr: rozostření (3px); přechod: všechny .8s snadné;…

Pro IE 10+ můžete přidat textového stínu vytvořit rozmazaný efekt. Pomocí tohoto kódu můžete zjistit, zda bylo nebo nebylo použito rozostření CSS, a načíst konkrétní styl stylů IE. Jakmile je text rozmazaný, pokračoval jsem a přidal do přepisu nějaký styl.

 if (getComputedStyle (dialogy [0]). webkitFilter === nedefinované && getComputedStyle (dialogy [0]) filtr === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ('odkaz'); linkEle.type = 'text / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Nyní přidejme na stránku zvuk s tímto.

ontimeupdate události Zvuk prvek je vypálen pokaždé, když je aktuální čas je aktualizován, takže tuto událost použijeme ke kontrole aktuální doby běhu zvuku a zvýraznění odpovídajícího dialogu v přepisu. Nejdříve vytvoříme globální proměnné, které budeme potřebovat.

dialogTimings = [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;

dialogy je pole čísel reprezentujících sekundy, kdy začíná každý dialog v přepisu. První dialog začíná na 0s, druhý na 4s a tak dále. previousDialogueTime bude použit pro sledování změn v dialogu.

Pojďme konečně přejít na funkci závislou na ontimeupdate, který se jmenuje "playTranscript". Od té doby playTranscript je vypalován téměř každou sekundu, kdy se přehrává zvuk, musíme nejprve určit, který dialog se právě přehrává. Předpokládejme, že zvuk je v 0:14, pak hraje dialog, který začal v 0:11 (viz dialogy pole), pokud je aktuální čas 0:30 v audio pak je to dialog, který začal v 0:29.

Proto, abychom zjistili, kdy aktuální dialog začal, nejprve filtrujeme všechny časy dialogy pole, které je pod aktuálním časem zvuku. Pokud je aktuální čas 0:14, odfiltrujeme všechna čísla. v poli, které je pod 14 (což je 0, 4, 9 a 11) a zjistit maximální hodnotu č. z těch 11, což znamená, že dialog začal v 0:11..

function playTranscript () var currentDialogueTime = Math.max.apply (Matematika, dialogTimings.filter (funkce (v) return v <= audio.currentTime));

Jednou currentDialogueTime je vypočteno, zkontrolujeme, zda je to stejné jako previousDialogueTime(tj. pokud se dialog ve zvuku změnil nebo ne), pokud se nejedná o zápas (tj. pokud se dialog změnil), pak currentDialogueTime je přiřazen previousDialogueTime.

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

Použijme nyní index currentDialogueTime v dialogy pole pro zjištění, který dialog v seznamu přepisovacích dialogů je třeba zvýraznit. Například, pokud currentDialogueTime je 11, pak index 11 v dialogy pole je 3, což znamená, že musíme zvýraznit dialog na indexu 3 v dialogy pole.

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

Jakmile jsme zjistili, že dialog zvýrazní (to je currentDialogue), posouváme se transcriptWrapper (je-li rolovací) do currentDialogue je 50px pod vrcholem obalu, pak zjistíme dříve zvýrazněný dialog a odstraníme třídu mluvení a přidejte ji currentDialogue.

function playTranscript () var currentDialogueTime = Math.max.apply (Matematika, dialogTimings.filter (funkce (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';

Prvek s třídou mluvení zobrazí nezmazaný text.

.mluvení -webk-filter: blur (0px) filtr: rozostření (0px);

A to je vše, tady je kód HTML a kód JS.

  JustineSnažím se říci, že odvolání a vyrovnání jsou oddělené.
 Alistair: Myslíte, že komunikace a oznámení, která jsou interní i externí, budou uvedena do odvolacího procesu.
 Justine: Správně, protože se připojují k odvolání.
…

Demo

Podívejte se na demo níže, abyste získali představu, jak funguje, když jsou všechny kódy sestaveny dohromady.