SAM ЗЯЛЁНЫ: Прывітанне, усім. Сардэчна запрашаем на наш семінар. Мяне клічуць Сэм. Х'ю Забріскі: Я Х'ю. SAM ЗЯЛЁНЫ І мы збіраемся казаць сёння аб JavaScript і API вэб-аўдыё. Проста, каб пачаць, гэта накід нашага парадку дня семінара. Мы збіраемся пачаць з размовы аб чаму вы павінны быць зацікаўлены ў Сеткі Аўдыё API, чаму JavaScript мову трэба для яго, а затым гаварыць аб JavaScript essentials-- так як, хадзіць вас праз некаторыя Асновы мовы, а затым гаварыць аб аўдыё API на высокім узроўні. Затым, Х'ю буду казаць аб некаторых з этапаў вытворчасці аўдыё а затым дэма гэты дзіўны секвенсор Праект ён пабудаваў і паказаць вам код. А потым, у нас будзе час для пытанні ў канцы для людзей хто тут жыве. 

Х'ю Забріскі: Прахладны. 

SAM ЗЯЛЁНЫ: Прахладны. 

Х'ю Забріскі: Прахладны. Я рэзервовага капіявання. 

SAM ЗЯЛЁНЫ: Такім чынам, першае, што ў першую чаргу. Так адзін з вялікіх рэчаў аб Web Audio API з'яўляецца тое, што няма ніякага набору да неабходнасці. Ён пастаўляецца убудаваная ў большасць сучасных браўзэраў, у тым ліку Chrome, EDGE, у цэлым куча others-- ўсіх тых што вялікія ўчасткі людзі выкарыстоўваюць сёння. Так што там няма ўстаноўкі, у баку ад проста атрымліваць вэб-сервер адбываецца, для Вы для пачатку працы на вашым праекце, які з'яўляецца вялікім. 

Мы рэкамендуем даволі моцна, што вы лічыце з дапамогай Chrome для Вэб-распрацоўкі JavaScript, толькі таму, што яго распрацоўніка інструменты сапраўды моцныя. У якасці прыкладу толькі тое, што мы маем на ўвазе кажучы адкрыць свой JavaScript console-- калі вы ідзяце ў Chrome і вы паглядзіце на любы вэб-старонцы, і вы пстрыкніце левай кнопкай мышы Агледзіце элемент, а затым Вы ідзяце ў гэтай маленькай расчыняецца спісе прама тут і націску на кансолі, вы ўбачыце, што адкрывае выглядае шмат, як у камандным радку, што вам маглі б бачыць на вашым Mac, або на ID. І проста так, мы можам тып каманды тут, як Clear, і іншыя каманды, як, што. Мы можам ствараць зменныя, а мы ўбачым пазней у JavaScript. І таму ўсе, што мы можам зрабіць у JavaScript, мы можам зрабіць з кансолі, і гэта супер зручны спосаб пачаць гуляць з API, і асвоіцца з JavaScript з месца ў кар'ер. Няма неабходнасці набор ўверх, якая на самай справе прыемна. Прахладны. Высокі. 

Так што проста яшчэ адна рэч, каб дадаць. Калі ў вас ёсць questions-- ёсць многія з вас, хто не тут жыць, не саромейцеся, пішыце us-- гэтыя нашы адрасы электроннай пошты. Калі ў вас ёсць пытанні Вы не хочаце, каб спытаць нас, як, о, я ёсць памылка у маім кодзе, ці нешта гэта крыху больш канкрэтным, можа быць, Google у першую чаргу. Ёсць шмат вялікіх рэсурсаў аб Web Audio API там. Гэта сапраўды добра дакументальна, і гэта з'яўляецца выкарыстоўваецца тона людзей у прамысловасць, і людзі, якія проста будаўніцтва прышпільных рэчаў для сябе. Так не павінна быць шмат рэсурсаў там. Высокі. 

Крута, дык чаму вэб-Аўдыё API? Гэтая схема трохі з эвалюцыі шляху гук у Інтэрнэце вырас на працягу доўгага часу. BGSOUND быў, як у арыгінальнай HTML тэга што Internet Explorer выкарыстоўваецца для падтрымкі. Гэта дазволена толькі для даволі простых гукаў, функцыянальнасць не вельмі надзейныя, і вы не маглі б зрабіць складаней паслядоўнасці, ці кантраляваць, калі гук пачаў і спыніўся вельмі рашуча. Такім чынам, гэта не было асабліва добра развітая. Затым, пасля таго, флэш- прыйшоў along--, якія Я ўпэўнены, што вы, хлопцы, усе знаёмыя з Flash-- можа быць, ня як яна працуе, але вы, вядома бачыў. Вы павінны абнавіць свой флэш- Plug-у, усе такога роду рэчы, і што, безумоўна, пашырыў спектр функцыянальнасці, які быў даступны. Але зрабіць карыстачу ўсталяваць убудова, безумоўна, Недахоп у тым ліку Flash, у вашым дадатку, ці не так? Таму што тады вы на ўтрыманні Карыстальнік адбываецца і знайсці гэты убудова, і, верагодна, ператвараецца ад гэтага дадатковы крок яны павінны зрабіць, каб выкарыстоўваць ваша прыкладанне. А потым можа быць абнаўленне што зламаю ўсю вашу заяўку, і заканчвае тым, што кашмар для распрацоўніка, таксама. Так што было барыкада. 

А потым пасля гэтага прыйшлі разам, HTML-тэг аўдыё, які з'яўляецца асаблівасцю больш сучаснай HTML-- якія вядома, дазволіла нашмат больш рэчаў, але нават тое, што вы маглі б зрабіць былі трохі абмежаваныя толькі у выніку рэчаў што HTML-здольны. Таму, калі JavaScript API, вэб-аўдыё API, стаў стандартам практыкаваць ва ўсіх браўзэрах, што на самой справе пашырылі набор магчымасцяў для распрацоўнікаў каб сапраўды атрымаць у будынку цікавы матэрыял для Інтэрнэту. Доўгі час быў былі сапраўды надзейныя інструменты для родных аўдыё-прыкладанняў, like-- кожны ведае, GarageBand, і тое, відавочна, ёсць больш прафесійныя аўдыё змешвання прыкладання, і што такое. Але не было ні сапраўды добры Cloud-- ня Воблака, так, я думаю, Cloud-- вэб-платформа што дазволіць распрацоўнікам ствараць прыкладанні для людзей зрабіць міксавання аўдыё. І, як ён пакажа вам Праз Web Audio API дазваляе вельмі магутны рэчы, каб здарыцца на самай справе проста, які з'яўляецца даволі халаднавата. Дык вось інструкцыя, чаму вы павінны дагледзець семінара, у асноўным. 

А цяпер, я збіраюся казаць пра некаторыя JavaScript-- толькі асноўныя элементы мовы, так што мы можам быць на той жа старонцы калі мы гаворым пра API трохі пазней. Прахладны. 

Так, гэта кароткі выклад. Я забыўся гэта было тут. Так. 

Х'ю Забріскі: Там гэта дзве горкі тут. 

SAM ЗЯЛЁНЫ: Гэта кароткае некаторыя з абмежаванняў з іншых абавязковых, старымі метадамі. І то зараз, у нас ёсць гэтыя рэчы. Прахладны. Высокі. 

Так, асновы JavaScript. Перш-наперш, ёсць даволі значная розніца У JavaScript у параўнанні з мова, як C, у шляху што зменныя ствараюцца. Такім чынам, у C, мы прывыклі да таго, ўвесці нашы зменныя, праўда? І я не маю на ўвазе тып як увядзіце іх, я маю на ўвазе тып як прысвоіць ім значэнне type-- да т.п., INT, паплавок, паўкокс. У C, мы сапраўды выкарыстоўваецца для таго, каб стварыць зменную а затым прытрымлівацца гэтага тыпу для Увесь час, што мы выкарыстоўваем гэтую зменную. І гэта не абавязкова горш, але гэта, верагодна, складаней ў выкарыстанні. Адзін з цікавых функцый з JavaScript з'яўляецца што зменныя, што называецца "дынамічна тыпізаваных", які азначае, што я магу стварыць Пераменная з гэтым сінтаксісам, varX роўная 5, напрыклад. Гэта першапачаткова стварае цэлае переменная-- прама пад капот somewhere-- але я можа змяніць гэтую зменную для абазначэння радкі нічога не робячы, як стварэнне новай зменнай. Я не трэба турбавацца аб змене тыпу. JavaScript ведае, што тып-х змянілася, і што адбываецца дынамічна. 

