Imagjinoni që jeni duke pritur një telefonatë Zoom. Është një bisedë që po lehtësoni midis disa anëtarëve të lagjes suaj, duke folur për atë që është e rëndësishme për ju. Të gjithë janë këtu! Më mirë filloni regjistrimin që të mos harroni. "A mund ta shihni të gjithë ekranin tim?" Fraza kryesore e vitit 2020, ende vazhdon e fortë. Gjithçka shkon mirë; Xhoi flet për rritjen në vitet '80, Jordan tregoi një histori për nënën e saj dhe në fund Xhemi qëndroi për t'ju treguar për recetën e tyre të preferuar të byrekut me pjeshkë. Mos, po regjistron akoma? Është në rregull, le të shohim një mjet të ri që Cortico ka në punë që mund të ndihmojë në modifikimin e regjistrimit tuaj të ri audio.

Jo çdo ditë mund të ngarkoni një bisedë në Rrjetin e Zërave Lokale, dhe kur e bëni këtë, mendoj se është e drejtë të supozoni se do të dëshironit që ajo bisedë të lustrohej pak - hiqni pjesët e audios që përfshini disa “pandemi-izma” (p.sh. “A mund të më dëgjojnë të gjithë?”, “Ope, ti je ende në memec, Greg.” etj.) ose ndoshta fundi kur të gjithë i janë drejtuar motit. Në Cortico, kjo njihet si një zbukurim dhe historikisht ka qenë një detyrë për Udhëheqësin tonë të palëkundur të Mbështetjes së Partnerëve, Kelly, që ka marrë një kohë jo të papërfillshme. Pra, ajo që vijon është disa nga puna e bërë këtë verë për ta hequr këtë proces nga pjata e stafit të Cortico dhe në duart e partnerëve të Cortico, duke u lejuar atyre më shumë kontroll mbi bisedat e tyre, për të bërë shkurtime në kohën e tyre.

Shkurtimi

Së pari, le të ecim shkurtimisht në procesin aktual të bërjes së një zbukurimi.

  1. Një bisedë ngarkohet në LVN siç shihet më sipër.
  2. Një partner i bën një kërkesë Kellit për të bërë një zbukurim.
  3. Kelly shkarkon audion, e ngarkon atë në një redaktues audio dhe shkëput audion e kërkuar.
  4. Kelly lëshon audion e shkurtuar në kanalin Slack të Cortico.
  5. Një inxhinier softuerësh fut audion e shkurtuar përsëri në proces që lejon që bisedat të shfaqen në LVN duke zëvendësuar në thelb audion e vjetër me të renë.

Siç mund ta shihni… jo shumë efikas! Pra, le të shohim se si ndryshuan gjërat.

Siç u përshkrua më lart, të gjitha zbukurimet u bënë me kërkesë në prapaskenë. Pra, për të zbatuar një veçori të re të shkurtimit, së pari duhej t'i përgjigjesh disa pyetjeve:

  1. Kush do të përdorte mjetin e shkurtimit?
  2. Kur duhet të bëhet shkurtimi?
  3. Si duhet të bëhet prerja?

Dy pyetjet e para janë më të lehta për t'u përgjigjur. Përfundimisht ne duam që kushdo që po ngarkon bisedën të jetë në gjendje të shkurtojë ngarkimin paraprak.

Si është pjesa më e ndërlikuar.

Me një fjalë, përgjigja përfundoi të ishte.. Wavesurfer.

Wavesurfer

Wavesurfer.js është një bibliotekë e gjithanshme React që shfaq audion në një format më tërheqës WAV për një përdorues, ose me fjalët e tyre, "një vizualizim i formës së valës audio të personalizueshme, i ndërtuar në krye të API Audio Web dhe Canvas HTML5", dhe duket kështu :

Procesi i vendosjes së një Vale barebones është mjaft i thjeshtë; krijoni një ‹div› duke përdorur HTML ose JSX, instantoni një shembull të ri të Wave duke përdorur metodën e përfshirë "krijoni", më pas ngarkoni URL-në tuaj audio duke përdorur metodën "load". Në faqet më të thjeshta të internetit, kjo duhet të jetë gjithçka që kërkohet për të shfaqur Valën!

Sigurisht, ne donim diçka pak më emocionuese, dhe kjo është ajo me të cilën kemi përfunduar:

