TALLINNA ÜLIKOOL. Haapsalu Kolledž. Rakendusinformaatika. Hendrik Nõgene HELI SALVESTAMISE VEEBIRAKENDUS KASUTADES WEB AUDIO API T.

Transcription

1 TALLINNA ÜLIKOOL Haapsalu Kolledž Rakendusinformaatika Hendrik Nõgene HELI SALVESTAMISE VEEBIRAKENDUS KASUTADES WEB AUDIO API T Diplomitöö Juhendaja: Andrus Rinde Haapsalu 2017

2 TALLINNA ÜLIKOOL Haapsalu Kolledž Osakond: Rakendusinformaatika Töö pealkiri: Heli salvestamise veebirakendus kasutades Web Audio API t Teadusvaldkond: Infotehnoloogia Uurimuse tasand: Diplomitöö Kuu ja aasta: Juuni 2017 Lehekülgede arv: 33 lk + 2 lisa (2 lk) Referaat: Käesoleva diplomitöö eesmärgiks oli luua veebirakendus, kus oleks võimalik mikrofoniga heli salvestada ja salvestatud heli töödelda. Eesmärgi täitmiseks püstitati järgmised eesmärgid: uurida kuidas on võimalik heli salvestada veebis tutvuda Web Audio API ja varasemate lahendustega otsida Web Audio API teeke heli salvestamiseks ja töötlemiseks luua rakendus Diplomitöö koosneb kahest osast. Esimeses osas antakse ülevaade olemasolevatest rakendustest ning heli salvestamise võimalustest ja vahenditest. Teises ehk praktilises osas kirjeldatakse veebirakenduse arendamist ja tööpõhimõtet. Võtmesõnad: Web Audio API, helitöötlus, heli salvestamine, veebirakendus, mikrofon Säilitamise koht: TLÜ Haapsalu Kolledži raamatukogu Töö autor: Hendrik Nõgene Kaitsmisele lubatud: Juhendaja: Andrus Rinde allkiri: allkiri:

3 TALLINN UNIVERSITY Haapsalu College Department: Applied Computer Science Title: A Web application for recording audio using Web Audio API Science area: Computer Sciences Level: Diploma Thesis Year and month: June, 2017 Number of pages: 33 p + 2 appendix (2 p) Summary: The aim of this Diploma thesis was to create a web application where it would be possible to record audio using a microphone. The following tasks were set up to achieve this goal: explore the possibilities of recording sound on the web research Web Audio API and previous technologies find different Web Audio API libraries for recording and processing audio create an application The Diploma thesis consists of two parts. The first part provides an overview of existing applications and sound recording possibilities and tools. The second part gives an overview of development and working principles of the web application. Key words: Web Audio API, audio processing, audio recording, web application, microphone Deposition The Library of Haapsalu College of Tallinn University Author of the thesis: Hendrik Nõgene signature: Approved for dissertation: Academic advisor: Andrus Rinde signature:

4 SISUKORD SISSEJUHATUS VEEBIPÕHISED TEHNOLOOGIAD HELI SALVESTAMISEKS JA TÖÖTLEMISEKS Heli salvestamise võimalused veebis Olemasolevad helisalvestuse veebirakendused veebis Flash i kasutavad veebirakendused Web Audio API t kasutavad veebirakendused Web Audio API Heli töötlemine Web Audio API s MediaStream API-liides MediaStream MediaStreamTrack MediaStream Recording API-liides Web Audio API teegid Heli salvestamise teegid Heli kodeerimise teegid Heli visualiseerimise raamistikud Adobe Flash ja Web Audio API võimaluste võrdlus HELI SALVESTAMISE RAKENDUSE LOOMINE Serveri konfiguratsioon Heli salvestamine Heli mängimine ja visualiseerimine Heli töötlemise võimalused Salvestatud heli eksportimine Hendrik Nõgene 4

5 2.6. Probleemid rakenduse arendamisel Rakenduse edasiarendamise võimalused KOKKUVÕTE ALLIKAD LISA 1. HELI LÕIKAMINE JA KÄRPIMINE LISA 2. MIKROFONI SISENDI KASUTAMINE VEEBIS Hendrik Nõgene 5

6 SISSEJUHATUS Heli salvestamiseks ja töötluseks on palju erinevaid võimalusi. Operatsioonisüsteemidega on üldjuhul kaasas lihtsamad rakendused, näiteks Windows 10-s Voice Recorder ja Mac s QuickTime Player, millega on võimalik heli salvestada kuid mitte töödelda. Olemas on ka võimsamaid tasuta helitöötlusprogramme nagu Audacity ja Free Audio Editor ning tasulisi helitöötlusprogramme nagu Adobe Audition kuid neid on vaja alla laadida ja installeerida. Võrreldes töölauarakendustega on veebirakendused kättesaadavad kõigile, kellel on ligipääs internetile, nende loomiseks ei ole vaja luua eraldi versioone erinevate platvormide jaoks, faile on lihtsam jagada ja ei ole vajalik midagi arvutisse installeerida. Tarkvara paigaldamine võib kasutajal tööandja arvutis ka keelatud olla ning seega oleks veebipõhine rakendus ainus võimalus. Praegused veebirakendused heli salvestamiseks on enamjaolt loodud kasutades Adobe Flash i. Flash i peetakse aga üsna ebaturvaliseks ning soovitatakse seda mitte kasutada (Kastrenakes, 2015). Flash i hakkab asendama heli salvestuse ning töötluse poole pealt Web Audio API-liides, mille kasutamiseks ei ole vaja ühegi pistikprogrammi (Smus, 2013). Selles töös uurib autor, kas on võimalik luua avatud lähtekoodiga tehnoloogiatega sama võimekat heli salvestamise rakendust nagu on see võimalik olnud Flash ga. Samuti on eesmärk anda ülevaade erinevatest raamistikest, mis tööprotsessi võivad lihtsustada ning teha ülevaade Web Audio API ning Adobe Flash i erinevustest. Loodava rakenduse sihtgrupiks on inimesed, kes tahavad jagada oma salvestatud heliklippe teistega ning inimesed, kes ei saa või ei soovi arvutisse heli salvestamise jaoks eraldi programme installeerida. Selleks on näiteks õpetajad, kelle jaoks on vajalik mõnikord õppematerjalide jaoks heli salvestada. Rakendus võimaldaks ka salvestatud heliklippe vähesel määral töödelda lõigata, kärpida ja lisada lihtsamaid efekte. Samuti integreeruks rakendus mõne pilveteenusega. Hendrik Nõgene 6