Так, ёсць перавагі і недахопы, што, а хто-небудзь, хто працаваў у JavaScript на некаторы час, магчыма, ведаеце. Ёсць часы, калі Вы маглі б выпадкова змяніць тып зменнай і ня справіцца, што змяненне тыпу, і тады ваш JavaScript можа crash-- або выключэнне быць кінутыя, таму што вы будзеце мець няправільны тып, калі вы чакаеце адзін тып. Прахладны. 

Так, scoping-- які, як, калі мы памятаю раннія тыдня ў курсе, ставіцца да таго, як бачнага зменнай ёсць і ў якой вобласці кода. Усё, што выглядае вельмі падобна каб, як яна выглядае ў С. Так зменныя вобласці бачнасці, як правіла у фігурныя дужкі ўнутры функцыі, а затым Ёсць таксама глабальна кантэкстныя зменныя, якія are-- калі вы пішаце зменную па-за функцыі, ён будзе бачны ва ўсім тэксце. 

Адно з адрозненняў паміж JavaScript і C у прыватнасці, з'яўляецца тое, што, калі вы абвясьцеце глабальнай Пераменная дзе-небудзь у тэкставым файле гэта відаць у любой функцыі у гэтым тэкставым файле. Гэта правільна, дакладна? 

Х'ю Забріскі: Так. 

SAM ЗЯЛЁНЫ: Дык гэта таксама няшмат трохі напалоханы, у параўнанні з C, дзе мы заўсёды былі, каб нашы вызначэння зменных вышэй месцах яны былі выкарыстаныя. Гэта не правіла, што гэта выкананне больш, так што, трохі адрозніваецца. І зноў толькі, каб яшчэ раз падкрэсліць, Глабальны супраць мясцовага variables-- вельмі падобны на C. Вы маглі б дзве зменныя з тым жа імем, і ёсць адзін з іх назваў зацяняць па лакальнай зменнай, калі адзін з іх быў глабальным. Так што, падобна выгляд праблемы, якія некаторыя з вас магчыма, сутыкнуліся з у некаторых вашай праблемы ўсталёўвае гэтага часу. Крута, так што зменныя. 

Кіраванне патокам, гэта значыць, як, калі-else-- лагічна stuff-- і завесы. Такім чынам, каб пачаць з, гэта тое, што, калі-інакш заявы выглядаюць як у JavaScript. Размяшчэнне розных рэчаў на лініях, не важна. Гэта толькі адзін з канвенцый за тое, як мы структуры кода. Гэтак жа, як у C, у нас ёсць "калі", дужка заяве. Гэта не тое, што я меў на ўвазе, каб зрабіць. Я зрабіў гэта зноў. 

Х'ю Забріскі: Спроба выйсці? SAM ЗЯЛЁНЫ: Не, я проста спрабуе павялічыць. Гэта не мае значэння. 

Так, у нас ёсць ", калі" заяву і мы маем ўмова ўнутры яго , Якое вылічаецца ў сапраўднае або ілжывае, і што вызначае, ці з'яўляецца мы ўваходзім у гэты блок кода. І таксама, мы маем яшчэ-калі і яшчэ, як мы прывыклі ў С. 

Вы таксама павінны быць вельмі камфортна з месца ў кар'ер з завес, таму што яны таксама выглядаюць шмат, як C выглядае. Але вы заўважыце, што мы зноў ёсць, замест таго, INT ініцыялізацыі, у нас ёсць VAR ініцыялізацыі. І я думаю, вы павінны быць асцярожным, каб зрабіць што вы не зменіце значэнне з I ад Int ў радок, напрыклад, таму што гэта будзе выклікаць дзіўныя паводзіны вы не можаце чакаць. Але гэта павінна выглядаць вельмі знаёма, як добра. 

Так што гэта, дзе рэчы пачынаюць атрымаць крыху розуму ў JavaScript для каго-небудзь, хто збіраецца ад А фон С. Ёсць функцыі у JavaScript, і ёсць адзін са спосабаў абвясціць функцыю, якая выглядае роду аналагічныя C, і гэта значыць яшчэ адзін, які выглядае трохі адрозніваецца. 

Першая версія, якія мы можам бачыць тут, гэта свайго роду C-як, дзе мы кажам, гэта функцыя, даць яму імя, дайце колькасць аргументаў, і затым змесціва функцыі перайсці ўнутры гэтых фігурных дужках. Мы бачым прыклад Аргументы За секунду. 

У той час як на наступным радку, мы бачым, ах, вось пераменная называецца "туРипсЫоп," і мы раўняцца яго на гэта агульны thing-- function--, што здаецца, не маюць нічога адбываецца. Прычына таго, што адрозніваецца чым З, што JavaScript гэта тое, што называецца функцыянальны мову, ці мае функцыянальныя элементы, а гэта азначае, што функцыі фактычна з'яўляюцца значэння. А гэта значыць, што мы можам усталяваць пераменная роўным функцыю а затым перайсці гэтую функцыю вакол, перадаць яго ў якасці аргументу, зрабіць усё віды рэчаў так з функцыямі. 

Яшчэ адна рэч, каб note-- функцыі напісаны з вызначанай колькасцю аргументаў. Мы бачым прыклад функцыі з аргументам на наступным слайдзе. Але ў JavaScript ня будзе крычаць на вас, калі вы паспрабуеце выкарыстоўваць функцыю з няправільнае колькасць аргументаў. Гэта будзе проста зрабіць усё магчымае, каб зрабіць, гэта азначае, што, калі вы праходзіце, Вы выклікаеце функцыю, што чакае Аргумент без аргументу, усё, што адбудзецца гэта будзеце рабіць усё магчымае, каб паспрабаваць выканаць гэты код, і калі ён у канчатковым выніку працуе у выключэнне або памылку, гэта кіну гэта выключэнне і проста трымаць going-- які з'яўляецца толькі адным з спосабаў што JavaScript працуе. Так. 

АЎДЫТОРЫЯ: Што адбудзецца, калі ёсць занадта шмат аргументаў? SAM ЗЯЛЁНЫ: Так Пытанне было, што адбываецца калі ёсць занадта шмат аргументаў? І адказ, што JavaScript будзе проста ігнараваць тыя, якія пасьля тых, якія мяркуецца. Гэта паспрабую выканаць функцыю патэлефанаваць, як быццам гэта было толькі першыя два. Дакладна? 

Х'ю Забріскі: Гэта дакладна, так. Аналагічным чынам, калі занадта мала аргументаў, гэта толькі збольшага дае нуль, каб усе Аргументы гэта не мае значэння для. 

SAM ЗЯЛЁНЫ: Які можа на самай справе быць зручна, калі вы хачу напісаць функцыю, якая прымае пераменны лік аргументаў. Вы можаце ўсталяваць значэнні па змаўчанні ў вызначэнне функцыі, і ён можа ігнараваць той факт, што ўваходны не існуе. Таму я хачу, каб крыху пагаварыць больш аб гэтым апошняга патрона кропка, якая функцыі значэння. Гэта прыклад, які трохі ашаламляльных калі вы толькі што прачыталі гэта, і не думаю, што пра тое, што адбываецца на працягу секунды. Такім чынам, давайце паглядзім як раз у першая лінія тут. У нас ёсць пераменная, f1, што мы гаворым, гэта функцыя, якая робіць гэтую рэч. І ўтрыманне функцыі якія console.log ("прывітанне"). Вы можаце думаць аб console.log, што і JavaScript эквівалент Printf. Так, што будзе значыць, калі мы запусціць гэты код у нашым браўзэры, гэта будзе раздрукаваць радок. Я магу даказаць, што. АЎДЫТОРЫЯ: Па часопісе, хоць, робіць, што азначае, што гэта запісваецца дзе-небудзь? SAM ЗЯЛЁНЫ: Так. Так што я пакажу вам, што адбудзецца. Такім чынам, пытанне было, ці што лог на ўвазе? 

