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-- [МУЗЫКА - орлы, "Жизнь в Фаст  ПОЛОСА ДОРОГИ"] --which бывает "Жизнь в Фаст Лейн "на The Eagles. Теперь, я мог ударить "остановить мои любимая песня "и переиграть его. [МУЗЫКА - орлы, "Жизнь в Фаст  ПОЛОСА ДОРОГИ"] И если я иду к консоли, потому что Я использовал глобальную переменную здесь следить этой величины, его на самом деле теперь будет признана в консоли. Так Он автоматически создает для меня. Так вот то, что играет сейчас, и я могу просто позвоните source.stop () на том. Ну, вы знаете, что? Точно так же вы, ребята, услышав это song-- Вы могли бы признать эту песню. [МУЗЫКА - Rick Astley, "НИКОГДА дам  ТЫ ПОДНЯЛСЯ ЧУВАК"] [МУЗЫКА - орлы, "Жизнь в Фаст  ПОЛОСА ДОРОГИ"] Теперь мы все были Rickrolled. ОК, здорово, двигаться дальше. Круто. Таким образом, это в основном пример просто, как вы могли бы загрузить MP3 file-- [МУЗЫКА - орлы, "Жизнь в Фаст  ПОЛОСА ДОРОГИ"] --и играть, и остановить и запустить его. Я мог бы сделать еще очень много [неразборчиво] Последнее, что я сделаю это, Я покажу вам [неразборчиво]. [Играет музыка] Это как, ogg.wave.mp3. Я думаю, что, если я правильно помню, Я столкнулся с некоторыми вопросами .m4a, но я не уверен в этом. Я думаю, что mp3.wave-- [МУЗЫКА - Rick Astley, "НИКОГДА дам  ТЫ ПОДНЯЛСЯ ЧУВАК"] Ок, отлично. Я не сказал, что. Во всяком случае, привет. Итак, мы имеем это открыто. Так что теперь я все это, я в основном создана основной синтаксис для создания музыки. Так что, если я что-то подобное, добавить g4 1 2, то, что это означает, что, добавить пианино к сведению, G4, что является четвертым G на фортепиано снизу. Так что это своего рода MIDI говорят, так и для тех, кто музыку, основанную, это просто MIDI ноты. АУДИТОРИЯ: Это G на Ближнем C, верно? Хью Забриски: Это G выше средней С, это верно. АУДИТОРИЯ: Над Средний С. Хью Забриски: Да. На самом деле да. Я думаю, что на самом деле сделал его одним [неразборчиво], так что это может быть на октаву выше этого. Итак, давайте посмотрим. Если я ударил Play-- [ПОВТОРЯЮЩИХСЯ PIANO ПРИМЕЧАНИЕ] --we're услышите, что. Идея заключается в том, что он работает так же, как в командной строке будет, так что если я иду вверх и вниз на моей клавиатуре, вы может вернуться к предыдущей команды, который является довольно полезным. И ниже мой список треков, которые все работающие на петли. АУДИТОРИЯ: Вы предполагая, что 88-клавишная клавиатура на это, верно? Хью Забриски: Вопрос был, я предполагая 88-клавишной клавиатурой, и да, я. То, что я сделал, я в основном взял 88 образцов фортепиано, по одному для каждой ноты. И так каждый раз, когда вы услышать ноту теперь, что на самом деле цикл, который выглядит like-- это становится играл на петле, поэтому для каждой ноты, это работает. Что происходит, я создать буфер снова, Создать усиления узла для настройки громкости. Это просто очень сложный способ сказать, что я хранить буфер в source.buffer. Я даю ему выигрыш, я подключите его к прибыли, усиление соединен с Выход, а затем я играю. Так что это своего рода процесс принимать в источнике буфера. АУДИТОРИЯ: Можете ли вы на самом деле взять, что сухой звук и сделать его мокрой [неразборчиво]? Хью Забриски: Можно, да. Там это снова глагол, есть задержка, искажение. Вы можете в основном положить что-нибудь в между тем, что бутерброд of-- хорошо, трубопровод является лучшей метафорой, но вы можете добавить что-нибудь в этом. Круто. Так что я буду закончить демо здесь, чтобы дать вам чувство просто огромное количество раз вы может работать эту функцию сразу. Так что я собираюсь снять это. Я собираюсь создать генератор that-- в основном то, что does-- это действительно вид сложной syntax-- но это будет генерировать заметки на лету, и просто начать играть им, как он оценивает их. [Реле PIANO] Таким образом, мы можем просто сделать немного музыки здесь. [Реле PIANO] Так что эта команда делает, например, он принимает эти три ноты для фортепиано, а затем помещает их на B3. Этот синтаксис может сделать немного больше смысла для тех, кто есть музыкальный фон здесь. Я могу добавить бочку. Я могу-- [Реле ИНСТРУМЕНТЫ] --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.