Përveç disa shtesave të dobishme si afati kohor që ndodhet në krye të "Wave" dhe butonat "Luaj/Anulo" që janë të lidhur me "Valën", ekzistojnë tre aspekte të ndërtimit të kësaj veçorie të shkurtimit në të cilat dua të zhytem pak më thellë:

  • Funksionaliteti i zmadhimit
  • Përdorimi i rajonit
  • Dorëzimi i një prerjeje

Zmadhoni

Vala përbëhet vizualisht nga dhjetëra deri në qindra linja të vogla vertikale në varësi të gjatësisë së zërit, dhe kur e kombinoni atë me zakonet e rikthimit të React, mund të mendoni se mund të ketë disa probleme të performancës kur zmadhoni dhe jashtë Valës.

Zgjidhja këtu ishte duke përdorur një metodë debounce. Ka postime të tjera në blog tërësisht rreth mënyrës së përdorimit të një funksioni debounce, por në thelb i thamë Wave që të riprodhojë vetëm pas 100 milisekonda. Kjo në mënyrë efektive ndaloi vonesën që do të përjetonte një përdorues kur përpiqej të tërhiqte rrëshqitësin e zmadhimit dhe në vend të kësaj e zëvendësoi atë me një vonesë shumë të shkurtër, një përvojë shumë më e mirë e përdoruesit.

Rajoni

Rajoni që mbivendos Wave është mjeti kryesor që një përdorues do të përdorë për të bërë me sukses një prerje. Ne e modeluam funksionalitetin sipas QuickTime Player në atë mënyrë që përdoruesi të dëgjojë vetëm atë që është zgjedhur brenda rajonit. Sidoqoftë, marrja e dizajnit të mbivendosjes së valës ashtu siç dëshironim ishte më e ndërlikuar nga sa pritej.

Si parazgjedhje, rajoni do të qëndrojë në krye të Valës, duke krijuar zakonisht një shtresë të errët që përdoruesi mund ta rrëshqasë dhe të lëvizë përreth. Por ne vërtet donim efektin e kundërt - ta bënim të dukej sikur Vala ishte "më afër" me përdoruesin dhe të shfaqej mbivendosja e rajonit vetëm kur përdoruesi klikon dhe zvarrit dorezat e mëdha dhe të gjelbërta të rajonit në çdo skaj.

Kjo u bë duke menaxhuar indekset z të të gjithë elementëve në lojë; rajoni teknikisht ende qëndron mbi kontejnerin e Valës, por është një sfond i bardhë, duke krijuar iluzionin se Vala është ende në krye, sepse ne ndryshuam indeksin z të vijave vertikale për të qëndruar mbi rajonin. Vetë Vala ka një ngjyrë gri, të errët, prandaj duket sikur po "krijon" një rajon të ri kur tërhiqni dorezën, kur ajo që po bëni në të vërtetë është zbuloni Valën poshtë. Një grindje e lezetshme e dorës këtu nëse më pyet mua.

Dorëzo

Së fundi, çfarë ndodh kur përdoruesi klikon butonin Submit? Si përfundojnë kohët e shkurtimit që përdoruesi zgjedh duke zvarritur dorezat e rajonit si një shkurtim i përhershëm?

Vala përfundon të jetë pjesë e formularit që përdoruesi paraqet, formularit që nxjerr informacionin që një përdorues fut. Duke kaluar një funksion nga kjo formë te komponenti Wave, ne mund të kalojmë vendndodhjet e skajeve të rajonit që korrespondojnë me vendin ku përdoruesi do të dëshironte të bënte një shkurtim në formular, i cili përfundimisht kalon në fundin tonë ku bëhet shkurtimi. i bërë.

Në të ardhmen

Që nga gushti i vitit 2022, kjo veçori po kalon një lançim të butë, kështu që mund të mos e shihni ende, por tashmë ka filluar puna për funksionin tjetër që partnerët tanë do të mund të përdorin, i cili do t'i lejojë partnerët të bëjnë redaktime në bisedat që tashmë janë ngarkuar. Sepse një përfitim i bisedave të ndërmjetësuara në nivel lokal nga partnerët e Cortico-s është se pjesëmarrësit e atyre bisedave shpesh ndihen mjaft të rehatshëm për të ndarë çdo gjë nga opinionet e tyre të sinqerta deri te historitë e tyre të jetës. Por një pasojë e paqëllimshme e pjesëmarrësve që ndihen kaq të relaksuar është se herë pas here dikush do të thotë diçka që do të donin të mos e kishin thënë (p.sh. përbërësi sekret i recetës së famshme të biskotave të vjehrrës suaj). Kështu që mbani një sy për këtë dhe falenderoni Kelly që ndërkohë i bëri këto modifikime!