Х'ю Забріскі: Так console.log гэта як Printf для C. SAM ЗЯЛЁНЫ: Так console.log гэта як Printf, так што калі ў мяне ёсць гэтая console.log ("прывітанне"), і я заклікаю, што радок "прывітанне" друкуецца на кансоль. Гэта кансоль. Гэта проста, як Printf, дзе ён друкуе на стандартны вывад. І мы ўбачым у хвіліну, але гэта на самай справе са спасылкай на аб'ект кансолі, і выклік метаду гэтага аб'екта. Гэта будзе мець больш сэнсу у хвіліну, калі мы дабрацца да гаворым пра аб'екты ў JavaScript, але я думаў, я б проста адзначыць, што. Х'ю Забріскі: Мы выкарыстоўваць у C, right-- мы звычайна пішам вялікую праграму У галоўным рабіць. Але тое, што гэта крута ў JavaScript гэта вы ёсць такі, што перакладчыка працуе ў рэжыме рэальнага часу, так гэта займае ўсяго парадкова, ён можа проста інтэрпрэтаваць, што на месцы. І ён адсочвае рэчы, якія працуюць, перш чым, так што гэта даволі карысны інструмент для выкарыстоўваць console.log або кансоль, Як правіла, для проста гуляць вакол з JavaScript. 

SAM ЗЯЛЁНЫ: Так вяртаючыся да гэтага example-- другі радок кода тут даволі ашаламляльным ў маёй галаве. У першы раз я прачытаў гэта, Гэта было падобна, што адбываецца? Так, што адбываецца гэта, гэта Функцыя дэкларацыі гаворыцца, У мяне ёсць функцыя называецца f2 што чакае адзін аргумент, F, і затым выклікае, што Функцыя, F, якія быў прыняты да яго ў якасці аргументу без аргументаў сам. Так, што, магчыма, было заблытаным. Калі мы разумеем гэта, як f2 f1 займае ў якасці аргументу, а затым ўнутры f2, е атрымлівае called-- што азначае што гэта радкі кода, Пасля гэтых двух ліній Код, прыводзіць "прывітанне" друкуецца на кансоль. 

Той факт, што мы можам прайсці Функцыі як значэння каля заканчваецца будучы адным з самых магутныя магчымасці JavaScript у якасці мовы праграмавання. Па-за ўсе з дзіўныя рэчы можна зрабіць, як асаблівасць Мову па шляху што ён робіць рэчы лёгка праграмаваць і дазваляе за тое, што не асабліва добра падыходзіць для сеткі, функцыянальнае праграмаванне і функцыянальнае праграмавання JavaScript аспекты гэта адна з самых магутныя паняцці, існуе ў JavaScript--, калі вы спытаеце мяне. Прахладны. 

Так, наступная рэч. У дадатак да функцыянальным, Ёсць таксама элементы JavaScript якія аб'ектна-арыентаваным, які з'яўляецца адным з самых папулярныя разумныя словы ў інфарматыцы. Аб'ектна-арыентаванае праграмаванне гэта сапраўды папулярная рэч. JavaScript мае версію, што дзе я лічу, што кожны значэнне таксама аб'ект, што азначае, што кожны аб'ект абкручванні разам некаторы колькасць значэнняў. Такім чынам, для значэнняў, якія з'яўляюцца простымі, як цэлы лік, як varX роўная 5, што аб'ект проста абкручванні што адно значэнне. 

Але мы таксама можам ўявіць сабе сітуацыю, where-- мы можам думаць пра сітуацыю ў C дзе мы хацелі зрабіць што-то з структур, напрыклад, што абкручванні некалькі значэння разам і робіць гэта сапраўды лёгка перадаць рэчы вакол. Вось калі аб'ект знаходзіцца ў JavaScript. 

Важна памятаць, калі я кажу, што аб'екты, загорнутыя некаторы колькасць значэнняў разам, які функцыянуе таксама значэння, што азначае, што функцыі могуць таксама ўнутры аб'екта JavaScript. І прычына таго, што важна з'яўляецца тое, што, у той час як мы часта думаць аб выкліку метаду на аб'ект, які папулярнага тэрмін ад аднаго папулярныя аб'ектна-арыентаваныя мовы, адно з адрозненняў у тым, што Усё, што метад у JavaScript з'яўляецца значэнне, якое захоўваецца ўнутры аб'екта што выконвае некаторыя action-- магчыма выкарыстоўваючы іншыя значэнні, якія знаходзяцца ўнутры гэтага аб'екта, але не абавязкова. Такім чынам, вы можаце сабе ўявіць сітуацыю, я думаю, ў трохі вар'яцкай чынам, дзе вы назваць метад аднаго аб'ект на іншы аб'ект, напрыклад. Такім чынам, гэта крыху напалоханы такім чынам. 

І вы можаце таксама змяніць метады якія звязаны з аб'ектам шляхам прысваення, што метад А Новая функцыя, якая таксама даволі адрозніваецца ад іншых аб'ектна-арыентаваныя мовы, дзе калі мы аб'яўляем аб'ект і яго асобнік, мы не можам змяніць метады, якія звязаныя з гэтым аб'ектам больш. Так што гэта даволі розныя. Прахладны. 

Дык вось прыклад, па-першае, аб'екта ў дзеянне. Гэта тое, што называецца агульны аб'ект, які азначае, што ён не мае ніякіх канкрэтнае імя, ці ня ёсьць клас, гэта толькі некаторыя абкручванні значэнняў. І тое, як гэта выглядае, мы павінны гэта знешняя пара фігурных дужак тут што ўказаць JavaScript і казаць, што гэта з'яўляецца аб'ектам. Значэння ўнутры яго з'яўляюцца кожны значэння ўнутры аб'екта, які павінен быць абгорнутыя разам. А ўнутры гэтага аб'екта, мы тады павінны пары ключ-значэнне, дзе ключ ставіцца да імя ад кошту ўнутры аб'екта, а другі side-- насупраць тоўстай кішкі here-- фактычнае значэнне якія павінны быць захаваны. 

Такім чынам, вы бачыце тут, што ў нас ёсць Ключ называецца Fn са значэннем Сэм, варта коска, кажучы на ​​наступным запісу. Затым ключ называецца Л.Н., са значэннем зялёны, варта коска, з наступным "друк", які будзе мець значэнне функцыі што будзе рабіць гэты радок кода. Давайце зробім крок назад і распакаваць, што адбываецца тут. Так што гэта крыху больш складана, і мы бачым нешта новае Ўпершыню. "Гэта" ключавое слова новая рэч мы бачым тут, і што гэта робіць гэта ставіцца да току аб'ект у вобласці, праўда? Таму, калі мы гаворым, гэта паказвае ўвесь шлях назад каб усяго гэтага object-- калі мы робім this.fn, мы збіраемся прайсці ўвесь шлях назад да гэтага аб'екта, перайдзіце да значэння FN і атрымаць Сэм, цягнуць усё гэта шлях таму, прытрымлівацца яго тут, а затым рухацца далей. 

