Çalınan Sesin Yanında Zamanlanmış Konuşma Metnini Görüntüleme

Ses transkript, konuşmanın metin versiyonudur, sesli olarak okunan derslere, seminerlere vb. Yararlı materyaller sağlamada yardımcı olur. Ayrıca görüşmeler, mahkeme duruşmaları ve toplantılar gibi olayların metinsel kayıtlarını tutmak için kullanılırlar..

Web sayfalarındaki (podcast'lerde olduğu gibi) konuşma seslerine, tipik olarak işitme engelliler için duyulan veya hiç duymayanların yararına transkriptler eşlik eder. Yapabilirler Sesin yanında "çalma" metnini görüntüleyin. Ses transkripti oluşturmanın en iyi yolu manuel yorumlama ve kaydetmedir..

Bu yayında göreceğiz Sesin yanında çalışan bir ses transkriptinin nasıl gösterileceği. Başlamak için transkript hazır olmalı. Bu gönderi için örnek bir ses dosyası ve onun transkripsiyonunu indirdim. voxtab.

HTML kullanıyorum ul aşağıdaki gibi bir web sayfasında iletişim kutularını görüntülemek için bir liste:

  Justin: Söylemeye çalıştığım, temyiz ve çözümün ayrı olduğu..
 Alistair: İç ve dış iletişim ve duyuruların temyiz sürecine sokulacağını mı söylüyorsunuz?.
 Justin: Doğru, çünkü temyize bağlandılar.
...

Daha sonra, mevcut tüm metnin bulanıklaştırılmasını ve sadece ses kaydı tarafından çalınmakta olan konuşmaya uygun olacak diyalogu kaldır. Bu yüzden diyalogları silmek için CSS filtresini "blur" olarak kullanıyorum..

#transcript> li -webkit-filter: blur (3px) filtresi: blur (3px); geçiş: tüm .8s kolaylığı;…

IE 10+ için ekleyebilirsiniz Metin gölgesi bulanık bir efekt oluşturmak için. Bu kodu CSS bulanıklığının uygulanıp uygulanmadığını tespit etmek ve IE'ye özgü stil sayfanızı yüklemek için kullanabilirsiniz. Metin bulanıklaştığında, devam ettim ve yazıya bir stil ekledim.

 if (getComputedStyle ([0] iletişim kutusu)). webkitFilter === undefined && getComputedStyle (iletişim [0]) .tr === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ( 'bağlantı'); linkEle.type = 'text / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Şimdi, hadi sayfaya ses ekleyelim..

ontimeupdate olayı ses element her seferinde ateşlenir şimdiki zaman güncellendiğinden, bu olayı sesin geçerli çalışma zamanını kontrol etmek ve transkriptteki ilgili diyalogu vurgulamak için kullanacağız. İlk önce ihtiyaç duyacağımız bazı küresel değişkenler oluşturalım.

diyalogTimings = [[0,4,9,11,18,24,29,31,44,45,47]; dialogues = document.querySelectorAll ('# transcript> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); öncekiDialogueTime = -1;

dialogueTimings transkriptteki her diyaloğun başladığı anları temsil eden bir sayı dizisidir. İlk diyalog 0'larda, ikincisi 4s'de vb. Başlar.. previousDialogueTime diyalog değişikliklerini izlemek için kullanılacak.

Sonunda bağladığımız işleve geçelim ontimeupdate, "playTranscript" olarak adlandırılır. Dan beri playTranscript Sesin çaldığı hemen her saniyede bir ateşlenir, ilk önce hangi diyaloğun yürütülmekte olduğunu belirlememiz gerekir. Sesin 0: 14'te olduğunu varsayalım, daha sonra 0: 11'de başlayan diyaloğu çalıyorsa (bkz. dialogueTimings dizi), o andaki saat 0:30 ise, o zaman saat 0: 29'da başlayan diyalogdur..

Dolayısıyla, mevcut diyaloğun ne zaman başladığını bulmak için önce dialogueTimings sesin geçerli zamanının altında olan dizi. Eğer şimdiki saat 0:14 ise, tüm noktaları filtrelendiriyoruz. 14'ün altındaki dizide (0, 4, 9 ve 11'dir) ve maksimum sayıyı bulun. bunlardan 11'i (böylece diyalog 0: 11'de başladı).

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

Bir kere currentDialogueTime hesaplanır, aynı olup olmadığını kontrol ederiz. previousDialogueTime(eğer sesteki diyalog değişmişse veya değişmediyse), eşleşme değilse (diyalog değişmişse), currentDialogueTime atandı previousDialogueTime.

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

Şimdi dizini kullanalım currentDialogueTime içinde dialogueTimings transkript diyalogları listesindeki hangi diyaloğun vurgulanması gerektiğini bulmak için dizi. Örneğin, eğer currentDialogueTime 11’dir, sonra dialogueTimings dizi 3'tür, bu da dizinde 3. dizindeki diyalogu vurgulamamız gerektiği anlamına gelir. diyaloglar dizi.

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

Bir kez vurgulamak için diyalog bulduktan sonra (bu currentDialogue), kaydırıyoruz transcriptWrapper (kaydırılabilir ise) currentDialogue ambalajın üst kısmının 50 piksel altında, daha önce vurgulanan diyalogu bulup sınıfı kaldırdık konuşuyorum ondan ekleyin ve currentDialogue.

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

Sınıf ile eleman konuşuyorum bulanık metin gösterecektir.

.konuşan -webkit-filter: blur (0px) filtresi: blur (0px);

İşte bu, işte tam kod HTML ve JS kodu.

  Justin: Söylemeye çalıştığım, temyiz ve çözümün ayrı olduğu..
 Alistair: İç ve dış iletişim ve duyuruların temyiz sürecine sokulacağını mı söylüyorsunuz.
 Justin: Doğru, çünkü temyize bağlandılar.
...

gösteri

Tüm kodlar bir araya getirildiğinde nasıl çalıştığı hakkında bir fikir edinmek için aşağıdaki demoyu inceleyin.