Aikataulun näyttäminen näytetyn äänen rinnalla

Audio-transkriptio on puheen tekstiversio, joka auttaa tuottamaan hyödyllisiä materiaaleja, kuten tallennettuja luentoja, seminaareja jne., Äänihaasteelle. Niitä käytetään myös pitämään kirjaa tapahtumista, kuten haastatteluista, tuomioistuinkäsittelyistä ja kokouksista.

Puheäänellä verkkosivuilla (kuten podcasteissa) liittyy tyypillisesti transkripteja, jotka ovat hyödyksi niille, jotka ovat kuulovammaisia tai jotka eivät pysty kuulemaan lainkaan. He voivat katso teksti "toisto" äänen rinnalla. Paras tapa luoda äänilähetys on manuaalinen tulkinta ja tallennus.

Tässä viestissä näemme miten näyttää käynnissä oleva äänitiedosto äänen rinnalla. Aloittaaksesi meidän on oltava valmis. Tätä viestiä varten olen ladannut näytteen äänen ja sen transkription voxtab.

Käytän HTML-koodia ul luettelon, jossa näytetään dialogit seuraavalla verkkosivulla:

  Justin: Minä yritän sanoa, että valitus ja ratkaisu ovat erillisiä.
 Alistair: Tarkoitatko, että sisäiset ja ulkoiset viestinnät ja ilmoitukset tuodaan valitusprosessiin.
 Justin: Oikea, koska he ovat yhteydessä valitukseen.
...

Seuraavaksi haluan, että kaikki käytettävissä olevat tekstit ovat epätarkkoja Poista vain valinta, joka vastaa äänitallennuksen toistamaa puhetta. Niinpä käytän CSS-suodatinta "blur".

#transcript> li -webkit-suodatin: epäselvä (3px) -suodatin: epätarkka (3px); siirtyminen: kaikki .8s on helppo;…

Voit lisätä IE 10+ -laitteen text-shadow luoda epäselvä vaikutus. Tämän koodin avulla voit havaita, onko CSS-hämärtymistä sovellettu vai ei, ja ladata IE-tyylisi tyylisivu. Kun teksti on epäselvä, menin eteenpäin ja lisäsin tyyliin transkriptiin.

 jos (getComputedStyle (dialogit [0]). webkitFilter === undefined && getComputedStyle (dialogit [0]). suodatin === "ei mitään") var headEle = document.querySelector ('head'), linkEle = document.createElement ('linkki'); linkEle.type = 'text / css'; linkEle.rel = 'tyylitaulukko'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

Lisää nyt ääni sivulle tähän.

ontimeupdate tapahtuma audio- elementti laukaistaan joka kerta nykyinen aika päivitetään, joten käytämme tätä tapahtumaa tarkistamaan äänen nykyinen ajoaika ja korostamme vastaavan vuoropuhelun transkriptiossa. Luodaan ensin globaalit muuttujat, joita tarvitsemme.

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

dialogueTimings on joukko numeroita, jotka edustavat sekuntia, kun jokainen vuoropuhelu transkriptiossa alkaa. Ensimmäinen vuoropuhelu alkaa 0s, toinen 4s ja niin edelleen. previousDialogueTime käytetään seuraamaan vuoropuhelun muutoksia.

Siirrymme lopulta siihen toimintoon, johon koukussa on ontimeupdate, joka on nimeltään "playTranscript". Siitä asti kun playTranscript käynnistetään lähes joka sekunti, kun ääni soi, meidän on ensin tunnistettava, mitä vuoropuhelua parhaillaan toistetaan. Oletetaan, että ääni on 0:14, sitten se soittaa 0:11 alkaneella vuoropuhelulla (katso dialogueTimings array), jos nykyinen aika on 0:30 äänessä, se on vuoropuhelu, joka alkoi 0:29.

Näin ollen, kun haluat selvittää, milloin nykyinen vuoropuhelu alkoi, suodatamme ensin koko ajan dialogueTimings jotka ovat äänen nykyisen ajan alapuolella. Jos nykyinen aika on 0:14, suodatamme kaikki nos. matriisissa, jotka ovat alle 14 (jotka ovat 0, 4, 9 ja 11) ja selvittävät enimmäismäärän. niistä 11, eli vuoropuhelu alkoi klo 0.11..

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

Kun currentDialogueTime lasketaan, tarkistamme, onko se sama kuin previousDialogueTime(jos ääni-dialogi on muuttunut vai ei), jos se ei ole ottelu (eli jos vuoropuhelu on muuttunut), sitten currentDialogueTime on määritetty previousDialogueTime.

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

Käytetään nyt hakemistoa currentDialogueTime vuonna dialogueTimings ja selvittää, mikä vuoropuhelu transkriptiopuhelujen luettelosta on korostettava. Esimerkiksi jos currentDialogueTime on 11, sitten indeksin 11 dialogueTimings matriisi on 3, mikä tarkoittaa, että meidän on korostettava keskusteluindeksi 3: ssa vuoropuhelut ryhmä.

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

Kun olemme löytäneet vuoropuhelun korostettavaksi (eli currentDialogue), vieritämme transcriptWrapper (jos vieritettävissä) kunnes currentDialogue on 50px kääreen yläosan alapuolella, niin löydämme aiemmin korostetun vuoropuhelun ja poistamme luokan puhuminen siitä ja lisää se currentDialogue.

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

Elementti luokassa puhuminen näyttää näkymättömän tekstin.

.puhuminen -webkit-filter: hämärtää (0px) suodatin: epätarkka (0px);

Ja se on tässä HTML-koodi ja JS-koodi.

  Justin: Minä yritän sanoa, että valitus ja ratkaisu ovat erillisiä.
 Alistair: Tarkoitatko, että sisäiset ja ulkoiset viestinnät ja ilmoitukset tuodaan valitusprosessiin.
 Justin: Oikea, koska he ovat yhteydessä valitukseen.
...

esittely

Tutustu alla olevaan demoon saadaksesi käsityksen siitä, miten se toimii, kun kaikki koodit kootaan yhteen.