Як відобразити тимчасовий стенограма поряд з відтвореним аудіо

Аудіокопія є текстовою версією мови, корисною у наданні корисних матеріалів, таких як записані лекції, семінари тощо. Вони також використовуються для зберігання текстових записів подій, таких як інтерв'ю, судові засідання та зустрічі.

Аудіо мовлення на веб-сторінках (як і в подкастах), як правило, супроводжується транскриптами, на користь тих, хто має слух або не здатний чути взагалі. Вони можуть перегляд тексту "відтворення" поруч із звуком. Найкращим способом створення аудіокопії є ручна інтерпретація та запис.

На цій посаді ми побачимо як відобразити запущений аудіозапис поруч із аудіо. Щоб розпочати роботу, нам треба мати готовий текст. Для цієї публікації я завантажив зразок аудіо та його транскрипт voxtab.

Я використовую HTML ul список, щоб відобразити діалоги на веб-сторінці, як показано нижче:

 
 
Джастін: Я намагаюся сказати, що апеляція і врегулювання є окремими.
 
Alistair: Ви маєте на увазі, що комунікації та оголошення внутрішні та зовнішні будуть залучені до процесу оскарження.
 
Джастін: Право, тому що вони підключаються до апеляції.
… 
 
 

Далі, я хочу, щоб весь доступний текст був розмитий і до розмийте лише діалог, який відповідає поточній мові, яку відтворює аудіозапис. Отже, для розмивання діалогів я використовую фільтр CSS "blur".

#transcript> li -webkit-filter: фільтр розмиття (3px): розмиття (3px); перехід: все легко.

Для IE 10+ можна додати text-shadow для створення розмитого ефекту. Цей код можна використовувати для виявлення застосованого розмиття CSS або для завантаження певної таблиці стилів для IE. Після того, як текст розмитий, я пішов уперед і додав стиль до тексту.

 if (getComputedStyle (діалоги [0]). webkitFilter === undefined && getComputedStyle (діалоги [0]). filter === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ("посилання"); linkEle.type = 'text / css'; linkEle.rel = 'таблиця стилів'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle); 

Тепер давайте додамо звук до сторінки, з цим.

The ontimeupdate подія аудіо Елемент стріляється кожного разу його Поточний час оновлюється, тому ми будемо використовувати цю подію, щоб перевірити поточний час роботи аудіо та виділити відповідний діалог у записі. Давайте спочатку створимо деякі глобальні змінні, які нам знадобляться.

dialogTimings = [0,4,9,11,18,24,29,31,44,45,47]; діалоги = document.querySelectorAll ('# transcript> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); previousDialogueTime = -1; 

dialogTimings - це масив чисел, що представляють секунди, коли починається кожен діалог у записі. Перший діалог починається з 0s, другий - у 4s, і так далі. previousDialogueTime буде використовуватися для відстеження змін діалогу.

Давайте нарешті перейдемо до функції, підключеної до ontimeupdate, який називається "playTranscript". З playTranscript відтворюється майже кожну секунду відтворення аудіо, ми повинні спочатку визначити, який діалог зараз відтворюється. Припустимо, що звук знаходиться в 0:14, тоді він відтворює діалог, який розпочався о 0:11 (див dialogTimings масив), якщо поточний час становить 0:30 в аудіо, то це діалог, який розпочався о 0:29.

Отже, щоб з'ясувати, коли розпочався поточний діалог, спочатку фільтруємо всі часи в dialogTimings масив, що знаходиться нижче поточного часу аудіо. Якщо поточний час становить 0:14, ми відфільтровуємо всі номери. в масиві, які знаходяться нижче 14 (які є 0, 4, 9 і 11) і з'ясувати максимум немає. з них, тобто 11 (таким чином діалог почався о 0:11).

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (функція (v) повернення v <= audio.currentTime));  

Один раз currentDialogueTime обчислюється, ми перевіряємо, чи це так само, як previousDialogueTime(якщо діалог в аудіо змінено чи ні), якщо це не збіг (тобто якщо діалог змінився), currentDialogueTime призначено previousDialogueTime.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (функція (v) повернення v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

Тепер давайте скористаємося індексом currentDialogueTime в dialogTimings масі, щоб з'ясувати, який діалог у списку діалогів транскриптів необхідно виділити. Наприклад, якщо currentDialogueTime є 11, потім індекс 11 в dialogTimings масив 3, що означає, що ми повинні виділити діалог за індексом 3 в діалоги масив.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (функція (v) повернення v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

Як тільки ми знайдемо діалог для виділення (тобто Поточний діалог), прокручуємо transcriptWrapper (якщо можна прокручувати) до Поточний діалог 50px нижче верхньої частини обгортки, тоді ми дізнаємося попередньо виділений діалог і видалимо клас говорячи від неї і додати Поточний діалог.

function playTranscript () var currentDialogueTime = Math.max.apply (Math, dialogTimings.filter (функція (v) повернення 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';   

Елемент з класом говорячи відображатиметься нерозмитий текст.

.speaking -webkit-filter: розмиття (0px) фільтр: розмиття (0px); 

І ось так, ось повний код HTML і код JS.

 
 
Джастін: Я намагаюся сказати, що апеляція і врегулювання є окремими.
 
Alistair: Ви маєте на увазі, що комунікації та оголошення внутрішні та зовнішні будуть залучені до процесу оскарження.
 
Джастін: Право, тому що вони підключаються до апеляції.
… 
 
 
  
  

Демо

Ознайомтеся з демо-версією нижче, щоб отримати уявлення про те, як вона працює, коли всі коди зібрані разом.