АЎДЫТОРЫЯ: Так што з пошуку, з'яўляецца што зроблена з-за параметру вызначэнне? SAM ЗЯЛЁНЫ: Такім чынам, пытанне было, ёсць пошук робіцца з-за параметру вызначэнне? Так, абсалютна. Што адбудзецца вось, гэта кропка гаворыць на JavaScript, ОК, я атрымліваю некаторы значэнне з гэтага аб'екта з сябе. І тады гэта будзе выглядаць для ўваходу называецца Fn, і калі ён знаходзіць яго, яна верне што value-- так, гэта Сэм. Але я мог бы таксама набралі тое, што не было вызначана тут, і тады было б проста вярнуцца undefined-- якія гэта рэч, якая можа JavaScript рабіць, што можа мець перавагі, але гэта also-- калі вы зробіце памылку друку, гэта можа прывесці да дзіўным памылак. Так што проста спрабуюць знайсці усё, што вы скажыце яму знайсці і гэта не будзе скардзіцца, калі не знаходзіць яго. Гэта проста скажу, я не знайсці яго, а затым рухацца далей. Дык гэта будзе вызначана, плюс прабел, плюс прозвішча. Так. І тады мы бачым, што, калі мы то можа пайсці ўніз і access-- і мы называем tf.print () з дужкамі. Гэта будзе назваць гэта друк Функцыя без аргументаў, праўда? Але калі мы толькі што сказалі, tf.print () кропка з коскі, без дужак, усё, што зрабіў бы гэта выцягнуць з функцыі ад значэння, але на самой справе не назваў яго. Прахладны. Х'ю Забріскі: Павінен мы робім аб'ект? SAM ЗЯЛЁНЫ: Вядома, давайце зробім гэта. Так што я магу рухацца гэта прыкладам для кансолі. Мы можам ўявіць сабе, што ў мяне ёсць аб'ект. Так што гэта просты аб'ект. Гэта аб'ект, які змяшчае два значэння з двума ключамі, два ключавых значэння пар. Так што я магу атрымаць доступ значэнне, якое захоўваецца ўнутры гэтага аб'екта, робячы x.x1, напрыклад, і я атрымліваю 1 спіну. Сапраўды гэтак жа, x.x2, атрымаць, што значэнне назад. 

А цяпер сапраўды класная рэч, я магу на самай справе нешта дадаць да гэтага аб'екту пасля таго як я яго стварыў. Такім чынам, вы можаце сабе ўявіць, давайце у мяне ёсць функцыі. 

Х'ю Забріскі: Вы трэба зрабіць Shift-Enter. 

SAM ЗЯЛЁНЫ: О, гэта раздражняе. Што гэта не падабаецца? Ох. Тут мы ідзем. Прахладны. 

Так што я толькі што стварылі гэтая функцыя, F, што будзе ісці ў плыні аб'ект і раздрукаваць this.x1. Так што, калі я проста патэлефанаваць па п Сам нічога не адбываецца каб гэта адбылося, правільна, таму што няма x1 поле ў аб'екце гэта на ўвазе. Але, калі я скажу x.f = F, а затым я патэлефанаваць x.f (), я збіраюся вярнуцца 1. Гэтая функцыя F цяпер звязана з аб'екта х, які гуляе ключавую называецца x1 звязаны са значэннем 1, таму, калі мы называем this.x1, гэта збіраецца знайсці тое, што ён шукае і быць у стане надрукаваць значэнне з. Дык вось толькі адзін прыклад з роду вар'ятаў рэчаў Вы можаце зрабіць з аб'ектамі ў JavaScript. 

Так што версія была агульная версія, сэнс што мы стварылі аб'ект, выкарыстоўваючы гэты дужкі notation-- абазначэння дужкі, rather-- і гэта зручна, калі мы проста хочам адзін асобнік канкрэтнага аб'екта, але што, калі мы хочам мець больш, чым адзін такога ж роду? І адказ на гэтае пытанне Пытанне ў тым, ці ёсць рэчы, называюцца класамі ў JavaScript, а таксама. Мы можам стварыць функцыю, якая робіць нейкі ініцыялізацыі для замежнага аб'екта, і мы б сказалі, як, мой class-- так імя шматразовай object-- роўная функцыю, якая ўсталёўвае яго. Так што гэта было б эквівалентна каб стварае аб'ект, які было б проста хацеў, фігурная дужка, вул, тоўстай кішкі, гэта радок, кропка з коскі, фігурная дужка. Гэта было б агульнае аб'ект, які мы ініцыялізацыі, з адной розніцай, на Наступныя радкі мы ствараем прататып, які азначае, што гэта ключавы змаўчанні, што дадаць да нашага аб'екту, што мае значэння, пералічаныя тут. Гэта азначае, што, калі я ствараю новы Асобнік гэтага аб'екта MyClass, гэта будзе ўжо ўбудаваных ўнутры гэта значэнне называецца вул і іншае значэнне называецца myPrint, што будзе функцыя. Высокі. 

Выдатна. Такім чынам, апошняе, што кажуць аб JavaScript з'яўляецца тое, што сапраўды карысна для чаго называюцца асінхронныя аперацыі. Асінхронны азначае, што мы можа чакаць які-небудзь аперацыі для завяршэння, перш чым перайсці , Але рухацца далей, пакуль мы чакаем а затым нешта здарыцца пазней. І тое, што я маю на ўвазе, што ёсць, вы Можна ўявіць сабе сітуацыю, у якой Вы адпраўляеце запыт на некаторыя вэб-сервер дзесьці, і ён збіраецца адправіць цябе назад некаторыя вялікі кавалак дадзеных, праўда? І ваш карыстальнік мог чакаць у Тым часам, каб гэта адбылося, і нішто не магло быць адбываецца ў той час. Але гэта не вялікая канструкцыя, праўда? Вы не хочаце, каб вэб-старонкі, каб замарозіць. Што рабіць, калі карыстальнік хоча, каб націсніце на выпадальным меню? Гэта не вялікі шаблон. Замест гэтага, у асноўным, што JavaScript робіць, кажа, ОК, зрабіць гэтую аперацыю асінхронна. Так як, чакаць у фонавым рэжыме, а затым, калі аперацыя выконваецца, выклікаць зваротны выклік function-- выклікаць некаторыя функцыі, у некаторых action--, каб сігналізаваць, што праца нас чакае да канца скончылася. І прычына таго, што гэта супер магутны ёсць, мы можам зрабіць нешта, перадаць аргумент, зрабіць што-то, а затым чакаць, на нешта здарыцца. Затым, калі той нешта завяршае, мы можам назваць зваротнага выкліку. Гэта сапраўды зручна, таму што гэта дазваляе нам зрабіць рэчы з вэб-Audio API, напрыклад, як загрузіць аўдыё файлаў з аддаленага сервера без чакаць Увесь гукавы файл будзе загружаны, што было б на самой справе дрэнна для карыстацкага досведу. Прахладны. 

Апошняя пара адзначае аб адладкі, так як гэта гэта рэч, якую вы будзеце мець, каб зрабіць як частка вашага праекта, гарантаванае. Я згадаў кансоль JavaScript. Гэта супер карысная функцыя ўсіх сучасных браўзэрах, І мы сапраўды рэкамендуем вам атрымаць зручна выкарыстоўваць кансоль, калі вы хочаце атрымаць добрую у JavaScript. Гэта супер зручна для адладкі, але гэта таксама вельмі карысна для высвятлення , Як выкарыстоўваць API. Гэта дазваляе рэальна проста эксперымент без неабходнасці ўводзіць некаторыя Код, а затым кампіляваць яго. Вы не павінны рабіць усё тыя крокі. Вы можаце проста напісаць некаторы код у лінію, а затым атрымаць неадкладную зваротную сувязь на або не тое, што радок кода worked-- вельмі зручна. 

А таксама, толькі адзін тэхнічны note-- кансоль JavaScript з'яўляецца прыкладам з REPL-- так што гэта Р-Е-Р-Л, REPL, які каштуе для чытання, ацаніць, друк цыкл. Вы збіраецеся ўвесці некаторыя рэчы у, гэта будзе чытаць тое, што вы набралі ў, гэта будзе ацаніць яго, і ён будзе друкаваць выхад, а затым зноў пачну. Гэта дазваляе хутка перайсці ў кругі ітэрацыі, што гэта сапраўды крута. 