7 1. VEEBIPÕHISED TEHNOLOOGIAD HELI SALVESTAMISEKS JA TÖÖTLEMISEKS Järgnevalt annab autor ülevaate heli salvestamise ja töötlemise võimalustest veebis. Tutvustatakse lühidalt varasemaid võimalusi heli salvestamiseks, antakse ülevaade Web Audio API st ja MediaStream API st, võrreldakse Flash i ja Web Audio API t ning antakse ülevaade kasulikest teekidest heli salvestamiseks ja manipuleerimiseks Heli salvestamise võimalused veebis Ainuke võimalus varem veebis mikrofoni sisendina kasutada oli läbi Adobe Flash i või Silverlight i (Bidelman, 2016). Flash s toimis see läbi flash.media.microphone klassi (Adobe, s.a). Silverlight s töötas mikrofon läbi AudioCaptureDevice ning CaptureSource klassi (ondrejsv, 2009). Esimene katsetus standardiseerida heli salvestamine ilma ühegi pistikprogrammita sai alguse aastal 2011 Device API Police Working Group i poolt. Mõte oli kasutada juba olemasolevat HTML <input type= file > elementi. Selleks, et näiteks mikrofoni kasutada oleks pidanud lisama elemendile juurde accept atribuudi. (Bideman, 2016.) <input type= file accept= audio/*;capture=microphone > Koodinäide 1. <input> elemendi kasutamine mikrofoni sisendi kasutamiseks Selle viisi kaudu sai heli salvestada kuid ei saanud lisada efekte ning ei olnud võimalik reaalajas andmeid näiteks võnkekõverana <canvas> elemendile kuvada. See spetsifikatsioon leidis toetust ainult nutitelefonide brauserites. (Bidelman, 2016.) Teine proov oli läbi uue <device> HTML elemendi. See oli mõeldud toetama ka muid seadmeid peale mikrofoni ning veebikaamera ja toetas ka reaalajas toimuvaid sündmusi. Samal ajal tuli aga ka välja JavaScripti põhiline API-liides getusermedia. Opera, kes oli ainsana tegelenud Hendrik Nõgene 7

8 <device> elemendi arendamisega, otsustas lõpetada selle projekti Web Audio API kasuks. Ükski brauser lõppkokkuvõttes <device> elementi toetama ei hakanud. (Bidelman, 2016.) <device type="media" onchange="update(this.data)"></device> <audio id= stream autoplay></audio> <script> function update(stream) { document.queryselector('stream').src = stream.url; } </script> Koodinäide 2. <device> elemendi kasutamine video ja audio jaoks navigator.getusermedia või navigator.mediadevices.getusermedia() on toetatud moodsates brauserites Chrome, Opera, Firefox ja Microsoft Edge. Ainuke moodne brauser, mis hetkel seda ei toeta on Safari. Samuti puudub sellele toetus vanemates brauserites nagu Internet Explorer. Kuna tegemist on üsnagi uue liidesega, mis pole kõigis brauserites samamoodi teostatud, tuleb ära määrata kasutamisel ka eesliide, näiteks navigator.webkitgetusermedia ja navigator.mozgetusermedia. (caniuse, 2017.) navigator.mediadevices.getusermedia({ video: false, audio: true}).then((stream) => { // Olemas }).catch((err) => { // Viga }); Koodinäide 3. getusermedia kasutamine audio voogedastamiseks On olemas ka veel uuem Media Recorder API, mis toetub getusermedia funktsioonile kuid see on hetkel toetatud ainult Firefox ning Chrome brauseris. Selle programmiliidese eesmärk on teha salvestamise protsess lihtsamaks. (W3C, 2017, MediaStream Recording.) Hendrik Nõgene 8

9 Praegusel hetkel on heli salvestamiseks kaks võimalust. Esimene võimalus on saata getusermedia funktsiooni mikrofoni andmevoog edasi Web Audio API le luues uus ScriptProcessorNode objekt meedia allikast. See võimaldab ka reaalajas lisada mikrofoni sisendile efekte. (Flaherty, 2016.) Positiivseks selle lähenemise puhul on, et salvestatud heli saab hiljem ka töödelda, kuna andmed on esitatud 32-bitiste ujukomaarvudena (MDN, 2017, AudioBuffer). Miinuseks on aga see, et salvestatud massiiv tuleb failiformaatidesse kodeerida enne kui kasutaja saab helifaili alla laadida. Selle jaoks on vaja kasutada JavaScript i teeke, kuna see pole just kõige lihtsam tegevus ja läbi veebibrauseri pole seda ka võimalik teostada. Kodeerimine tuleks samuti teostada läbi erineva lõime, mis ülejäänud veebirakendus, kuna tegemist on ressurssinõudliku tegevusega ja võib seega üsna suurel määral aeglustada ülejäänud rakendust. (Wilson, 2014.) Web Worker i kaudu on võimalik luua uusi lõimi, mille peal saab skripte käivitada. Selle läbi on võimalik luua mitmelõimeline arhitektuur, mille kaudu on võimalik mitut tegumit korraga teha ja peaks raskemad ülesanded kiiremaks muutma. (West, 2013.) Web Audio API s aga hetkel spetsiaalne Web Worker puudub. Heli analüüsimise ja töötlemise jaoks on ScriptProcessorNode liides (MDN, 2016, ScriptProcessorNode). Teine võimalus on kasutada MediaStream Recording API t. Selle kaudu on üsna lihtne heli salvestada ja kodeerida, kuna kasutab kodeerimiseks brauseri koodekeid. MediaStream Recording API miinuseks on see, et pole võimalik pääseda ligi heli puhvrile, kuna salvestamise tulemuseks on bloob. (W3C, 2017, MediaStream Recording.) Võimalik on salvestatud heli muuta tagasi toorandmeteks läbi Web Audio API (W3C, 2016, Media Capture and Streams). See on aga kokkuvõttes keerulisem kui teha kogu protsess läbi Hendrik Nõgene 9

10 esimese versiooni ja üldiselt ka mõttetu kuna pole võimalik luua uut MediaRecorder objekti audio puhvrist (Google Groups, 2015). MediaStream Recording API-liidese kaudu lähenemine on hetkel sobibilik pigem sellisteks juhtumiteks, kus helile pole vaja reaalajas efekte lisada ja pole vaja ka hiljem salvestatud heli töödelda Olemasolevad helisalvestuse veebirakendused veebis Hetkel olemasolevad veebirakendused kasutavad peamiselt Flash i kuid leidub ka rakendusi, mis juba kasutavad Web Audio API t heli salvestamiseks mikrofoni kaudu. Autoril ei õnnestunud leida ühtegi veebirakendust, mis töötaks kasutades kliendipoolset Web Audio API t ning võimaldaks vähesel määral audiot töödelda. Kuna hiljuti on tehtud ka muudatusi mikrofoni signaali kasutamise osas, siis peab autor tõenäoliseks, et sellist rakendust hetkel ei olegi Flash i kasutavad veebirakendused Autor leidis, et suurem osa hetkel olemasolevatest rakendustest kasutavad heli salvestamiseks mikrofoni sisendiga Flash i. Näiteks võib tuua lihtsamad rakendused nagu Vocaroo, Online Voice Recorder, recordmp3online, mis võimaldavad heli salvestada ning tulemuse hiljem alla laadida või siis üles laadida serverisse kuid ei võimalda heli töödelda. TwistedWave, on Flash i kasutav veebirakendus, kus heli salvestamine ja ka hiljem töötlemine on võimalik. Selle rakenduse kaudu saab peale salvestamist kasutada lihtsamaid efekte nagu amplituudi muutmine ja heli normaliseerimine. Samuti on võimalik rakenduse kaudu salvestatud heli üles laadida SoundCloud i või Google Drive i. Probleemiks selle rakenduse puhul on, et heli töötlemine teostatakse serveris, mis pole kõige mõistlikum, eriti kui rakendust kasutab palju inimesi. Hendrik Nõgene 10

11 Web Audio API t kasutavad veebirakendused Leidub ka paar üksikut rakendust, mis kasutavad Web Audio API t mikrofoni sisendi salvestamiseks. Näiteks võib tuua rakendused nagu Clyp ja Voice Spice. Need võimaldavad heli ainult üles laadida ja teistga jagada kuid töötlemine pole võimalik. Autor ei leidnud ühtegi Web Audio API t kasutavat veebirakendust, mis võimaldaks ka salvestatud heli töödelda Web Audio API Web Audio API-liides on kirjutatud assembleerkeeles, C s ning C++ s ning pakub funktsionaalsust läbi JavaScript i liidese. Programmiliides on mõeldud töötama kooskõlas ka teiste veebipõhiliste rakendusliidestega nagu XMLHttpRequest (heli failide laadimiseks), canvas (2D graafika kuvamiseks) ning WebGL (3D graafika kuvamiseks). (W3C, 2017, Web Audio API.) Web Audio API peamised omadused on: modulaarne marsruutimine dünaamilised heliefektid helide töötlus voogedastatava sisendi töötlemine ruumiline heli reaalajaline sageduse analüüs Web Audio API tegeleb töötlusega heli konteksti konteineris. Peamised audio töötluse tegevused teostatakse läbi heli sõlmede, mis moodustavad omavahel kokku heli marsruutimise graafi. Ühe konteksti sees võib olla üks või mitu erinevat audio sisendit. Allikaks võib olla näiteks helifail, mikrofoni sisend või siis genereeritud heliefekt. (MDN, 2017, Web Audio API.) Helisõlmed on omavahel ühenduses oma sisendi ja väljundi kaudu ning neil on tavaliselt üks või rohkem allikat. Allikad tekitavad väga väikestes ajavahemikes massiive, mis sisaldavad Hendrik Nõgene 11

12 helitugevusi. Helisõlmede väljundid võivad olla ühendatud mõne teise helisõlme külge, mis võivad modifitseerida helisõlme mingil kujul. Kui helifaili töötlemine on lõpetatud, tuleks see ka ühendada audio konteksti sihtpunktiga, selleks et oleks kasutajal ka võimalik heli kuulda. (MDN, 2017, Web Audio API.) Joonis 1. Web Audio API tööpõhimõte Täpsemalt saab lugeda Web Audio API kohta aastal Tallinna Ülikooli Digitehnoloogiate instituudis kaitstud Kevin Münteri bakalaurusetöös: Heli manipuleerimine veebilehel Web Audio API t kasutades Heli töötlemine Web Audio API s Heli analüüsimine ja töötlemine teostatakse Web Audio API s läbi ScriptProcessorNode liidese. See on oma olemuselt AudioNode objekt, mis on ühenduses kahe puhvriga üks, mis hoiab endas sisendi heliandmeid ning teine, mis sisaldab töödeldud väljundi andmeid. Iga kord kui sisendpuhvrisse andmed saabuvad, hakkab tööle sündmus onaudioprocess, mis lõppeb kui väljundpuhver täidetud on. (MDN, 2016, ScriptProcessorNode.) Sisendi- ja väljundpuhvri suurus on defineeritud loomise hetkel. Esimese parameetrina createscriptprocessornode funktsioonis on puhvri suurus, mis peab olema kahe aste. Puhvri suurust ei ole üldjuhul hea mõte ise defineerida, sest brauser valib ise parima variandi. Teisteks parameetriteks on sisendite ja väljundite arv. Seda liidest hakkab tulevikus asendama Audio Worker, mis töötab juba eraldi lõimes. (MDN, 2016, ScriptProcessorNode.) Hendrik Nõgene 12

13 1.5. MediaStream API-liides Veebipõhise helisalvestuse rakenduse jaoks on vaja kasutada voogandmeid mikrofonist. Seda pole aga võimalik teha kasutades ainult Web Audio API t. MediaStream API-liides on mõeldud kasutamiseks selleks, et saaks kasutada voogedastatavaid andmeid nagu veebikaamera ja mikrofon. Esialgu oli see seotud getusermedia API-liidesega kuid on nüüd üldisem rakendusliides. Sellegipoolest kasutab see rakendusliidese getusermedia meetodit selleks, et tekitada ühendus seadmega. (Manson, 2013.) Kaks põhikomponenti MediaStream API-liideses on MediaStreamTrack ning MediaStream. MediaStreamTrack objekt esindab ühte meedimi tüüpi, mille allikaks on kasutaja seade. MediaStream objekti kaudu grupeeritakse mitu MediaStreamTrack objekti kokku üheks, selleks et oleks seda võimalik salvestada või esitada mõnes meedia elemendis. (W3C, 2016, Media Capture and Streams.) MediaStream MediaStream objekti heliribad on hoiustatud heliribade hulgas. Iga heliriba hulk peab peab sisaldama MediaStreamTrack objekte, mis leiduvad ka heliribade andmevoos. Heliribad ei ole järjestatud selle API-liidese poolt ning õige viis neid täpselt üles leida on läbi oma id väärtuse. (W3C, 2016, Media Capture and Streams.) Iga MediaStream objekt võib endas sisaldada mitte ühtegi või mitu MediaStreamTrack objekti. Kõik heliribad MediaStream objektis sünkroniseeritakse kui nad ette mängitakse, kuid see pole alati kohustuslik, kuna mõnikord pole see võimalik, kuna allikad võivad olla erinevad. Erinevaid MediaStream objekte ei ole omavahel vaja sünkroniseerida. (W3C, 2016, Media Capture and Streams.) MediaStream objektil on sisend ja väljund, mis esindavad kõikide heliribade kombineeritud sisendit ja väljundit. MediaStream objekti väljund kontrollib seda, kuidas objekti kasutajale Hendrik Nõgene 13

14 kuvatakse objekt muudetakse failiks või määratakse näiteks <video> või <audio> elemendi src atribuudiks. Üks MediaStream objekt võib olla väljundiks mitmesse erinevasse kohta. (W3C, 2016, Media Capture and Streams) Uut MediaStream objekti on võimalik luua juba olemasolevast, kui panna olemasolev uue konstruktorisse. Sellisel juhul lisatakse kaasa ka kõik MediaStreamTrack objektid. Selle läbi on võimalik audiot multipleksida. (W3C, 2016, Media Capture and Streams.) MediaStreamTrack MediaStreamTrack on meedia allikas kasutajaagendis, näiteks füüsiline seade, mis on ühenduses kasutajaagendiga. Mitu MediaStreamTrack i võivad olla sama meediaseadme allikaks, näiteks kui kasutaja valib sama kaamera või mikrofoni peale kaht getusermedia funktsiooni kasutust. (W3C, 2016, Media Capture and Streams.) Üks MediaStreamTrack objekt võib olla ka mitme kanaliga, näiteks stereoheli, 5.1 stereoheli või stereoskoopiline video, kus erinevad kanalid on omavahel seotud. Informatsioonile on võimalik pääseda ligi mõnest teisest rakendusliidesest nagu Web Audio API kuid MediaStream otseselt ligipääsu ei paku. (W3C, 2016, Media Capture and Streams.) Andmed MediaStreamTrack objektis pole alati kindlas binaarvormingus - see võib olla lihtsalt andmete voog, mis hetkel seadmest läbi käib. Selle tõttu on võimalik kasutajaagendil muuta meediat nii nagu sobiks kõige paremini kasutaja platvormile. (W3C, 2016, Media Capture and Streams.) MediaStreamTrack objektil on kaks võimaliku arendaja poolt kontrollitavat seisundit ühenduses (live) ja lõppenud (ended). Uus MediaStreamTrack objekt võib olla mõlemas seisundis vastavalt sellele kuidas ta loodi. Näiteks teise lõppenud heliriba kloonimisel on tulemuseks uus heliriba lõppenud seisundiga. Ühenduses seisundis on heliriba aktiivne ning meedia element saab seda mängida. Seisund on kättesaadav objekti readystate atribuudis. (W3C, 2016, Media Capture and Streams.) Hendrik Nõgene 14

15 Samuti on MediaStreamTrack l veel kaks seisundit, mida pole võimalik arendaja poolt kontrollida. Need on vaigistatud (muted) ja vaigistamata (unmuted). Vaigistatud või välja lülitatud heliriba mängib audiot ilma helita, videot musta pildina või siis tühja sisuga. Kui kõik heliribad, mis on seotud allikaga on vaigistatud või välja lülitatud, siis võib salvestamise indikaatori välja lülitada. Kui see pole enam tumm ega välja lülitatud, siis tuleb indikaator jälle tööle panna. (W3C, 2016, Media Capture and Streams.) Vaigistatud ja vaigistamata seisund näitab ära, kas allikas nagu mikrofon, edastab hetkel andmeid. See pole rakenduse kontrollida ning on üldiselt rakenduseväline tegevus, nagu näiteks kasutaja vajutab füüsilist nuppu mikrofonil, mis selle välja lülitab, kasutaja muudab seaded operatsioonisüsteemis, kasutaja lülitab välja heli kogu brauseris. (W3C, 2016, Media Capture and Streams.) MediaStream Recording API-liides MediaStream Recording API-liides koosneb ühest MediaRecorder liidesest, mis võtab andmed MediaStream objektist ja tagastab selle bloobina, et seda oleks võimalik edasi töödelda ning analüüsida või siis kettale salvestada. Andmed edastatakse dataavailable sündmusetöötlejas failivormingus, mille arendaja esialgselt objekti loomisel määras. (MDN, 2017, MediaStream Recording API.) See API-liides toetub getusermedia funktsioonile, et saada veebikaamera või mikrofoni sisendi andmed. Kogu protsess on üsna lihtne: 1. Küsitakse luba kasutada mikrofoni või veebikaamerat läbi getusermedia funktsiooni 2. Luuakse uus MediaRecorder objekt, mis alustab salvestamist 3. Salvestamise lõppedes on andmed saadavad ondataavailable sündmusetöötlejas suure kahendobjektina 4. Tulemuse saab salvestada kettale või siis mängida läbi <audio> või <video> elemendi. Video koodekitest on toetatud VP8, VP9 ning H.264. Audio koodekitest on toetatud Vorbis ja Opus Audio. (Addpipe, 2015.) Hendrik Nõgene 15

16 1.6. Web Audio API teegid Web Audio API t on lihtne kasutada kuid kuna tegemist on üsna madala taseme rakendusliidesega, on mõnede tegevuste, nagu näiteks võnkekõverate genereerimine ning heli kodeerimine MP3 või Ogg failivormingusse keeruline ja aeganõudev. Nende tegevuste lihtsustamiseks oleks mõttekas kasutada olemasolevaid spetsiaalseid teeke Heli salvestamise teegid Veebis heli salvestamise jaoks on üsna palju teeke. Läbi createmediasource ja ScriptProcessorNode heli salvestamise meetodi tundub olevat kõige populaarsem Recorderjs 1. See lihtsustab pisut tööprotsessi mikrofoni andmevoost Web Audio API-liideseni. See kasutab Web Worker id selleks, et heli kodeerida. Probleemiks on selle raamistikuga see, et võimalik on kodeerida ainult WAV failivormingusse, mille tõttu on salvestatud helifailid üsna suured. Selle tõttu leidub samast teegist ka palju teisi versioone, mis töötavad samal põhimõttel kuid on võimalik kodeerida ka MP3 ja Ogg failivormingusse ja saavutada väiksemad failisuurused. MediaStream Recording API t kasutavatest raamistikest on üsna lihtne kasutada teeki MediaStreamRecorder.js 2. See võimaldab salvestada nii heli kui ka videot ning salvestada tulemus kettale. Heli on võimalik salvestada WAV ja Ogg formaadis. See teek töötab ka Microsoft Edge ja Opera brauseris Heli kodeerimise teegid Kuna heli kodeerimine failivormingutesse nagu MP3 ja Ogg on üsna keeruline, on selle jaoks vajalikud JavaScript i teegid. Peaaegu iga failivormingu jaoks on olemas ka üle porditud JavaScript i teek mp3 jaoks lamejs, ogg jaoks Vorbis, FLAC i jaoks flac.js. Neid samu teeke kasutab näiteks töölauarakendus Audacity ning veebipõhine rakendus TwistedWave. 1 Recorder.js MediaStreamRecorder.js - Hendrik Nõgene 16

17 Probleemiks võib tekkida aga ainult mitme koodeki korraga toetamisega, kuna nad on üldiselt üsna mahukad lamejs 155KB, Vorbis 336KB, flacjs 731KB. Seetõttu on raskendatud paljude koodekite toetamine Heli visualiseerimise raamistikud Heli visualiseerimine on oluline audio töötlemiseks, sest see võimaldab kasutajal aru saada helist ilma audiot kuulamata näeb vaikuse kohti, võimalik aru saada, kus heli vaiksem ja kus valjem. Töölauarakendused nagu Audacity ja Adobe Audition ning veebirakendus TwistedWave kasutavad heli visualiseerimiseks võnkekõverat. Heli visualiseerimiseks võnkekõverana on JavaScript s olemas kaks teeki Wavesurfer.js ja Peaks.js. Mõlemad teegid võimaldavad: Kontrollida suumimist Näidata positsiooni heliklipis Navigeerida võnkekõveral Näidata hetkepositsiooni Luua vahemikke võnkekõveral Peaks.js 3 ja Wavesurfer.js 4 kasutavad mõlemad visualiseerimiseks <canvas> elementi. Peaks.js miinuseks on aga see, et pole võimalik reaalajas genereerida võnkekõverat samal ajal kui mikrofon töötab. Wavesurfer.js teegis on see võimalik läbi loaddecodedbuffer funktsiooni. Samuti on Peaks.js palju suurem kui Wavesurfer.js. Peaks.js on 708KB suur, samal ajal on Wavesurfer.js koos pistikprogrammidega 36.5KB suur Adobe Flash ja Web Audio API võimaluste võrdlus Nagu eelnevast näha, pakub Web Audio API kõiki vajalikke vahendeid heli salvestamiseks, esitamiseks ja töötlemiseks. 3 Peaks.js Wavesurfer.js - Hendrik Nõgene 17

18 Adobe Flash pakub läbi Actionscript i: (Adobe, s.a, Basics of working with sound) Laadida väliseid MP3 faile Mängida helifaile Voogedastada helifaile Manipuleerida heli tugevust ja panoraamimist Kasutada faili metaandmeid Kasutada helifaili toorandmeid Dünaamiliselt luua helisid Kasutada kasutaja mikrofoni heli salvestamiseks Selle jaoks pakub Actionscript 3 seitse erinevat klassi: (Adobe, s.a, Understanding the sound architecture) Tabel 1. Actionscript 3 klassid heli manipuleerimiseks (Adobe, s.a, Understanding the sound architecture.) flash.media.sound Heli klass, mis tegeleb heli laadimise ja mängimisega flash.media.soundchannel Klass, mis annab mängitavale objektile võimaluse kontrollida taasesitust. Igal helil on oma SoundChannel objekt. flash.media.soundloadercontext Määrab ära mitu sekundit heli puhverdatakse ning kasutatakse parameetrina heli laadimisel. flash.media.soundmixer Kontrollib taasesitust ning turvalisust kogu rakenduses. Kasutatakse helide kombineerimiseks. flash.media.soundtransform Sisaldab endas väärtusi, mida kasutatakse helitugevuse kontrollimiseks ning panoraamimiseks. flash.media.id3info Sisaldab ID3 metaandmeid flash.media.microphone Klass mikrofoni kasutamiseks sisendina. Objekt kontrollib ise oma sämplimissagedust, võimendust ja muid laadseid omadusi. Hendrik Nõgene 18

19 Web Audio API on võimalik on omaduste poolest sama võimekas kui Adobe Flash. Mõlemas on võimalik luua dünaamiliselt helisid ning salvestada heli välistest seadmetest. Web Audio API toetab ka efekte nagu näiteks madal- ja kõrgsageduse pääsufiltrid (MDN, 2017, BiquadFilterNode). Flash i miinusteks on see, et tegemist on välise pistikprogrammiga, millel on üsna palju probleeme turvalisusega (cvedetails, 2017). Samuti pole Flash s ilma raamistiketa suurt efektide tuge. (Kuppila, 2009.) Flash on aga pisut lihtsam heli salvestamise poole pealt kui heli on vaja ka töödelda, kuna Actionscript 3-s on võimalik otse ligi pääseda mikrofoni voogandmetele, Web Audio API s on vaja need andmed saata läbi ScriptProcessorNode objekti. MediaStream teeb selle aga pisut lihtsamaks. (Imbert, 2013.) Üks suur probleem on veebis heli salvestamisega ka see, et Media Recording API-liidese kaudu salvestatud helid lähevad arvuti mälusse, mitte ketta peale. Selle tõttu on väga suurte heliklippide salvestamine üsna keeruline. (Addpipe, 2015.) Web Audio API puhul on ka vajalik heli salvestamiseks HTTPS ühendus ning kuna Web Audio API kasutab helide laadimiseks XMLHttpRequest i peab veebileht olema hoiustatud üldjuhul serveris Flash i rakendusi on võimalik ka kasutada kohalikus arvutis laadides alla SWF faili. Web Audio API kasuks räägib aga üha enam ka tema kättesaadavus kasutajatele. Web Audio API on koos mikrofoni kasutusega toetatud 72%-l brauseritest ning ilma mikrofoni sisendita 78%-l brauseritest (caniuse, 2017). Samal ajal on praeguse seisuga Adobe Flash installitud 59%-l kasutajatest ning see arv kahaneb pidevalt iga aastaga (gemiusranking, 2017). Hendrik Nõgene 19

20 120.00% Flash'i kasutus Eestis % 80.00% 60.00% 40.00% 20.00% 0.00% Flash-I kasutus Eestis Joonis 1. Flash'i kasutus Eestis (gemiusranking, 2017) Hendrik Nõgene 20

21 2. HELI SALVESTAMISE RAKENDUSE LOOMINE Töö praktilises osas loodi veebirakendus, mis töötab Google Chrome, Firefox, Opera ja Edge brauseris. Kogu veebirakendus on loodud kasutades kliendipoolseid vahendeid, serverit kasutatakse ainult failide üleslaadimiseks kui kasutaja seda soovib. Loodud veebirakendus võimaldab: Salvestada mikrofoni sisendi kaudu heli Mängida salvestatud helifaili veebilehel Kujutada heli võnkekõverana Võnkekõvera osi valida Laadida salvestatud helifail alla Laadida helifail üles serverisse Salvestada helifail oma Google Drive i Kasutada lihtsamaid helitöötluse funktsioone nagu lõikamine, kärpimine, amplituudi muutmine Mängida ja töödelda ainult valitud osasid heliklipis Töölauarakendused nagu Audacity ja Adobe Audition kasutavad ka nuppude jaoks ikoone, et neid oleks lihtsam eristada. Autor kasutab selle jaoks Bootstrap 5 raamistiku, mis võimaldab kasutada palju erinevaid ikoone läbi kaskaadlaadistiku klassi glyphicon. Bootstrap l olid olemas kõik vajalikud ikoonid heli mängimise ja töötluse jaoks, mida see rakendus kasutab. Helid salvestatakse kasutades ainult esimest kanalit. Autor leiab, et pole mõtet toetada stereoheli, kuna peaaegu kõik mikrofonid salvestavad üldiselt ainult ühte kanalit ning inimesed, kellel on stereoheli salvestavad mikrofonid seda rakendust arvatavasti ei kasutaks. Heli failid eksporditakse MP3 failivormingus kasutades eelnevalt mainitud LAME koodekit, kuna autor leiab, et see on kõigile tuttav heli failivorming ja ka peaaegu igal pool toetatud. MP3 failivorming on ka alates aasta aprillist tasuta (Fraunhofer, 2017). 5 Bootstrap raamistik Hendrik Nõgene 21

22 Helitöötluse funktsioonid nagu lõikamine, kärpimine ja amplituudi muutmine valis autor, kuna need on olemas juba olemasolevates rakendustes nagu TwistedWave ja kuna leidis, et ise heli salvestades kasutab neid funktsiooni kõige rohkem. Kuna aga alati ei ole vajalik rakendada efekti kogu heliklipile vaid teatud vahemikule, tuli lisada võimalus vahemike valida võnkekõveral. Efekt nagu amplituudi muutmine on kasulik kui näiteks salvestatud heliklipp on liiga vaikne või liiga valju. Heli lõikamine on kasulik kui on vaja näiteks väike osa eemaldada ja heli kärpimine jätab alles ainult valitud vahemiku. Mõlemad funktsioonid võimaldavad eemaldada üleliigseid heliandmeid. Kuna kasutajale on vajalik võimaldada ka helifailide üleslaadimine oli vajalik seadistada ka server. Diplomitöö on seega esitamise ajal kättesaadav serveris, aadressil Serveri konfiguratsioon Serverina kasutas autor node.js Express 6 raamistiku koos nginx 7 veebiserveriga. Autor otsustas kasutada ka serveri pool JavaScript i, kuna node.js l leidub ka Web Audio API jaoks teeke ning seega oleks võimalus vajaduse korral kasutada ka serveri poole peal Web Audio API t. Selleks, et mikrofoni sisendit kasutada on vajalik näiteks Google Chrome brauseris ka HTTPS ühendus. Kuna autoril puudus domeen, ei olnud võimalik sertifikaadi jaoks kasutada teenust nagu Let s Encrypt ja oli vajalik sertifikaat ise genereerida ja allkirjastada. Autor kasutas selle jaoks openssl teeki. Express rakendus konfigureeriti HTTP server port 8080 peale ning nginx seadistati pöördproksina, mis suunab ka kõik HTTP ühendused HTTPS ühenduse peale ümber. Autor 6 Express raamistik 7 Nginx Hendrik Nõgene 22

23 leidis rakenduse testimise ajal, et faile, mis olid suuremad kui 1 MB ei olnud võimalik üles laadida, kuna server ei võtnud päringuid vastu. Selle probleemi lahendamiseks oli vaja tõsta nginx i konfiguratsioonis client_max_body_count muutuja suurust. Helifailid võetakse Express serveris vastu kasutades multer vahevara teeki. Multer 8 on vahevara, mis on võimeline kliendilt võtma vastu multipart/form-data päringuid. Üles laaditava faili nimi muudetakse suvaliseks kaheksa tähe pikkuseks numbrite ja tähtede kombinatsiooniks ning salvestatakse uploads kausta. Kliendile saadetakse tagasi loodud faili nimi, mille kaudu on võimalik hiljem faili esitada ning alla laadida Heli salvestamine Tegemist on helisalvestamise rakenduse kõige olulisema funktsiooniga ning töö kirjutamise algusfaasis tekkis sellega probleeme. Heli salvestamiseks oli vaja kasutada getusermedia funktsiooni. Kuna aga getusermedia uuem variant on nüüd navigator.mediadevices.getusermedia, siis on vajalik ka kõigepealt kontrollida ära kõik erinevad versioonid sellest, et funktsioon töötaks kõigis toetatud brauserites. Koodi, mis kontrollib erinevate brauserite tuge, leidis autor MDN i artiklist aadressil Kui kasutaja nõustub mikrofoni kasutamisega, siis saadetakse mikrofoni voog edasi AudioRecorder klassile. Kui peaks tekkima mõni viga kasutaja keeldub või kui brauser ei toeta getusermedia funktsiooni, siis kuvatakse kasutajale veateade. AudioRecorder klassis luuakse andmevoost uus MediaStream objekt ning ühendatakse see ScriptProcessorNode ga, selleks et diskreetidele ligi pääseda. ScriptProcessorNode omakorda ühendatakse audio kontekstiga. Lisaks hoitakse mälus muutujat bufferexists, selleks et teada hiljem, kas juba on midagi salvestatud või mitte. Kui kasutaja uuesti soovib heli salvestada, siis küsitakse, kas soovib jätkata juba salvestatud heliklippi või kustutada vana heliklipp mälust. 8 Multer vahevara Hendrik Nõgene 23

24 record(stream) { this.stream = stream; this.source = this.context.createmediastreamsource(stream); this.source.connect(this.processor); this.processor.connect(this.context.destination); } this.bufferexists = true; Koodinäide 4. ScriptProcessorNode objekti ühendamine audio kontekstiga ScriptProcessorNode saadab kõik andmed edasi Worker le, mis hoiustab need massiivi. Worker le saadetakse ainult esimese kanali andmed. Web Worker te kasutamiseks on vajalik luua eraldi fail. Suhtlus Worker ga käib läbi postmessage funktsiooni, mis vahendab sõnumeid peamise skripti ja Worker i vahel. Sõnumid võetakse vastu läbi onmessage sündmusetöötleja. Läbi postmessage funktsiooni pole võimalik edastada JavaScript i objekte. (Bidelman, 2010.) this.processor.onaudioprocess = (e) => { this.worker.postmessage({ command: 'record', buffer: [ e.inputbuffer.getchanneldata(0) ] }); }; Koodinäide 5. Worker'le saadetakse esimesse puhvrisse talletatud diskreetsed andmed Heli salvestamise lõppemisel lülitatakse välja mikrofoni indikaator ning tagastatakse salvestatud andmed. Indikaatori välja lülitamiseks on vajalik peatada kõik MediaStreamTrack objektid MediaStream s. Kuna see ei peata onaudioprocess sündmusetöötlejat vaid saadab sellele tühja informatsiooni, tuleb veel eraldi ScriptProcessorNode eemaldada audio kontekstist. Hendrik Nõgene 24

25 stop() { let tracks = this.stream.gettracks(); for (let track of tracks) { track.stop(); } this.source.disconnect(); this.processor.disconnect(); } this.source = null; this.stream = null; Koodinäide 6. Mikrofoni andmevoo peatamine 2.3. Heli mängimine ja visualiseerimine Kuna heli diskreedid hoiustatakse massiivis eraldi osadena, on vajalik kõik osad kokku liita üheks suureks massiiviks, selleks et saaks võnkekõverat genereerida ning audiot mängida. Selleks luuakse uus Float32Array tüüpi massiiv. Uuest massiivist luuakse siis uus audio puhver, mis laetakse WaveSurfer i poolt läbi loaddecodedbuffer meetodi. let tempbuffer = this.context.createbuffer(1, buffer[0].length, this.context.samplerate); tempbuffer.getchanneldata(0).set(buffer[0]); this.wavesurfer.loaddecodedbuffer(tempbuffer); Koodinäide 7. Puhvri loomine ja laadimine Mängimise osa eest kannab hoolt peamiselt WaveSurfer i teek, mis võimaldab sündmusetöötlejad heli mängimiseks, peatamiseks ning aja kontrollimiseks. Samuti on võimalik läbi WaveSurfer i luua regioone heliklipil. Kuigi see omadus tundub olevat rohkem märgete lisamiseks on seda ka üsna lihtne kasutada ka näiteks heli mängimiseks ainult teatud alas. if (Object.keys(this.wavesurfer.regions.list)[0]) { const currenttime = this.wavesurfer.getcurrenttime(); const region = this.getselectedregion(); Hendrik Nõgene 25

26 if (currenttime > region.start && currenttime < region.end) { this.wavesurfer.play(currenttime); } else { this.wavesurfer.play(region.start); } } else { this.wavesurfer.play(); } Koodinäide 8. Heli mängimine valitud piirkonnas 2.4. Heli töötlemise võimalused Rakendusega on võimalik kustutada valitud osasid klipist (cut) või jätta alles ainult teatud osa (trim). Samuti on võimalik muuta audio amplituuti. Kõikide heliefektide kasutamiseks on vaja vähemalt kolme parameetrit heli puhver, vahemik ning audio kontekst. Kui vahemik pole määratud, siis mõjub efekt kogu heliklipile. Trimmimise ja lõikamise käigus luuakse uus audio puhver ning kopeeritakse andmed vanast puhvrist ümber vastavalt valitud vahemikule. Amplituudi efekti puhul muudetakse juba olemasolevat puhvrit. Amplituudi efekti puhul avatakse ka modaalaken, kus on võimalik täpsemalt ära määrata detsibellid. Amplituudi efekti puhul arvutatakse ka maksimum mõistlik väärtus, kuna kõik diskreet väärtused peaksid jääma -1 ja 1 vahele. Kasutajal on võimalik see soovitus välja lülitada. let highest = 0; for (let i = this.getbufferstart(); i < this.getbufferend(); i++) { if (Math.abs(this.buffer[i]) > highest) { highest = this.buffer[i]; } } return 20 * Math.log10(1 / Math.abs(highest)); Koodinäide 9. Kõrgeima mõistliku amplituudi suurenduse väärtuse leidmine Hendrik Nõgene 26

27 2.5. Salvestatud heli eksportimine Kasutajal on heli eksportimiseks kolm võimalust laadida alla oma arvutisse, laadida üles serverisse või siis salvestada oma Google Drive i. Helid salvestatakse MP3 failivormingus kasutades LAME koodekit. Kodeerimine toimub eraldi lõimes, et vältida kasutajaliidese aeglustumist. Kodeerimise lõppemisel luuakse uus bloob, mida on ka võimalik alla laadida. Faili üleslaadimisel luuakse uus FormData objekt ning suur kahendobjekt saadetakse POST päringuga serverisse. Peale üleslaadimist saadetakse kasutajale tagasi ka faili asukoha aadress, et sellele saaks hiljem ligi pääseda. Google Drive i puhul avatakse kõigepealt aken, kus on võimalik kasutajal sisse logida. Peale autentimist omandatakse pääsu luba, mida saab hiljem kasutada failide üleslaadimiseks. Selleks, et võimalik oleks kasutada Google Drive API t oli vaja eelnevalt omandada oma rakendusele clientid. clientid saamiseks oli vajalik Google API Console s luua uus projekt ning valida projektis valik OAuth Client ID Probleemid rakenduse arendamisel Peamised probleemid tulenesid sellest, et WebAudio API ja getusermedia rakendamine erineb üsna palju brauserite vahel. Omadused, mis on olemas ühes ei pruugi olla alati teises ning seetõttu peab iga muudatust kontrollima kõigis brauserites. Näiteks on võimalik Google Chrome brauseris ligi pääseda MediaStream objektidele läbi createmediastreamsource loodud muutuja kaudu kuid pole Firefox s. Samuti luues uut audio puhvrit on vajalik Firefox brauseris puhvri suurusena sisestada täisarv, sest muidu võib tekkida teatud olukordadel viga massiivi indeks väljaspool piire. Seda probleemi Chrome brauseris ei ole. Edge veebilehitseja erineb samuti pisut teistest. Kodeeritud kahendobjekti alla laadimiseks on vaja kasutada funktsiooni mssaveblob, mis töötab ainult Edge s, teised brauserid kasutavad createobjecturl meetodit. Edge tundub olevat ka teistest brauseritest aeglasem audio kodeerimine võttis peaaegu kolm korda rohkem aega kui teistes veebilehitsejates. Hendrik Nõgene 27

28 Pisut raskusi oli ka Google Drive i integratsiooniga, kuna ametlik dokumentatsioon oli JavaScript i kohta üsna kehv. Autentimise näide, mis API lehel üleval oli ei töötanud ning puudusid ka näited failide üleslaadimiseks. Töötava näite leidis autor lõpuks Google Drive i GitHub i lehelt Rakenduse edasiarendamise võimalused Tulevikus oleks võimalik lisada veebirakendusele juurde kasulike efekte nagu näiteks müra vähendamine ja eemaldamine. Kuna avatud lähtekoodiga programmis Audacity on need efektid juba olemas, oleks võimalik kood C++ st JavaScript i ümber kirjutada. Arenduse poole pealt saaks lisada juurde automatiseeritud testid, mis teeksid programmi testimise pisut lihtsamaks. Google Chome s on see võimalik kasutades käsurea valikuid --usefake-ui-for-media-stream, mis lülitab välja nõusoleku küsimise ning --use-fake-device-formedia-stream, mis edastab suvalisi voogandmeid. Firefox s on vaja kasutada getusermedia funktsioonis muutujat fake:true ja sätetes sisse lülitada valik media.navigator.permission.disabled:true. (Hancke, 2014.) Hendrik Nõgene 28

29 KOKKUVÕTE Üha enam rakendusi on muutumas veebipõhiliseks. Rakendused nagu Skype ja Office, mis varem olid töölauarakendused on nüüd kättesaadavad ka veebis. Veebirakendused on kasulikud, kuna nende kasutamiseks ei ole vaja midagi installeerida. Hetkel veebirakendused heli salvestamiseks on üldiselt tehtud kasutades Flash i, mis on tänaseks üsna ebaturvaline ja ka halvemini toetatud kui Web Audio API. Autori eesmärk oli luua veebirakendus, mis kasutaks Web Audio API t ning kus oleks võimalik heli mikrofoni kaudu salvestada ja ka tulemust töödelda. Selle jaoks tutvus autor varasemate rakendustega ning uute tehnoloogiatega nagu Web Audio API ja MediaStream API. Diplomitöö tulemusena selgus, et on võimalik luua heli salvestamise rakendus, kasutades vabavaralisi vahendeid ja Web Audio API t. Heli salvestamise rakendusel on mõned piirangud - pole võimalik kodeerida heliklippe ilma väliste teekideta, heli salvestatakse mälusse ja on vajalik HTTPS ühendus. Samas on aga Web Audio API ga palju võimalusi heli töötlemiseks. Võimalik on ligi pääseda heli puhvrile ning samuti lisada salvestatud heliklipile efekte, mida polnud võimalik teha isegi Flash s. Leidub ka teeke nagu Wavesurfer.js, recorder.js ja lamejs, mis tööd oluliselt lihtsustavad. Diplomitöö praktilises osas loodi veebirakendus, mis võimaldab heli salvestada, töödelda ja eksportida MP3 failivormingus. Salvestatud faile on võimalik alla laadida, üles laadida ning salvestada Google Drive i. Autoril on kavas arendamist jätkata lisades rakendusele juurde efekte. Hendrik Nõgene 29

30 ALLIKAD Addpipe. (2015). HTML5 s Media Recorder API in Action on Chrome and Firefox. [2017, aprill12]. Adobe. (s.a). Basics of working with sound. [2017, aprill 13]. e3d118a9b d27.html Adobe. (s.a). Microphone - AS3. [2017, aprill 7]. html Adobe. (s.a). Understanding the sound architecture. [2017, aprill 13]. e3d118a9b d26.html Bidelman, E. (2010). The Basics of Web Workers. [2017, mai 4]. Bidelman, E. (2016). Capturing Audio & Video in HTML5. [2017, aprill 7]. Can I use. (s.a). Can I use getusermedia?. [2017, aprill 10]. Cvedetails. (2017). Adobe Flash security vulnerabilities. [2017, aprill 13]. Player.html Hendrik Nõgene 30

31 Flaherty, D. (2016). AudioRecorder Walkthrough: Web Audio, WebRTC, and Web Workers. [2017, mai 4]. Fraunhofer. (2017). mp3. [2017, mai 8]. gemiusranking. (2017). Flash Player. [2017, aprill 11]. Google Groups. (2015). MediaStream Recording. [2017, mai 4]. Hancke, P. (2014). Automated testing of WebRTC applications. [2017, mai 8]. Imbert, T. (2013). From microphone to.wav with: getusermedia and Web Audio. [2017, aprill 14]. Kastrenakes, J. (2015). Adobe is telling people to stop using Flash. [2017, mai 7]. Kuppila, A. (2009). SoundFX, out-of-the-box audio filters with actionscript 3. [2017, mai 4]. Manson, R. (2013). Getting Started with WebRTC. (2. Chapter). MediaStream API. [2017, aprill 12]. Hendrik Nõgene 31

32 MDN. (2016). ScriptProcessorNode. [2017, aprill 11]. MDN. (2017). AudioBuffer. [2017, mai 4]. MDN. (2017). BiquadFilterNode. [2017, mai 8]. MDN. (2017). MediaDevices.getUserMedia(). [2017, mai 9]. MDN. (2017). MediaStream Recording API. [2017, aprill 12]. MDN. (2017). Web Audio API. [2017, aprill 11]. ondrejsv. (2009). Audio recorder Silverlight 4 sample. [2017, aprill 7]. Smus, B. (2013). Web Audio API. O'Reilly Media. W3C. (2015). Web Audio API. [2017, aprill 5]. W3C. (2016). Media Capture and Streams. [2017, aprill 12]. W3C. (2017). MediaStream Recording. [2017, aprill 10]. Hendrik Nõgene 32

33 West, M. (2013). Using Web Workers to Speed-Up Your JavaScript Applications. [2017, aprill 11]. Wilson, C. (2014). Explaining Web Audio s new Audio Worker. [2017, aprill 11]. Hendrik Nõgene 33

34 LISA 1. HELI LÕIKAMINE JA KÄRPIMINE // Lõikamine static cut(buffer, region, context) { const duration = buffer.duration; const samplerate = buffer.samplerate; const startoffset = Math.floor(region.start * samplerate); const endoffset = Math.floor(region.end * samplerate); const endbit = Math.floor(duration * samplerate - endoffset); const regionlength = Math.floor(startOffset + endbit); let result = context.createbuffer(1, regionlength, samplerate); let temparraystart = new Float32Array(startOffset); let temparrayend = new Float32Array(endBit); buffer.copyfromchannel(temparraystart, 0, 0); buffer.copyfromchannel(temparrayend, 0, endoffset); result.copytochannel(temparraystart, 0, 0); result.copytochannel(temparrayend, 0, startoffset); } return result; // Kärpimine static trim(buffer, region, context) { const duration = buffer.duration; const samplerate = buffer.samplerate; const startoffset = Math.floor(region.start * samplerate); const endoffset = Math.floor(region.end * samplerate); const regionlength = endoffset - startoffset; let result = context.createbuffer(1, regionlength, samplerate); let temp = new Float32Array(regionLength); buffer.copyfromchannel(temp, 0, startoffset); result.copytochannel(temp, 0, 0); } return result;

35 LISA 2. MIKROFONI SISENDI KASUTAMINE VEEBIS if (navigator.mediadevices === undefined) { navigator.mediadevices = {}; } if (navigator.mediadevices.getusermedia === undefined) { navigator.mediadevices.getusermedia = function (constraints) { var getusermedia = navigator.webkitgetusermedia navigator.mozgetusermedia navigator.msgetusermedia; if (!getusermedia) { return Promise.reject(new Error('getUserMedia is not supported in this browser')); } return new Promise(function (resolve, reject) { getusermedia.call(navigator, constraints, resolve, reject); }); } } navigator.mediadevices.getusermedia({video: false, audio: true}).then((stream) => { audiorecorder.record(stream); $('#war-record').html('stop Recording'); }).catch((err) => { log(err); }); (MDN, 2017, MediaDevices.getUserMedia()).