Як відобразити тимчасовий стенограма поряд з відтвореним аудіо
Аудіокопія є текстовою версією мови, корисною у наданні корисних матеріалів, таких як записані лекції, семінари тощо. Вони також використовуються для зберігання текстових записів подій, таких як інтерв'ю, судові засідання та зустрічі.
Аудіо мовлення на веб-сторінках (як і в подкастах), як правило, супроводжується транскриптами, на користь тих, хто має слух або не здатний чути взагалі. Вони можуть перегляд тексту "відтворення" поруч із звуком. Найкращим способом створення аудіокопії є ручна інтерпретація та запис.
На цій посаді ми побачимо як відобразити запущений аудіозапис поруч із аудіо. Щоб розпочати роботу, нам треба мати готовий текст. Для цієї публікації я завантажив зразок аудіо та його транскрипт 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: Ви маєте на увазі, що комунікації та оголошення внутрішні та зовнішні будуть залучені до процесу оскарження.
- Джастін: Право, тому що вони підключаються до апеляції.
…
Демо
Ознайомтеся з демо-версією нижче, щоб отримати уявлення про те, як вона працює, коли всі коди зібрані разом.