Я думаю, рэальны паслы note-- гэта з'яўляецца фактычным апошняе заўвага, так. Як мы на самай справе выкарыстаць JavaScript? Такім чынам, спачатку мы можам імпартаваць яго, выкарыстоўваючы тэг сцэнара у верхняй або ніжняй часткі ў HTML file-- у любым месцы ўнутры з HTML файла, на самай справе. І ў тэг сцэнара, ёсць два суб-шляху імпарту JavaScript. Па-першае, шляхам мець асобны файл JavaScript што мы імпартуем ў поўным аб'ёме, або пры наяўнасці плошчу кода, як сцэнар для пачатку, а потым Зваротная касая рыса сцэнар да канца. А потым мы проста напісаць JavaScript ўнутры HTML-файла. Такія два шляхі. Вы не можаце мець яго ўнутры HTML. АЎДЫТОРЫЯ: З'яўляецца адным лепш, чым іншыя? SAM ЗЯЛЁНЫ: Пытанне было, адзін лепш, чым іншыя. Так што, так, як практыка стылю кадавання, а таксама гэта як праектнай практыцы. Ёсць дзве прычыны, чаму гэта можа быць лепш. Першы, гэта робіць ваш код A шмат больш чытэльным, калі ўсе вашы HTML у адным месцы, усе вашы CSS у іншае месца, усе вашы JavaScript знаходзіцца ў трэцім месцы. Дакладна? Я думаю, што мы павінны ўжо казалі Пра гэта ў sections-- як CSS--, што што is-- і ён ідзе Часта ў іншым файле. Так, падобнага роду паняцці тут. Вы таксама можаце сабе ўявіць, што JavaScript будзе выкарыстана на больш чым адзін HTML-старонка, або, магчыма, Вельмі шмат HTML-старонак, і які мае, што JavaScript рэструктураваць ў адзін файл, які можна імпартаваць ў больш чым у адным месцы дазваляе код, які будзе нашмат больш, у суправаджэнні. Вы можаце сабе ўявіць, што робіць адзін змяніць на JavaScript і таго, каб змяніць яго у 100 розных файлаў. І замест таго, што мы можам проста змяніць яго ў адным, што шлях больш магутным. Я адказаў на ваша пытанне? Прахладны. 

Мы таксама можам ўвесці ў кансолі, як мы ўжо згадвалі раней. І зноў, у апошні note-- Web Audio ўбудаваная, Вам не трэба, каб загрузіць што-небудзь. Прахладны. Ёсць якія-небудзь пытанні, у вас ёсць больш пытанняў пра JavaScript, перш чым мы пяройдзем? 

АЎДЫТОРЫЯ: [неразборліва] SAM ЗЯЛЁНЫ: Добра, крута. Так што цяпер ён збіраецца казаць аб API. 

Х'ю Забріскі: Прахладны. Дзякуй, Сэм. 

SAM ЗЯЛЁНЫ: Вядома. Х'ю Забріскі: Высокі, так мы пяройдзем ад JavaScript. Такім чынам, мы ўжо казалі аб некаторых з Асновы JavaScript, і тыя зменныя, функцыі, аб'екты, функцыі, як зменных, асінхронная загрузка. Гэта ўсё, што вы будзеце бачыце, як вы выкарыстоўваць Web Audio. Такім чынам, мы проста пагаворым пра гэта спачатку на высокім узроўні. 

Гэта API, дык гэта тое, што пабудаваны, як сказаў Сэм, прама ў JavaScript выкарыстоўваць у кансолі. І гэта на самай справе гэтак жа, як C ++ код што на самой справе пабудаваны ў Chrome і Firefox, і ўсе гэтыя браўзэры. Такім чынам, галоўная ідэя з Web Аўдыё, што вы павінны гэты від трубаправода аўдыё, праўда? Такім чынам, ваш аудіоданных прыходзіць у той ці іншай форме. 

Ёсць выгляд з трох асноўных forms-- ў вас ёсць генератар, які стварае сінусоіда, косінус хваля, мы збіраемся, каб убачыць, як гэта працуе. Яшчэ адзін вельмі распаўсюджаны, вядома, MP3. Так, можа быць, вы пачынаеце з песня, а затым вы хачу зрабіць некаторую фільтраванне да таго, што і выхад that--, што можа быць магчымым крыніцай. І тады сапраўды выдатна адзін мікрафон. Такім чынам, вы можаце выкарыстоўваць некаторыя вельмі Асноўныя выклікі ў JavaScript каб атрымаць доступ да мікрафон, і таму, калі вы хацеў зрабіць прыкладанне як дэтэктар тоны, напрыклад, што бярэ ў Ваш голас і лічбы з pitch-- вельмі просты спосаб, што. Вы можаце толькі выгляд чытаць у, высветліць частату, а затым выхад лік. Такім чынам, мы будзем бачыць, як гэта працуе, як добра. 

Пункт прызначэння ў асноўным калі аўдыё дадзеныя выводзяцца. Так звычайна, гэта як Вашы ноўтбук дынамікаў. Іншыя варыянты, як ScriptProcessorNode-- мы вернемся да вузлоў у second-- але ў асноўным, альбо вы ставіце гук з з дапамогай кампутара праз дынамікі, ці вы выгляд запісу, таму вы захоўваеце яго як аўдыё-дадзеных. Так можа быць, калі хто-то стварае музыка ў вашым дадатку, а затым Вы хочаце, каб запісаць, што, можа быць, як і экспартаваць яго ў SoundCloud, для example-- што б быць адным з спосабаў, каб зрабіць гэта. Усе цікавыя рэчы, якія мы будзем казаць аб, адбываецца паміж гэтымі двума кропкамі, дзе мы загружаем ў музыцы а затым выводзіць яго. 

Так што я збіраюся казаць пра пяць этапы вытворчасці аўдыё ў секунду. У нас ёсць тое, што называецца AudioContext, што гэта крыху абалонкай мы бачым тут. У асноўным тое, што AudioContext is-- калі мы перайсці да JavaScript кансолі прама цяпер, мы можам стварыць яго прама цяпер. Проста прыклад REPL, праўда? Мы чытанне, ацэнкі, і гэта выводзіць. 

AudioContext гэта глабальнае дзяржава. Гэта структура, гэта аб'ект тут, і ён захоўвае інфармацыю пра рэчы, якія ідуць на На экране, якія адносяцца да аўдыё. Адным з прыкладаў з'яўляецца бягучы час. Гэта кажа вам нумар секунд, вельмі дакладна, з вэб-старонкі загружаюцца. Так што гэта сапраўды карысна трохі уласцівасцяў, якія можна выкарыстоўваць. Гэта чытаў only-- Я думаю, на самай справе Вы можаце паспрабаваць ўсталяваць яго значэнне. Гэта вам скажу ўсталяваць яго, а затым, калі вы раздрукаваць яго again-- гэта на самай справе не зусім праца. Так што толькі для чытання нерухомасць у JavaScript. Гэта сапраўды карысна, калі Вы накшталт сінхранізацыі шмат розных Інфармацыя, калі вы выгляд гуляе розныя гукі. 

Яшчэ адзін вельмі карысны кантэкст прызначэння. Вызначана, калі вы зацікаўлены, то паспрабаваць гэта на свой страх і кансолі справа Цяпер. Так што гэта AudioDestinationNode. У асноўным тое, што гэта гаворыць тым, дзе выхад адбываецца? Такім чынам, ёсць два рэальных варыянтаў тут. Звычайна па змаўчанні гэта толькі вашыя калонкі, так AudioDestinationNode у асноўным толькі кажа ёсць нулявыя выхады да гуку у бліжэйшыя накіраваў спікеру. Так звычайна, вы не павінны гуляць з гэтым. Калі вы зацікаўлены ў самай справе з дапамогай ScriptProcessorNode для запісу, безумоўна здымаць мяне ў электроннай пошце пазней, таму што гэта крыху больш складана. Але ў цэлым, вы проста выгляд выводзіць гук у той ці іншай форме. Так выдатна, мы вярнуцца назад тут. АЎДЫТОРЫЯ: Я прашу прабачэння. Х'ю Забріскі: Так. АЎДЫТОРЫЯ: Я ведаю, вы сказалі, каб пагаварыць Вам пазней аб запісу. Ці можаце вы, што інтэрфейс з Pro Tools? 

