Cara Menampilkan Transkrip Jangka Waktu Bersama Audio yang Diputar

Transkrip audio adalah versi teks pidato, membantu dalam menyediakan bahan-bahan yang bermanfaat seperti rekaman kuliah, seminar, dll. Bagi yang ditantang secara terdengar. Mereka juga digunakan untuk menyimpan catatan tekstual acara seperti wawancara, sidang pengadilan dan pertemuan.

Audio ucapan di halaman web (seperti di podcast) biasanya disertai dengan transkrip, untuk kepentingan mereka yang memiliki gangguan pendengaran atau tidak dapat mendengar sama sekali. Mereka bisa lihat teks "diputar" di samping audio. Cara terbaik untuk membuat transkrip audio adalah dengan interpretasi dan perekaman manual.

Dalam posting ini, kita akan lihat cara menampilkan transkrip audio yang berjalan di samping audio. Untuk memulai, kita harus menyiapkan transkripnya. Untuk posting ini, saya sudah mengunduh sampel audio dan transkripnya dari voxtab.

Saya menggunakan HTML ul daftar untuk menampilkan dialog pada halaman web seperti di bawah ini:

  Justin: Apa yang ingin saya katakan adalah bahwa banding dan penyelesaiannya terpisah.
 Alistair: Maksud Anda komunikasi dan pengumuman internal dan eksternal akan dibawa ke dalam proses banding.
 Justin: Benar, karena mereka terhubung ke banding.
...

Selanjutnya, saya ingin semua teks yang tersedia menjadi kabur dan batalkan hanya dialog yang akan cocok dengan pidato saat ini yang sedang diputar oleh rekaman audio. Jadi, untuk menghapus dialog, saya menggunakan filter CSS "blur".

#transcript> li -webkit-filter: blur (3px) filter: blur (3px); transisi: semua .8 mudah; ...

Untuk IE 10+ Anda dapat menambahkan bayangan teks untuk membuat efek buram. Anda dapat menggunakan kode ini untuk mendeteksi apakah CSS blur telah diterapkan atau belum, dan untuk memuat stylesheet khusus IE Anda. Setelah teks kabur, saya melanjutkan dan menambahkan beberapa gaya ke transkrip.

 if (getComputedStyle (dialog [0]). webkitFilter === undefined && getComputedStyle (dialog [0]). filter === "tidak ada") var headEle = document.querySelector ('head'), linkEle = document.createElement ('link'); linkEle.type = 'text / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Sekarang, mari kita tambahkan audio ke halaman, dengan ini.

Itu ontimeupdate acara tersebut audio elemen dipecat setiap kali waktu saat ini diperbarui, jadi kami akan menggunakan acara itu untuk memeriksa waktu tayang audio saat ini dan menyoroti dialog terkait dalam transkrip. Pertama mari kita buat beberapa variabel global yang kita perlukan.

dialogTimings = [0,4,9,11,18,24,29,31,44,45,47]; dialog = document.querySelectorAll ('# transkrip> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); priorDialogueTime = -1;

dialogTimings adalah array angka yang mewakili detik ketika setiap dialog dalam transkrip dimulai. Dialog pertama dimulai pada 0s, kedua di 4s, dan seterusnya. priorDialogueTime akan digunakan untuk melacak perubahan dialog.

Akhirnya mari kita beralih ke fungsi yang dikaitkan ontimeupdate, yang diberi nama "playTranscript". Sejak playTranscript dipecat hampir setiap detik audio diputar, pertama-tama kita perlu mengidentifikasi dialog mana yang sedang diputar. Misalkan audio pada 0:14, maka itu memainkan dialog yang dimulai pada 0:11 (lihat dialogTimings array), jika waktu saat ini adalah 0:30 dalam audio maka dialog yang dimulai pada 0:29.

Karenanya, untuk mengetahui kapan dialog saat ini dimulai, pertama-tama kami memfilter semua waktu di dialogTimings array yang berada di bawah waktu saat ini dari audio. Jika waktu saat ini adalah 0:14 kami menyaring semua nos. dalam array yang di bawah 14 (yaitu 0, 4, 9 dan 11) dan cari tahu no maksimum. dari mereka, yaitu 11 (dengan demikian dialog dimulai pada 0:11).

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

Setelah itu currentDialogueTime dihitung, kami memeriksa apakah sama dengan priorDialogueTime(yaitu jika dialog dalam audio telah berubah atau tidak), jika itu tidak cocok (yaitu jika dialog telah berubah), maka currentDialogueTime ditugaskan untuk priorDialogueTime.

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

Sekarang mari kita gunakan indeks currentDialogueTime dalam dialogTimings array untuk mengetahui dialog mana dalam daftar dialog transkrip yang perlu disorot. Misalnya, jika currentDialogueTime adalah 11, lalu indeks 11 di dialogTimings array adalah 3 yang berarti kita harus menyoroti dialog di indeks 3 di dialog array.

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

Setelah kami menemukan dialog untuk disoroti (yaitu dialog saat ini), kami gulir transcriptWrapper (jika dapat digulir) hingga dialog saat ini adalah 50px di bawah bagian atas pembungkus, maka kami menemukan dialog yang sebelumnya disorot dan menghapus kelas berbicara dari itu dan tambahkan ke dialog saat ini.

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

Elemen dengan kelas berbicara akan menampilkan teks yang tidak dikaburkan.

.berbicara -webkit-filter: blur (0px) filter: blur (0px);

Dan itu dia, ini kode lengkapnya HTML dan kode JS.

  Justin: Apa yang ingin saya katakan adalah bahwa banding dan penyelesaiannya terpisah.
 Alistair: Maksud Anda komunikasi dan pengumuman internal dan eksternal akan dibawa ke dalam proses banding.
 Justin: Benar, karena mereka terhubung ke banding.
...

Demo

Lihat demo di bawah ini untuk mengetahui cara kerjanya ketika semua kode disatukan.