Cara Paparkan Transkrip Berterusan Di Sekitar Dimainkan Audio

Transkrip audio adalah versi teks ucapan, membantu dalam menyediakan bahan-bahan yang berguna seperti kuliah yang direkam, seminar, dan sebagainya untuk dicabar dengan hebat. Mereka juga digunakan untuk menyimpan rekod teks peristiwa seperti wawancara, pendengaran mahkamah dan mesyuarat.

Audio ucapan dalam laman web (seperti dalam podcast) biasanya disertakan dengan transkrip, untuk manfaat mereka yang mengalami gangguan pendengaran atau tidak dapat mendengar sama sekali. Mereka boleh lihat teks "bermain" bersebelahan dengan audio. Cara terbaik untuk membuat transkrip audio adalah melalui tafsiran dan rakaman manual.

Dalam siaran ini, kita akan melihat bagaimana untuk memaparkan transkrip audio yang berjalan di samping audio. Untuk bermula, kita perlu menyediakan transkrip. Untuk jawatan ini, saya telah memuat turun audio sampel dan transkrip dari voxtab.

Saya menggunakan HTML ul senarai untuk memaparkan dialog di laman web seperti di bawah:

  Justin: Apa yang saya katakan ialah rayuan dan penyelesaian itu berasingan.
 Alistair: Anda bermaksud komunikasi dan pengumuman dalaman dan luaran akan dibawa ke dalam proses rayuan.
 Justin: Betul, kerana mereka menyambung kepada rayuan itu.
...

Seterusnya, saya mahu semua teks yang tersedia menjadi kabur dan hanya dialog yang tidak sepadan dengan ucapan semasa yang dimainkan oleh rakaman audio. Jadi, untuk membantah dialog saya menggunakan penapis CSS "kabur".

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

Untuk IE 10+ anda boleh tambah bayang-bayang teks untuk mewujudkan kesan kabur. Anda boleh menggunakan kod ini untuk mengesan sama ada CSS blur telah digunakan atau tidak, dan untuk memuatkan helaian gaya khusus IE anda. Apabila teks itu kabur, saya pergi ke hadapan dan menambah beberapa gaya ke transkrip.

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

Sekarang, mari tambah audio ke halaman, dengan ini.

The ontimeupdate peristiwa yang berlaku audio elemen dipecat setiap kali currentTime dikemas kini, jadi kami akan menggunakan acara itu untuk memeriksa masa semasa audio semasa dan menyerlahkan dialog yang sepadan dalam transkrip. Mari kita buat beberapa pemboleh ubah 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'); sebelumnyaDialogueTime = -1;

dialogTimings adalah pelbagai nombor yang mewakili detik apabila setiap dialog dalam transkrip bermula. Dialog pertama bermula pada 0s, kedua pada 4s, dan sebagainya. sebelumnyaDialogueTime akan digunakan untuk mengesan perubahan dialog.

Mari kita akhirnya berpindah ke fungsi yang disambungkan ke ontimeupdate, yang dinamakan "playTranscript". Sejak playTranscript dipecat hampir setiap saat audio sedang dimainkan, kita perlu mengenal pasti dialog mana yang sedang dimainkan. Katakan audio adalah pada 0:14, maka ia memainkan dialog yang bermula pada 0:11 (rujuk dialogTimings array), jika masa semasa adalah 0:30 dalam audio maka dialog itu bermula pada 0:29.

Oleh itu, untuk mengetahui apabila dialog semasa bermula, kita mula-mula menapis semua masa di dalam dialogTimings array yang berada di bawah masa semasa audio. Sekiranya masa sekarang adalah 0:14 kita menyaring semua nombor. dalam array yang berada di bawah 14 (iaitu 0, 4, 9 dan 11) dan mengetahui jumlah maksimum tidak. daripada mereka, iaitu 11 (dengan itu dialog bermula pada 0:11).

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

Sebaik sahaja currentDialogueTime dikira, kami periksa sama ada ia sama sebelumnyaDialogueTime(iaitu jika dialog dalam audio telah berubah atau tidak), jika ia bukan perlawanan (iaitu jika dialog telah berubah), maka currentDialogueTime ditugaskan untuk sebelumnyaDialogueTime.

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

Sekarang mari kita gunakan indeks currentDialogueTime di dalam dialogTimings array untuk mengetahui dialog mana dalam senarai dialog transkrip perlu diserlahkan. Contohnya, jika currentDialogueTime adalah 11, kemudian indeks 11 dalam dialogTimings Arahan adalah 3 yang bermaksud kita perlu menyerlahkan dialog di indeks 3 di dalam dialog array.

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

Sebaik sahaja kami dapati dialog untuk menyerlahkan (iaitu currentDialogue), kita tatal transcriptWrapper (jika digulir) hingga currentDialogue adalah 50px di bawah bungkus atas, maka kita dapati dialog yang ditonjolkan sebelumnya dan menghapus kelas bercakap dari sini dan tambahnya currentDialogue.

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

Unsur dengan kelas bercakap akan memaparkan teks tanpa had.

.Berbicara -webkit-filter: blur (0px) penapis: blur (0px);

Dan itu sahaja, inilah kod HTML dan kod JS yang lengkap.

  Justin: Apa yang saya katakan ialah rayuan dan penyelesaian itu berasingan.
 Alistair: Anda bermaksud komunikasi dan pengumuman dalaman dan luaran akan dibawa ke dalam proses rayuan.
 Justin: Betul, kerana mereka menyambung kepada rayuan itu.
...

Demo

Lihat demo di bawah untuk mendapatkan idea bagaimana ia berfungsi apabila semua kod dikumpulkan.