Х'ю Забріскі: З Pro Tools? Пабачым. Я не думаю, што так. Так адбываецца паміж кліентам, які з'яўляецца JavaScript Кансоль, і ваш фактычны кампутар, як правіла, тое, што гэта свайго роду з зачыненыя, калі вы будзе, свайго роду па характары the-- гэта свайго роду дызайн рэчы, але вы старайцеся трымаць асобны браўзэр ад фактычнага кампутары карыстальніка. Наогул, адзінае, што вы ў стане доступ мікрафон ці камера. Вы не ў стане, я не думаю, што выкарыстоўваць Pro Tools. Тым не менш, калі вы стварылі трэк ў Pro Tools, экспартуецца, што вы маглі б загрузіць яго тут, фільтраваць, напрыклад, працэс, які і запісваць, што ў Аўдыё Destination-- або no-- Сферу Працэсар Вузел. А потым адтуль, вы маглі б экспартаваць, што SoundCloud, вы можа адправіць яго па электроннай пошце, або што вам падабаецца адтуль. 

Але гэта свайго роду невялікі бар'ер паміж стварэннем музыкі на кампутары і робіць музыку онлайн. 

SAM ЗЯЛЁНЫ: І гэта не толькі ў гэтым API. Гэта функцыя бяспекі Chrome, і Я думаю, што любы іншы сучасны браўзэр. Браўзэр з'яўляецца самадастатковым. Так, напрыклад, вэб-старонка не можа выкарыстоўваць JavaScript, каб уключыць гук на вашы калонкі, напрыклад. Ці ён не можа выключыць кампутар. І няма прамежкавая кропка паміж гэтымі двума рэчамі, права, так што альбо ў вас ёсць поўная абстракцыя, ці вы адкрываеце Бяспеку недахоп дазваляючы праграміст з благімі намерамі зрабіць што яны хочуць з вашага ноўтбука. І вось чаму Хром з'яўляецца самадастатковым. 

Х'ю Забріскі: Так. Ці мае гэта сэнс? Крута, крута. Я проста хачу, каб паказаць прыклад аднаго. Гэта даволі шмат, як далёка, як вы атрымаеце ў плане доступу кампутар карыстальніка. Калі ў вас ёсць клавіятура USB падлучаны, Вы можаце выкарыстоўваць тое, што называецца вэб- MIDI-API, які мы не будзем сапраўды казаць аб тут, але гэта ўжо іншая API, што гэта ўбудаваны ў, па меншай меры Chrome-- раз, гэта чаму мы любім Chrome-- Я думаю, што Firefox або Safari, гэта проста рэч, каб google-- розныя браўзэры маюць адрозніваецца падтрымка якога API-інтэрфейсы яны рэалізаваныя. Але калі вы хочаце, каб падключыць клавіятуру і працаваць з гэтай інфармацыяй, выгляд адпраўкі клавіятуры Інфармацыя да кампутара а затым выкарыстаць гэты онлайн, гэта API дзе вы працаваць, што. 

Прахладны. ДОБРА. Так, хутка рухаецца тут. Як мы робім на час? 

СПІКЕР 1: Аб 15. 

Х'ю Забріскі: 15 хвілін засталося? ОК, крута. Такім чынам, мы ісці наперадзе тут. 

Так у асноўным, галоўным пунктам думаць пра гэта як пра трубаправодзе з'яўляецца тое, што кожны крок у трубаправодзе серыя аўдыё вузлоў. Наша крыніца, скажам, з'яўляецца генератар. Нам трэба стварыць вузел генератара. І гэта толькі збольшага маленькага function-- і ўсе яны заснаваныя з гукавога кантэксце тут. 

АЎДЫТОРЫЯ: Калі сказаў ён генератар, азначае, што гэта на самай справе літаральна пераходзе ад два розных полюса і назад? 

Х'ю Забріскі: Не, гэта як лічбавае прадстаўленне. Гэта на самай справе рэалізаваны ў C ++. Я на самой справе не ведаю, спецыфікацыі пра тое, як ён на самай справе рэалізаваны, але ўсё гэта працуе як двайковыя дадзеныя. На самай справе, так. Гэта было б казаць, я мог на самай справе, калі вы зацікаўлены, Я мог бы паслаць вам крыху больш Інфармацыя пра тое, як сігналаў захоўваюцца якія маюць лічбавы фармат. ОК, крута. 

Такім чынам, мы генерацыі тоны, як сінус хвалі ці нешта падобнае, можа быць, 440 Герц. Мы ствараем генератар. Калі мы хочам, каб усталяваць гучнасць, мы нічога падлучыцца да GainNode, якія мы маглі б зрабіць з .creategain. Гэта ўсталёўвае гучнасць. Вы можаце перадаць, што на любы іншага options-- добра, так што крыніца гуку буфер вузел, дзе вы маглі б захоўваць MP3, што вы загрузілі ст. 

Biquad фільтр для фільтрацыі, калі Вы хочаце, каб прыняць усе падстава з песні, ці нешта падобнае. Не дай Бог вы хочаце прыняць база з песні. І AudioDestination вузел, зноў жа, як, дзе наш финализации. Калі вы калі-небудзь зацікаўлены ў тым, ўсе розныя магчымыя варыянты, проста перайдзіце на ўкладку, і хай аўтаматычнае запаўненне прыдумаць. І калі вы стварыць, вы ўбачыце ўсё розныя рэчы, якія вы можаце стварыць. Вы можаце ствараць дынамічныя Сцэнар працэсары, Я нават не ведаю, што ёсць, для змешвання каналаў зліцця і канал разветвители і ўсё такое. Прахладны. 

Так што гэта проста Прыклад трубаправода. Такім чынам, мы маем тры крыніцы ў бліжэйшыя. Можа быць, гэта сігналы, можа быць, гэта МР3. Адзін адбываецца праз фільтр, яшчэ адзін-х атрымліваць скажаецца іншы сваё панарамаванне налева і направа. Вы можаце зрабіць усё віды рэчаў і усе яны змешваюцца вакол разам, і затым прыбывае аўдыё У рэшце рэшт, у якасці месца прызначэння. Гэта прыклад таго, што больш складаны вэб-код Аўдыё выглядае. Вы ствараеце ўсе гэтыя розныя аб'екты прама here-- Я не ўпэўнены, што гэта. Не, гэта не павялічыць. ДОБРА. 

SAM ЗЯЛЁНЫ: Вы робіце Control, пракруткі уверх. Х'ю Забріскі: Упраўленне Scroll-- SAM ЗЯЛЁНЫ: Не, няма. Control-- 

Х'ю Забріскі: О, кіравання пракруціць? О, Гоча. Так. Нічога сабе, Не, Не. ДОБРА. Я не буду гэтага рабіць. 

Так што, так, у гэты першы раздзел тут, вы бачыце мы ствараем ўсе гэтыя розныя вузлы з кантэксту. Мы проста складаючы іх разам у другой частцы з дапамогай гэтай функцыі пад назвай Connect. Гэта сапраўды ключ функцыя ў Web Audio. Гэта проста азначае, як толькі вы зрабілі то з гукам ў адным вузле, перадаць яго на наступны вузел. Такім чынам, мы маем крыніца, яго падключаецца да аналізатару, аналізатар робіць нешта з ім, яна ідзе да скажэння, і гэтак далей, і да месца прызначэння унізе прама тут. Прахладны. ОК, так што мы будзем працягваць рухацца далей. 

Pipeline-- зноў жа, гэта з'яўляюцца найбольш распаўсюджанымі трубаправодаў, такім чынам, мы гаворым пра ўсе гэтыя рэчы, як скажэнні, панарамаванне, усё гэта дробязі. Калі вы сапраўды зацікаўлены пры дапамозе рэчы Pro Tools, тыя, верагодна, зацікавіць Вас. Калі няма, можа быць, вы проста хачу гуляць гук, ці, можа быць, вы проста хочаце, каб ўсталяваць гучнасць на гук. Тыя, з'яўляюцца двума найбольш распаўсюджаны выгляд трубаправодаў у аўдыё прадукцыі. 

Зноў жа, спосабаў, вы можаце ўзяць яго ў якасці oscillator-- так, давайце зрабіць дэма-версія, што прама тут. Такім чынам, мы збіраемся, каб стварыць просты аўдыё кантэкст тут, і ад, што мы збіраемся каб стварыць наш генератар. Так што, зноў жа, мы проста буду называць Стварыць генератар. Мы збіраемся ўсталяваць частату на што 440 Герц, ўлюбёнец. Затым мы звязваем, што да месца прызначэння point-- які з'яўляецца спікер, так кантэкст прызначэння. Нарэшце, мы проста кажам, пачаць нуля секунд ад цяпер, і мы ўжо гучыць? 

[Званок] 

Х'ю Забріскі: Тут мы ідзем. Гэта проста сінусоіда. ОК, крута. І тады мы будзем спыніць. 

АЎДЫТОРЫЯ: Адкуль што зваротная сувязь прыйшлі? 

Х'ю Забріскі: Зваротная сувязь? О, напэўна, нашы мікрафоны. Так што, так, вось як вы гэта робіце. А на самай справе, калі б я быў трымаў яго працуе, вы можа мець частату значэнне, ён працуе, так што гэта пацешная рэч, каб гуляць вакол. Прахладны. Гэта заўсёды выдатны адзін, каб прадставіць. 

SAM ЗЯЛЁНЫ: Мы не зрабілі думаю пра тое, ці зрабіў? Х'ю Забріскі: Так, што гэта адваротны. Так, буфер loading-- я паказаць прыклад, што ў самым канцы. Вось загрузцы MP3. І мікрафон, можна выкарыстоўваць толькі функцыю называецца Navigator.getUserMedia () каб запытаць доступ да карыстальніка мікрафон для гэтай інфармацыі. 

Вось фільтрацыі, я буду проста рухацца ад гэтага. Гэта даволі высокі ўзровень, але толькі фільтры дазваляюць вам 

[Гукавога сігналу] Фільтраванне таксама дазваляе стварыць такія рэчы, як ружовы шум, карычневы шум, белы шум. Калі вы хочаце стварыць чысты шум, які некаторыя людзі любяць важдацца з, Вы можаце выкарыстоўваць вэб-Audio Фільтраванне зрабіць. 

Аўдыё Panning-- так што ўявіце, калі вы пішаце гульню і вы хочаце, каб гук на здавацца, што гэта ідзе, як, стральба па экране, вы можна выкарыстоўваць панарамаванне гуку Для стварэння такога роду конусу, якія like-- гэта даволі Mathy, але гэта на самай справе вельмі выдатна, калі вы атрымаеце яго працы, і ёсць некаторыя добрыя падручнікі па ёй, я магу адправіць вам. У прынцыпе, вы можаце выгляд з стварэння гуку нешта адбываецца з у 3D чынам. І калі ў вас ёсць цікавасць DJ, вы можаце пачаць змешвання і перасекчы выцвітанні песні. 

Гэта толькі некаторыя вельмі простыя Код, у асноўным тое, што я рабіў раней. Гэта ўсталёўвае аб'ём генератар, такім чынам, мы ствараем нашу генератар які стварае форму хвалі. Мы ствараем нашу GainNode, ўсталяваць наш частату, а затым падлучыць генератар да GainNode, якія затым у асноўным змены колькі сігнал прапускаецца. Але на самой справе, гэта лічбавы рэч, так што гэта больш просто-- так. Гэта не тое, што адбываецца на самай справе, але гэта тое, што адбываецца ў рэальным жыцці з узмацненнем. 

АЎДЫТОРЫЯ: --quantization параметру гучнасці? Х'ю Забріскі: Выбачайце? АЎДЫТОРЫЯ: Гэта квантованный параметр аб'ём? Х'ю Забріскі: Так. І гэта адзінае, што я сапраўды знаходжуся дэфіцытны ў маёй веды, як ўзмацненне працы на лічбавы ўзровень. Я ведаю, з фактычнай Сігналы, гэта ў асноўным кіравання, колькі вы ўзмацнення сігналу. Так што, так. Я пашлю вам больш падрабязную інфармацыю пра што, таму што я на самой справе цікава каб даведацца больш аб тым, што. Але ў асноўным параметры з'яўляюцца, адзін з'яўляецца fold-- гучней signal-- і нуль ня сігнал, ці вы не будзеце чуць гук. Мы прапусціць дэма час, што, паколькі гэта ў асноўным тое, што я рабіў раней. І зноў, Context.Destination з'яўляецца адной вузел прызначэння. Высокі, добра. 

Так што я збіраюся зрабіць хуткі два дэма. Як мы робім на час? 

СПІКЕР 1: Каля 10 хвілін. 

Х'ю Забріскі: 10 хвілін? Выдатна! Высокі. 

Такім чынам, першы я збіраюся рабіць, гэта называецца мая любімая песня. Так што гэта проста трохі HTML JavaScript. Мы збіраемся, каб мець дзве кнопкі на старонцы гуляць маю любімую песню і спыніць маю любімую песню. Я змяніць гэта. 

АЎДЫТОРЫЯ: Вокладка мікрафон. 

Х'ю Забріскі: Так. І я загружаны тут скрыпт, які basically-- і гэта сапраўды карысна для загрузкі ў MP3, так што гэта проста робіць загрузкай файлаў MP3 спосаб хутчэй. Гэта ў асноўным толькі абгортка. Ён проста робіць працэс пагрузкі ў МР3 значна хутчэй, у адваротным выпадку вы карыстаецеся HTTP запыт, накшталт як тое, што мы рабілі на бягучай часткі устаноўленага з серверам. Гэта сапраўды выродлівыя, вы не хачу, каб гэта зрабіць. 

Так гэты хлопец, Барыс Smus, напісаў сапраўды карысна трохі інструмент, званы BufferLoader. Усё, што вам зрабіць, гэта проста перадаць яго на Кантэкст, вы перадаеце яму list-- або, так, гэта спіс у JavaScript? SAM ЗЯЛЁНЫ: масіў. Х'ю Забріскі: О, гэта масіў, што гэта правільна. Гэта масіў шляхоў у розных файлах. І тады вы перадаць яго функцыі. Гэта зваротнага выкліку мы гаварылі а с асінхроннай загрузкі. Гэта будзе называцца Пасля таго як файлы загружаныя. І, што функцыя, якая выклікаецца, калі файл загружаецца прымае ў якасці перыметра масіў загружаных буфераў. Так што тут адбываецца. У асноўным, гэта BufferList будзе адным value-- ці гэта будзе масіў Даўжыня аднаго, які мае ў ім індэкса нуля ўсю загружаную файл у фармаце MP3. Так, што я раблю, калі я скончу загрузка, я проста стварыць крыніцу буфера, які з'яўляецца аўдыё крыніцай вузел буфера. Наступным крокам, я загрузіць у source.buffer як поўны загружанага буфера ад BufferList-- гэта шмат buffers-- а затым падлучыць гэтую аўдыё буфер да месца прызначэння. Так што гэта будзе рабіць проста проста паставіць MP3 прама на выхад, і пачаць яго адразу ж на атрыманне гэтага выкліку. 

Крута, так што давайце паглядзім гэта адбылося ў дзеянні. Мае [неразборліва] тут, давайце паглядзім. Так што я проста хачу, каб пачаць асноўнага сервера. Гэта тое, што Вы павінны зрабіць, калі вы рабіць запыты для загрузкі файлаў. Я збіраюся пачаць асноўнага сервера. Гэта ў асноўным ваш ўвесь PSET цяпер у адным радку, але гэта толькі пачынае сервер на порце 80/80. Так мы ідзем сюды, мы збіраецца загрузіць 80/80, мы збіраемся, каб перайсці да Мая любімая песня. Так што, калі я стукнуў "гуляць Мае любімая песня "прама зараз, ён збіраецца загрузіць мой любімая песня і гуляць it-- [МУЗЫКА - арлы, "Жыццё ў Фаст  LANE "] --which бывае "Жыццё ў Фаст Лейн "на The Eagles. Зараз, я мог ударыць "спыніць мае любімая песня "і перайграць яго. 

[МУЗЫКА - арлы, "Жыццё ў Фаст  LANE "] 

І калі я іду да кансолі, таму што Я выкарыстаў глабальную зменную тут сачыць гэтай велічыні, яго на самай справе цяпер будзе прызнана ў кансолі. Так Ён аўтаматычна стварае для мяне. Дык вось тое, што гуляе зараз, і я магу проста патэлефануеце source.stop () на што. Ну, вы ведаеце, што? Сапраўды гэтак жа вы, хлопцы, пачуўшы гэта song-- Вы маглі б прызнаць гэтую песню. 

[МУЗЫКА - Rick Astley, "НІКОЛІ дам  Вас "] [МУЗЫКА - арлы, "Жыццё ў Фаст  LANE "] Цяпер мы ўсе былі Rickrolled. ОК, выдатна, рухацца далей. Прахладны. Такім чынам, гэта ў асноўным прыклад проста, як вы маглі б загрузіць MP3 file-- [МУЗЫКА - арлы, "Жыццё ў Фаст  LANE "] --і гуляць, і спыніць і запусціць яго. Я мог бы зрабіць яшчэ вельмі шмат [неразборліва] 

Апошняе, што я зраблю гэта, Я пакажу вам [неразборліва]. 

[Гуляе музыка] 

Гэта як, ogg.wave.mp3. Я думаю, што, калі я правільна памятаю, Я сутыкнуўся з некаторымі пытаннямі .m4a, але я не ўпэўнены ў гэтым. Я думаю, што mp3.wave-- 

[МУЗЫКА - Rick Astley, "НІКОЛІ дам  Вас "] 

ОК, выдатна. Я не сказаў, што. Ва ўсякім выпадку, прывітанне. Такім чынам, мы маем гэта адкрыта. Так што цяпер я ўсё гэта, я ў асноўным створана асноўны сінтаксіс для стварэння музыкі. Так што, калі я нешта падобнае, дадаць g4 Люты 1, тое, што гэта азначае, што, дадаць піяніна да ведама, G4, што з'яўляецца чацвёртым G на фартэпіяна знізу. Так што гэта свайго роду MIDI кажуць, так і для тых, хто музыку, заснаваную, гэта проста MIDI ноты. 

АЎДЫТОРЫЯ: Гэта G на Блізкім C, праўда? 

Х'ю Забріскі: Гэта G вышэй сярэдняй З, гэта дакладна. 

АЎДЫТОРЫЯ: Над Сярэдні С. 

Х'ю Забріскі: Так. На самай справе, так. Я думаю, што на самой справе зрабіў яго адным [неразборліва], так што гэта можа быць на актаву вышэй гэтага. Такім чынам, давайце паглядзім. Калі я ўдарыў Play-- [Паўтараецца PIANO УВАГА] --we're пачуеце, што. Ідэя заключаецца ў тым, што ён працуе гэтак жа, як у камандным радку будзе, так што калі я іду ўверх і ўніз на маёй клавіятуры, вы можа вярнуцца да папярэдняй каманды, які з'яўляецца даволі карысным. І ніжэй мой спіс трэкаў, якія ўсё працуюць на завесы. 

АЎДЫТОРЫЯ: Вы мяркуючы, што 88-клавішная клавіятура на гэта, праўда? 

Х'ю Забріскі: Пытанне было, я мяркуючы 88-клавішнай клавіятурай, і так, я. Тое, што я зрабіў, я у асноўным ўзяў 88 узораў фартэпіяна, па адным для кожнай ноты. І так кожны раз, калі вы пачуць ноту цяпер, што на самой справе цыкл, які выглядае like-- гэта становіцца гуляў на пятлі, таму для кожнай ноты, гэта працуе. Што адбываецца, я стварыць буфер зноў, Стварыць ўзмацнення вузла для налады гучнасці. Гэта проста вельмі складаны спосаб сказаць, што я захоўваць буфер ў source.buffer. Я даю яму выйгрыш, я падключыце яго да прыбытку, ўзмацненне злучаны з Выхад, а затым я гуляю. Так што гэта свайго роду працэс прымаць у крыніцы буфера. 

АЎДЫТОРЫЯ: Ці можаце вы на самой справе ўзяць, што сухі гук і зрабіць яго мокрай [неразборліва]? 

Х'ю Забріскі: Можна, так. Там гэта зноў дзеяслоў, ёсць затрымка, скажэнне. Вы можаце ў асноўным пакласці што-небудзь у між тым, што бутэрброд of-- добра, трубаправод з'яўляецца лепшай метафарай, але вы можаце дадаць што-небудзь у гэтым. Прахладны. 

Так што я буду скончыць дэма тут, каб даць вам пачуццё проста велізарная колькасць раз вы можа працаваць гэтую функцыю адразу. Так што я збіраюся зняць гэта. Я збіраюся стварыць генератар that-- у асноўным тое, што does-- гэта сапраўды выгляд складанай syntax-- але гэта будзе генераваць нататкі на лета, і проста пачаць гуляць ім, як ён ацэньвае іх. [Рэле PIANO] 

Такім чынам, мы можам проста зрабіць трохі музыкі тут. [Рэле PIANO] 

Так што гэтая каманда робіць, напрыклад, ён прымае гэтыя тры ноты для фартэпіяна, а затым змяшчае іх на B3. Гэты сінтаксіс можа зрабіць трохі больш сэнсу для тых, хто ёсць музычны фон тут. 

Я магу дадаць бочку. Я can-- 

[Рэле ІНСТРУМЕНТЫ] 

--just пагуляць з гэтым. 

Такім чынам, вы можаце make-- [Рэле ІНСТРУМЕНТЫ] Той трохі больш раздражняе. [Рэле ІНСТРУМЕНТЫ] 

Так што выпадкова дадае сухі талеркі на кожным 16-м заўвазе, з 16% [Неразборліва]. 

[Рэле ІНСТРУМЕНТЫ] 

Так, так гэта тое, як works-- гэта заўсёды ў 4: 4. [Рэле ІНСТРУМЕНТЫ] 

Так, так чатырох кварталаў, і 16/8. [Рэле ІНСТРУМЕНТЫ] 

Так, у сярэднім, вы атрымліваеце 60% з-парад на 16 нот. 

У любым выпадку, гэта было проста выгляд, каб паказаць некаторыя з рэчаў, якія вы маглі б будаваць з вэб-Audio API. Гэта сапраўды магутны, гэта сапраўды хутка, і вы можаце зрабіць шмат класных рэчаў з ёй. Такім чынам, яшчэ раз, любыя пытанні, у вас, E-mail myself-- Hugh-- або Сэм, і, шчыра кажучы, Google мае тона добрых рэсурсаў. Любыя апошнія пытанні? Так. 

АЎДЫТОРЫЯ: Такім чынам, вы можаце атрымаць доступ да убудаваны мікрафон. Што рабіць, калі вы хочаце, каб выкарыстоўваць лепшы мікрафон? Х'ю Забріскі: Калі вы хочаце лепш выкарыстоўваць мікрафон? Такім чынам, яшчэ раз, гэта з'яўляецца часткай абстракцыя паміж Chrome і астатняя частка вашага кампутара. Калі гэта не даступна праз АНІ, як вэб-MIDI API, Вы, верагодна, можа знайсці некаторыя хакі, але, як правіла, не, як гэта здзяйсняльна. 

SAM ЗЯЛЁНЫ: Вы можаце also-- усе хром ведае гэта тое, што ваш мікрафон па змаўчанні гэта, і гэта доступ, які. Так што, калі ў вас ёсць мікрафон вы маглі ўсталяваць у якасці мікрафона па змаўчанні кампутара, Вы маглі атрымаць доступ да яго такім чынам і гэта, верагодна, працаваць. Х'ю Забріскі: Гэта добры момант. Я ніколі не спрабаваў, але Вы маглі б быць у стане выгляду of-- калі вы перанакіраваць ўвод дынамік, Вы маглі б быць у стане зрабіць гэта, так. 

Любыя апошнія пытанні? Прахладны. Ну вы, хлопцы, дзякуй так шмат для прагляду. Я Х'ю. SAM ЗЯЛЁНЫ: Я Сэм. Х'ю Забріскі: І гэта CS50.