1 00:00:00,000 --> 00:00:05,900 2 00:00:05,900 --> 00:00:07,170 >> SAM VERDE: Oi, todo mundo. 3 00:00:07,170 --> 00:00:08,640 Bem-vindo ao nosso seminário. 4 00:00:08,640 --> 00:00:10,009 O meu nome é Sam. 5 00:00:10,009 --> 00:00:11,050 HUGH ZABRISKIE: Eu sou Hugh. 6 00:00:11,050 --> 00:00:17,420 SAM VERDE: E nós estamos indo falar hoje sobre a API JavaScript e Web Audio. 7 00:00:17,420 --> 00:00:21,180 Só para começar, este é um esboço da nossa agenda para o seminário. 8 00:00:21,180 --> 00:00:25,350 Vamos começar falando sobre por que você deve estar interessado na Web 9 00:00:25,350 --> 00:00:30,130 API de áudio, por que é JavaScript o idioma que você precisa para isso, 10 00:00:30,130 --> 00:00:32,619 e, em seguida, falar sobre o JavaScript essentials-- assim como, 11 00:00:32,619 --> 00:00:34,800 orientá-lo através de alguns conceitos básicos da linguagem, 12 00:00:34,800 --> 00:00:37,290 e, em seguida, falar sobre o API de áudio a um nível elevado. 13 00:00:37,290 --> 00:00:41,140 Então, Hugh vai falar sobre alguns das fases de produção de áudio 14 00:00:41,140 --> 00:00:45,509 e, em seguida, esta demonstração impressionante sequenciador projeto que ele construiu e mostrar-lhe o código. 15 00:00:45,509 --> 00:00:48,050 E então, nós vamos ter tempo para perguntas no final para as pessoas 16 00:00:48,050 --> 00:00:49,593 que estão aqui vivem. 17 00:00:49,593 --> 00:00:50,540 >> HUGH ZABRISKIE: Cool. 18 00:00:50,540 --> 00:00:50,990 >> SAM VERDE: Cool. 19 00:00:50,990 --> 00:00:51,383 >> HUGH ZABRISKIE: Cool. 20 00:00:51,383 --> 00:00:52,170 Vou fazer o backup. 21 00:00:52,170 --> 00:00:54,960 >> SAM VERDE: Então, as primeiras coisas primeiro. 22 00:00:54,960 --> 00:00:57,840 Portanto, uma das grandes coisas sobre a API de áudio Web 23 00:00:57,840 --> 00:01:00,480 é que não há nenhuma configuração necessária. 24 00:01:00,480 --> 00:01:04,230 Ele vem embutido para a maioria dos navegadores modernos, 25 00:01:04,230 --> 00:01:08,630 incluindo Chrome, Edge, um todo bando de outros- todos os 26 00:01:08,630 --> 00:01:12,650 que grandes porções de as pessoas estão usando hoje. 27 00:01:12,650 --> 00:01:14,807 Portanto, há nenhum configurado, além de apenas começando 28 00:01:14,807 --> 00:01:16,890 um servidor web vai, por você começar a trabalhar 29 00:01:16,890 --> 00:01:18,420 em seu projeto, o que é ótimo. 30 00:01:18,420 --> 00:01:21,500 31 00:01:21,500 --> 00:01:24,190 >> Recomendamos bonita fortemente que você considere 32 00:01:24,190 --> 00:01:26,530 usando Chrome para JavaScript desenvolvimento web, 33 00:01:26,530 --> 00:01:30,260 só porque seu desenvolvedor ferramentas são realmente fortes. 34 00:01:30,260 --> 00:01:33,220 Como um exemplo de apenas o que queremos dizer dizendo abrir o seu JavaScript 35 00:01:33,220 --> 00:01:38,600 console-- se você entrar em Chrome e você olhar para qualquer página da web, 36 00:01:38,600 --> 00:01:43,897 e você clique esquerdo Inspect Element, e, em seguida, 37 00:01:43,897 --> 00:01:46,730 você vai para esta pequena drop-down aqui e você clicar em Console, 38 00:01:46,730 --> 00:01:50,660 você verá o que abre parece um muito parecido com um prompt de comando que você 39 00:01:50,660 --> 00:01:53,720 pode ver no seu Mac, ou no ID. 40 00:01:53,720 --> 00:01:59,260 E assim, nós podemos Tipo de comandos aqui, como Limpar, 41 00:01:59,260 --> 00:02:01,350 e outros comandos como esse. 42 00:02:01,350 --> 00:02:04,267 Nós podemos criar variáveis, como vamos ver mais tarde em JavaScript. 43 00:02:04,267 --> 00:02:07,100 E então qualquer coisa que podemos fazer em JavaScript, o que podemos fazer com o console, 44 00:02:07,100 --> 00:02:11,430 e isso é uma maneira super útil para começar a brincar com APIs 45 00:02:11,430 --> 00:02:15,760 e ficar confortável com JavaScript direita fora do bastão. 46 00:02:15,760 --> 00:02:18,290 Nenhuma configuração necessária, que é muito bom. 47 00:02:18,290 --> 00:02:18,790 Frio. 48 00:02:18,790 --> 00:02:22,064 49 00:02:22,064 --> 00:02:22,880 Fantástica. 50 00:02:22,880 --> 00:02:24,780 >> Então, só mais uma coisa a acrescentar. 51 00:02:24,780 --> 00:02:27,780 Se você tiver qualquer perguntas-- existem muitos de vocês que não estão aqui vivem, 52 00:02:27,780 --> 00:02:31,232 sinta-se livre para e-mail US-- estes são nossos endereços de e-mail. 53 00:02:31,232 --> 00:02:33,190 Se você tiver dúvidas você não quer perguntar-nos, 54 00:02:33,190 --> 00:02:36,160 como, oh Eu tenho um bug no meu código, ou algo assim 55 00:02:36,160 --> 00:02:39,270 isso é um pouco mais específico, Talvez o Google primeiro. 56 00:02:39,270 --> 00:02:42,340 Há um monte de grandes recursos sobre a Áudio API Web lá fora. 57 00:02:42,340 --> 00:02:44,089 É realmente bem documentado e está sendo 58 00:02:44,089 --> 00:02:47,194 usado por uma tonelada de pessoas em da indústria, e as pessoas que estão apenas 59 00:02:47,194 --> 00:02:48,610 construção de coisas divertidas para si próprios. 60 00:02:48,610 --> 00:02:51,306 Então, não deve haver uma grande quantidade de recursos lá fora. 61 00:02:51,306 --> 00:02:53,040 Fantástica. 62 00:02:53,040 --> 00:02:56,100 >> Cool, então por que a API de áudio Web? 63 00:02:56,100 --> 00:02:59,840 Este diagrama é um pouco de uma evolução da maneira 64 00:02:59,840 --> 00:03:04,100 som na web tem crescido ao longo do tempo. 65 00:03:04,100 --> 00:03:13,080 Bgsound era como o tag HTML original que o Internet Explorer utilizada para apoiar. 66 00:03:13,080 --> 00:03:16,790 É permitido somente para sons bastante básicas, a funcionalidade não foi muito robusta, 67 00:03:16,790 --> 00:03:19,380 e você não poderia fazer sequenciação complicado, 68 00:03:19,380 --> 00:03:21,890 ou quando o som começou a controlar e parou muito robusta. 69 00:03:21,890 --> 00:03:23,930 Assim, não foi particularmente bem desenvolvido. 70 00:03:23,930 --> 00:03:27,470 Em seguida, depois disso, o Flash along-- veio que, 71 00:03:27,470 --> 00:03:31,712 Tenho certeza de que vocês são todos familiarizados com Flash-- talvez não como ele funciona, 72 00:03:31,712 --> 00:03:32,920 mas você certamente já viu. 73 00:03:32,920 --> 00:03:35,586 Você tem que atualizar o seu Flash Plug-in, todo esse tipo de coisa, 74 00:03:35,586 --> 00:03:40,110 e que certamente ampliou a gama de funcionalidade que estava disponível. 75 00:03:40,110 --> 00:03:45,370 Mas fazer o usuário instale um plug-in é definitivamente 76 00:03:45,370 --> 00:03:48,480 uma desvantagem para o Flash, incluindo na sua aplicação, certo? 77 00:03:48,480 --> 00:03:52,410 Porque então você é dependente do usuário e vai encontrar este plug-in, 78 00:03:52,410 --> 00:03:54,660 e, provavelmente, a ser transformado fora por este passo extra 79 00:03:54,660 --> 00:03:56,640 eles têm que tomar para usar a sua aplicação. 80 00:03:56,640 --> 00:04:01,270 E, em seguida, poderia haver uma atualização que vai quebrar toda a sua aplicação, 81 00:04:01,270 --> 00:04:03,880 e ele acaba sendo um pesadelo para o desenvolvedor também. 82 00:04:03,880 --> 00:04:06,230 Então isso foi uma barricada. 83 00:04:06,230 --> 00:04:10,480 >> E então, depois que veio junto, a tag HTML de áudio, o que 84 00:04:10,480 --> 00:04:16,579 é uma característica da HTML-- mais moderno que certamente permitido para muito mais coisas, 85 00:04:16,579 --> 00:04:20,050 mas mesmo as coisas que você poderia fazer lá foram um pouco limitado apenas 86 00:04:20,050 --> 00:04:22,730 como resultado de as coisas HTML que era capaz. 87 00:04:22,730 --> 00:04:26,060 Assim, quando o JavaScript API, a API de áudio da Web, 88 00:04:26,060 --> 00:04:29,290 tornou-se um padrão praticar em todos os navegadores, 89 00:04:29,290 --> 00:04:32,490 que realmente ampliaram o conjunto de oportunidades para desenvolvedores 90 00:04:32,490 --> 00:04:36,590 para realmente entrar no edifício material legal para a web. 91 00:04:36,590 --> 00:04:39,220 Durante muito tempo não tinha sido ferramentas realmente robustos 92 00:04:39,220 --> 00:04:44,360 para aplicações de áudio nativo, como-- todos sabem GarageBand, 93 00:04:44,360 --> 00:04:48,360 e então, obviamente, existem mais aplicações de áudio profissional, misturando 94 00:04:48,360 --> 00:04:49,640 e esse tipo de coisa. 95 00:04:49,640 --> 00:04:52,690 Mas não havia uma realmente bom não Cloud-- 96 00:04:52,690 --> 00:04:55,811 Nuvem, sim, eu acho Plataforma baseada na web Cloud-- 97 00:04:55,811 --> 00:04:58,310 que permitiria aos desenvolvedores construir aplicações para as pessoas 98 00:04:58,310 --> 00:05:00,570 fazer mixagem de áudio. 99 00:05:00,570 --> 00:05:03,960 E como ele irá mostrar-lhe depois, o API Audio Web 100 00:05:03,960 --> 00:05:07,470 permite realmente poderoso coisas para acontecer realmente simplesmente, 101 00:05:07,470 --> 00:05:09,597 que é muito legal. 102 00:05:09,597 --> 00:05:12,680 Então essa é a instrução que motivo você deve ver o resto do seminário, 103 00:05:12,680 --> 00:05:14,350 basicamente. 104 00:05:14,350 --> 00:05:17,880 >> E agora, eu estou indo para falar sobre alguns elementos básicos apenas JavaScript-- 105 00:05:17,880 --> 00:05:20,240 da língua, de modo que que pode ser na mesma página 106 00:05:20,240 --> 00:05:22,470 quando falamos sobre o API um pouco mais tarde. 107 00:05:22,470 --> 00:05:23,260 Frio. 108 00:05:23,260 --> 00:05:26,192 >> Então, este é um resumo. 109 00:05:26,192 --> 00:05:27,150 Esqueci-me que isto estava aqui. 110 00:05:27,150 --> 00:05:27,510 Sim. 111 00:05:27,510 --> 00:05:27,870 >> HUGH ZABRISKIE: Há dois slides aqui. 112 00:05:27,870 --> 00:05:30,245 >> SAM VERDE: Este é o resumo de algumas das limitações 113 00:05:30,245 --> 00:05:35,220 dos outros, métodos antigos de ligação. 114 00:05:35,220 --> 00:05:37,828 E então agora, nós temos essas coisas. 115 00:05:37,828 --> 00:05:40,011 Frio. 116 00:05:40,011 --> 00:05:40,510 Fantástica. 117 00:05:40,510 --> 00:05:43,200 >> Então, fundamentos de JavaScript. 118 00:05:43,200 --> 00:05:47,230 Primeiro de tudo, há uma diferença bastante significativo 119 00:05:47,230 --> 00:05:49,940 em JavaScript em um contra linguagem como C, na forma 120 00:05:49,940 --> 00:05:52,050 que as variáveis ​​são criados. 121 00:05:52,050 --> 00:05:55,634 Assim, em C, que está acostumado a ter digitar as nossas variáveis, certo? 122 00:05:55,634 --> 00:05:57,800 E eu não quero dizer tipo como digitá-los, quero dizer Tipo 123 00:05:57,800 --> 00:06:01,900 como atribuir-lhes um significado type-- como, um int, float, um char. 124 00:06:01,900 --> 00:06:05,210 Em C, nós estávamos realmente usado para ter que criar uma variável 125 00:06:05,210 --> 00:06:09,690 e, em seguida, ficar com esse tipo para o tempo inteiro que nós usamos essa variável. 126 00:06:09,690 --> 00:06:13,990 E isso não é necessariamente pior, mas é provavelmente mais difícil de usar. 127 00:06:13,990 --> 00:06:16,190 Um dos recursos interessantes de JavaScript 128 00:06:16,190 --> 00:06:19,740 que as variáveis ​​são o que é chamado "tipagem dinâmica", que 129 00:06:19,740 --> 00:06:22,500 significa que eu posso criar uma variável com que a sintaxe, 130 00:06:22,500 --> 00:06:25,800 varX é igual a 5, por exemplo. 131 00:06:25,800 --> 00:06:27,790 Que originalmente cria um inteiro variable-- 132 00:06:27,790 --> 00:06:29,870 à direita sob o capa somewhere-- mas eu 133 00:06:29,870 --> 00:06:33,040 pode mudar essa variável para se referir a uma cadeia 134 00:06:33,040 --> 00:06:35,820 sem fazer nada como criando uma nova variável. 135 00:06:35,820 --> 00:06:37,880 Eu não precisa se preocupar sobre o tipo de mudança. 136 00:06:37,880 --> 00:06:45,440 JavaScript sabe que o tipo de alterada, e isso acontece de forma dinâmica. 137 00:06:45,440 --> 00:06:48,510 >> Então, há benefícios e desvantagens para que, 138 00:06:48,510 --> 00:06:51,250 como qualquer um que trabalhou em JavaScript por algum tempo poderia saber. 139 00:06:51,250 --> 00:06:53,600 Há momentos em que Você pode acidentalmente 140 00:06:53,600 --> 00:06:57,720 alterar o tipo de uma variável e não lidar com esse tipo de mudança, 141 00:06:57,720 --> 00:07:01,120 e, em seguida, o seu JavaScript pode crash-- ou uma exceção 142 00:07:01,120 --> 00:07:06,070 ser jogado, porque você vai ter a Tipo de errado quando você espera um tipo. 143 00:07:06,070 --> 00:07:07,040 Frio. 144 00:07:07,040 --> 00:07:11,470 >> Então, scoping-- que é como, se nós lembre-se as primeiras semanas do curso, 145 00:07:11,470 --> 00:07:15,420 refere-se a uma variável como visível é e em que área do código. 146 00:07:15,420 --> 00:07:18,400 Tudo isso parece muito semelhante à maneira como ele olha em C. 147 00:07:18,400 --> 00:07:24,755 Assim, as variáveis ​​são escopo geral dentro de chaves dentro de uma função, 148 00:07:24,755 --> 00:07:27,005 e depois há também variáveis ​​globais de escopo que 149 00:07:27,005 --> 00:07:29,171 é-- se você escrever uma variável fora de uma função, 150 00:07:29,171 --> 00:07:31,790 será visível em todo o texto. 151 00:07:31,790 --> 00:07:35,840 >> Uma diferença entre JavaScript e C, em particular, 152 00:07:35,840 --> 00:07:40,280 é que se você declarar um mundial em qualquer lugar variável em um arquivo de texto 153 00:07:40,280 --> 00:07:43,324 é visível em qualquer função dentro desse arquivo de texto. 154 00:07:43,324 --> 00:07:44,240 Isso é correto, certo? 155 00:07:44,240 --> 00:07:46,330 >> HUGH ZABRISKIE: Yep. 156 00:07:46,330 --> 00:07:49,120 >> SAM VERDE: Assim que é também um pouco pouco descolados em comparação com C, 157 00:07:49,120 --> 00:07:52,660 onde sempre tivemos a nossa as definições das variáveis ​​acima dos lugares 158 00:07:52,660 --> 00:07:53,770 eles foram usados. 159 00:07:53,770 --> 00:07:57,957 Isso não é uma regra que é aplicada mais, portanto, um pouco diferente. 160 00:07:57,957 --> 00:08:00,540 E novamente apenas para enfatizar, mundial contra variables-- locais 161 00:08:00,540 --> 00:08:03,457 muito semelhante ao C. Você poderia ter duas variáveis ​​com o mesmo nome, 162 00:08:03,457 --> 00:08:06,540 e ter um dos seus nomes ser sombreada por uma variável local, se um deles 163 00:08:06,540 --> 00:08:07,546 era global. 164 00:08:07,546 --> 00:08:09,420 Assim tipo, semelhante de problemas que alguns de vocês 165 00:08:09,420 --> 00:08:11,920 pode ter executado em alguns do seu problema define até agora. 166 00:08:11,920 --> 00:08:14,450 Legal, de modo que é variáveis. 167 00:08:14,450 --> 00:08:20,310 >> Fluxo de controle, ou seja, como, se-else-- stuff-- lógico e loops. 168 00:08:20,310 --> 00:08:24,510 Então, para começar, isso é o que if-else declarações olhar como em JavaScript. 169 00:08:24,510 --> 00:08:29,750 A colocação das várias coisas sobre as linhas não é importante. 170 00:08:29,750 --> 00:08:34,409 Esta é apenas uma das convenções para o caminho de código estrutura de nós. 171 00:08:34,409 --> 00:08:38,634 Assim como em C, temos um "se", uma declaração parênteses. 172 00:08:38,634 --> 00:08:40,840 173 00:08:40,840 --> 00:08:42,090 Isso não é o que eu quis fazer. 174 00:08:42,090 --> 00:08:44,860 175 00:08:44,860 --> 00:08:45,550 Eu fiz de novo. 176 00:08:45,550 --> 00:08:46,841 >> HUGH ZABRISKIE: Tentando sair? 177 00:08:46,841 --> 00:08:49,770 SAM VERDE: Não, eu sou apenas tentando fazer zoom. 178 00:08:49,770 --> 00:08:50,660 Não importa. 179 00:08:50,660 --> 00:08:54,730 180 00:08:54,730 --> 00:08:59,370 >> Então, nós temos um "if" e nós temos uma condição dentro dele 181 00:08:59,370 --> 00:09:03,130 que é avaliada como verdadeira ou falsa, e que determina se ou não 182 00:09:03,130 --> 00:09:04,510 nós entrar nesse bloco de código. 183 00:09:04,510 --> 00:09:09,860 E da mesma forma, temos um else-se e uma pessoa, assim como nós estamos acostumados a nos C. 184 00:09:09,860 --> 00:09:14,010 >> Você também deve ser bastante confortável logo de cara com loops, 185 00:09:14,010 --> 00:09:16,440 porque eles também olhar muito parecido com C parece. 186 00:09:16,440 --> 00:09:19,600 Mas você vai notar mais uma vez que nós ter, em vez de int initializations, 187 00:09:19,600 --> 00:09:22,570 temos initializations var. 188 00:09:22,570 --> 00:09:24,650 E eu acho que você tem ter cuidado para fazer 189 00:09:24,650 --> 00:09:28,460 certeza que você não alterar o valor de I a partir de um int para uma cadeia, 190 00:09:28,460 --> 00:09:31,780 por exemplo, porque isso vai causar um comportamento estranho talvez não 191 00:09:31,780 --> 00:09:32,280 esperar. 192 00:09:32,280 --> 00:09:35,750 Mas isso deve olhar bem familiar, bem. 193 00:09:35,750 --> 00:09:39,460 >> Então é aqui que as coisas começam a ficar um pouco louco em JavaScript 194 00:09:39,460 --> 00:09:44,920 para alguém que está indo de um fundo de C. Há funções 195 00:09:44,920 --> 00:09:48,070 em JavaScript, e não há uma maneira para declarar uma função que procura 196 00:09:48,070 --> 00:09:50,361 tipo de semelhante a C, e então há um outro que 197 00:09:50,361 --> 00:09:52,450 olha o tipo de diferente. 198 00:09:52,450 --> 00:09:54,930 >> A primeira versão, que podemos ver aqui, 199 00:09:54,930 --> 00:09:59,260 é uma espécie de C-like, onde podemos dizer, esta é uma função, 200 00:09:59,260 --> 00:10:01,490 dar-lhe um nome, dê- o número de argumentos, 201 00:10:01,490 --> 00:10:05,150 e, em seguida, o conteúdo da função ir para dentro dessas chaves. 202 00:10:05,150 --> 00:10:08,850 Vamos ver um exemplo de argumentos em apenas um segundo. 203 00:10:08,850 --> 00:10:13,420 >> Considerando que na próxima linha, vemos, oh, aqui está uma variável chamada "myFunction" 204 00:10:13,420 --> 00:10:17,546 e igualar a esta genérico function-- coisa-- que 205 00:10:17,546 --> 00:10:19,170 não parece ter nada acontecendo. 206 00:10:19,170 --> 00:10:22,780 207 00:10:22,780 --> 00:10:26,080 A razão que é diferente que C é que o JavaScript 208 00:10:26,080 --> 00:10:30,040 é o que se chama uma linguagem funcional, ou tem elementos funcionais, o que significa 209 00:10:30,040 --> 00:10:33,510 funções que são, na verdade, valores. 210 00:10:33,510 --> 00:10:39,520 E isso significa que podemos definir uma variável para igualar uma função 211 00:10:39,520 --> 00:10:43,210 e depois passar essa função ao redor, passá-lo como um argumento, 212 00:10:43,210 --> 00:10:46,550 fazer todos os tipos de coisas assim com as funções. 213 00:10:46,550 --> 00:10:49,682 >> Uma outra coisa a note-- funções são escritos 214 00:10:49,682 --> 00:10:51,140 com um certo número de argumentos. 215 00:10:51,140 --> 00:10:54,056 Vamos ver um exemplo de uma função com um argumento no próximo slide. 216 00:10:54,056 --> 00:10:56,720 Mas JavaScript não vai gritar com você se você tentar 217 00:10:56,720 --> 00:10:59,330 usar uma função com a número errado de argumentos. 218 00:10:59,330 --> 00:11:05,310 Só vai fazer o seu melhor para fazer fazer, o que significa que se você passar, 219 00:11:05,310 --> 00:11:09,410 você chamar uma função que espera um discussão com nenhum argumento, tudo o que 220 00:11:09,410 --> 00:11:13,990 vai acontecer é que vai fazer o seu melhor para tentar executar esse código, 221 00:11:13,990 --> 00:11:16,541 e se, eventualmente, é executado em uma exceção ou um erro, 222 00:11:16,541 --> 00:11:19,790 ele vai lançar essa exceção e manter apenas going-- que é apenas uma das maneiras 223 00:11:19,790 --> 00:11:21,070 que JavaScript funciona. 224 00:11:21,070 --> 00:11:21,781 Sim. 225 00:11:21,781 --> 00:11:24,207 >> AUDIÊNCIA: O que acontece se há muitos argumentos? 226 00:11:24,207 --> 00:11:26,040 SAM VERDE: Então, a pergunta era: o que acontece 227 00:11:26,040 --> 00:11:27,380 se existem muitos argumentos? 228 00:11:27,380 --> 00:11:29,171 E a resposta é que JavaScript terá apenas 229 00:11:29,171 --> 00:11:32,120 ignorar os que estão depois os que espera. 230 00:11:32,120 --> 00:11:36,420 Ele vai tentar executar a função chamar como se fosse apenas os dois primeiros. 231 00:11:36,420 --> 00:11:37,075 Certo? 232 00:11:37,075 --> 00:11:37,700 >> HUGH ZABRISKIE: É verdade, sim. 233 00:11:37,700 --> 00:11:39,449 De igual modo, se houver são muito poucos argumentos, 234 00:11:39,449 --> 00:11:42,640 ele só tipo de dá nulo para todo o argumentos que não tem quaisquer valores 235 00:11:42,640 --> 00:11:43,660 para. 236 00:11:43,660 --> 00:11:45,810 >> SAM VERDE: o que pode na verdade, ser útil, se você 237 00:11:45,810 --> 00:11:49,060 quero escrever uma função que leva argumentos número variável. 238 00:11:49,060 --> 00:11:55,830 Você pode definir valores padrão no a definição da função, 239 00:11:55,830 --> 00:11:59,060 e pode ignorar o fato de que a entrada não está lá. 240 00:11:59,060 --> 00:12:01,584 241 00:12:01,584 --> 00:12:04,000 Então, eu quero falar um pouco mais sobre esta última bala 242 00:12:04,000 --> 00:12:05,541 ponto, que é funções são valores. 243 00:12:05,541 --> 00:12:07,930 244 00:12:07,930 --> 00:12:11,010 Este é um exemplo que é um pouco alucinante 245 00:12:11,010 --> 00:12:14,880 se você apenas lê-lo, e não acho que sobre o que está acontecendo por um segundo. 246 00:12:14,880 --> 00:12:17,910 Então, vamos olhar apenas no a primeira linha aqui. 247 00:12:17,910 --> 00:12:24,360 Nós temos essa variável, f1, que dizemos é uma função que faz esta coisa. 248 00:12:24,360 --> 00:12:28,535 E o conteúdo da função são console.log ('Olá'). 249 00:12:28,535 --> 00:12:32,220 Você pode pensar em como o console.log JavaScript equivalente de printf. 250 00:12:32,220 --> 00:12:35,510 Então, o que vai acontecer é, se nós executar este código no nosso navegador, 251 00:12:35,510 --> 00:12:37,530 ele vai imprimir uma string. 252 00:12:37,530 --> 00:12:39,342 Eu posso demonstrar isso. 253 00:12:39,342 --> 00:12:42,300 AUDIÊNCIA: por log, porém, é que isso significa que ele está sendo gravado em algum lugar? 254 00:12:42,300 --> 00:12:42,550 SAM VERDE: Yeah. 255 00:12:42,550 --> 00:12:44,216 Então eu vou lhe mostrar o que vai acontecer. 256 00:12:44,216 --> 00:12:48,085 Então, a pergunta era: o que é que quer dizer log? 257 00:12:48,085 --> 00:12:51,262 >> HUGH ZABRISKIE: Então console.log é como printf para C. 258 00:12:51,262 --> 00:12:52,970 SAM VERDE: Então console.log é como printf, 259 00:12:52,970 --> 00:12:59,240 por isso, se eu tenho esse console.log ('Olá'), e eu chamo isso, a string "Olá" 260 00:12:59,240 --> 00:13:00,730 será impresso para o console. 261 00:13:00,730 --> 00:13:03,340 Este é o console. 262 00:13:03,340 --> 00:13:05,930 É como printf, onde ele imprime para fora padrão. 263 00:13:05,930 --> 00:13:09,050 264 00:13:09,050 --> 00:13:11,230 E vamos ver em um minuto, mas esta é realmente 265 00:13:11,230 --> 00:13:16,529 referindo-se ao objeto console, e chamar um método no objeto. 266 00:13:16,529 --> 00:13:18,320 Isso vai fazer mais sentido em um minuto quando 267 00:13:18,320 --> 00:13:20,660 começa a falar objetos em JavaScript, 268 00:13:20,660 --> 00:13:22,509 mas eu pensei que eu só iria mencionar isso. 269 00:13:22,509 --> 00:13:24,300 HUGH ZABRISKIE: Nós somos usado no C, direita-- 270 00:13:24,300 --> 00:13:27,580 costumamos escrever um grande programa no principal para fazer qualquer coisa. 271 00:13:27,580 --> 00:13:30,700 Mas o que é legal em JavaScript você é ter esse tipo de interpretador que 272 00:13:30,700 --> 00:13:33,620 executado em tempo real, por isso leva apenas linha por linha, 273 00:13:33,620 --> 00:13:35,320 ele pode apenas interpretar que na hora. 274 00:13:35,320 --> 00:13:37,403 E ele mantém o controle de coisas que foram executados antes, 275 00:13:37,403 --> 00:13:41,620 por isso, é uma ferramenta muito útil usar console.log, ou o console, 276 00:13:41,620 --> 00:13:46,870 geralmente, para apenas brincando ao redor com JavaScript. 277 00:13:46,870 --> 00:13:51,420 >> SAM VERDE: Então vai voltar a este example-- a segunda linha de código 278 00:13:51,420 --> 00:13:55,320 aqui é bastante incompreensível na minha cabeça. 279 00:13:55,320 --> 00:13:59,790 A primeira vez que li isso, como era, o que está acontecendo? 280 00:13:59,790 --> 00:14:04,580 Então, o que está acontecendo é, neste declaração de função diz: 281 00:14:04,580 --> 00:14:10,170 Eu tenho uma função chamada f2 que está esperando um argumento, f, 282 00:14:10,170 --> 00:14:12,990 e, em seguida, ele chama a função, f, que 283 00:14:12,990 --> 00:14:17,652 foi passado para ele como um argumento sem argumentos si. 284 00:14:17,652 --> 00:14:19,110 Então, isso poderia ter sido confuso. 285 00:14:19,110 --> 00:14:21,890 286 00:14:21,890 --> 00:14:28,400 Se entendermos isso como F2 leva f1 como um argumento, e, em seguida, dentro de F2, 287 00:14:28,400 --> 00:14:31,190 f recebe called-- que meios que esta linha de código, 288 00:14:31,190 --> 00:14:34,192 Depois destas duas linhas de código, resulta em "Olá" 289 00:14:34,192 --> 00:14:35,400 sendo impresso para o console. 290 00:14:35,400 --> 00:14:41,660 291 00:14:41,660 --> 00:14:44,910 >> O fato de que podemos passar funções ao redor como valores 292 00:14:44,910 --> 00:14:47,870 acaba sendo um dos mais poderosos recursos de JavaScript 293 00:14:47,870 --> 00:14:49,700 como uma linguagem de programação. 294 00:14:49,700 --> 00:14:52,782 Do lado de fora de todo o coisas impressionantes que pode fazer, 295 00:14:52,782 --> 00:14:54,990 assim como uma característica do língua, em termos da maneira 296 00:14:54,990 --> 00:14:58,400 que torna as coisas fáceis para programar e permite 297 00:14:58,400 --> 00:15:01,060 para as coisas que não são particularmente bem adequada para a web, 298 00:15:01,060 --> 00:15:04,500 programação funcional e funcional aspectos de programação de JavaScript 299 00:15:04,500 --> 00:15:07,130 é um dos mais conceitos que poderosos 300 00:15:07,130 --> 00:15:11,030 existe em JavaScript-- se você me perguntar. 301 00:15:11,030 --> 00:15:11,960 Frio. 302 00:15:11,960 --> 00:15:13,534 >> Então, a próxima coisa. 303 00:15:13,534 --> 00:15:16,450 Além de ser funcional, também existem elementos de JavaScript 304 00:15:16,450 --> 00:15:20,510 que são orientada a objetos, que é um dos muito 305 00:15:20,510 --> 00:15:23,800 palavras de zumbido populares em ciência da computação. 306 00:15:23,800 --> 00:15:27,040 Programação orientada a objeto é uma coisa realmente popular. 307 00:15:27,040 --> 00:15:34,210 JavaScript tem uma versão do que, onde eu acredito que cada valor é também 308 00:15:34,210 --> 00:15:41,475 um objeto, o que significa que cada objeto envolve em conjunto um certo número de valores. 309 00:15:41,475 --> 00:15:44,020 310 00:15:44,020 --> 00:15:49,750 Assim, para valores que são simples, como um número inteiro, como varX é igual a 5, 311 00:15:49,750 --> 00:15:52,250 esse objeto apenas que envolve um valor. 312 00:15:52,250 --> 00:15:54,760 313 00:15:54,760 --> 00:15:59,036 >> Mas também podemos imaginar uma situação where-- podemos pensar em situações em C 314 00:15:59,036 --> 00:16:00,910 onde queríamos fazer algo com estruturas, 315 00:16:00,910 --> 00:16:03,285 por exemplo, que envolve várias valores juntos e marcas 316 00:16:03,285 --> 00:16:05,870 realmente fácil de passar as coisas ao redor. 317 00:16:05,870 --> 00:16:09,270 Isso é quando um objeto está em JavaScript. 318 00:16:09,270 --> 00:16:12,340 >> É importante lembrar quando eu digo que os objetos embrulhados 319 00:16:12,340 --> 00:16:15,330 um certo número de valores em conjunto, que são também funções 320 00:16:15,330 --> 00:16:21,506 valores, o que significa que as funções podem também estar dentro de um objeto JavaScript. 321 00:16:21,506 --> 00:16:26,910 E a razão que é importante é que, ao passo que, muitas vezes, 322 00:16:26,910 --> 00:16:30,290 pensar em chamar um método em um objeto que é 323 00:16:30,290 --> 00:16:35,200 de um termo popular de outros linguagens orientadas a objetos populares, 324 00:16:35,200 --> 00:16:39,330 Uma das diferenças aqui é que tudo o que um método está em JavaScript 325 00:16:39,330 --> 00:16:47,270 é um valor guardado dentro de um objeto que realiza algumas Action-- possivelmente 326 00:16:47,270 --> 00:16:51,850 usando os outros valores que estão dentro desse objeto, mas não necessariamente. 327 00:16:51,850 --> 00:16:56,930 Então você pode imaginar uma situação, eu acho que em um pouco de uma maneira louca, 328 00:16:56,930 --> 00:17:02,990 onde um método chamado de um objeto em outro objeto, por exemplo. 329 00:17:02,990 --> 00:17:06,010 Então, é um pouco descolados dessa forma. 330 00:17:06,010 --> 00:17:09,369 >> E você também pode alterar os métodos que estão associados com um objecto 331 00:17:09,369 --> 00:17:13,740 através da atribuição de um método que nova função, que é também 332 00:17:13,740 --> 00:17:18,250 muito diferente de outros linguagens orientadas a objetos, onde 333 00:17:18,250 --> 00:17:21,410 uma vez que declarar um objeto e instanciá-lo, 334 00:17:21,410 --> 00:17:25,839 não podemos mudar os métodos que são associado a esse objeto mais. 335 00:17:25,839 --> 00:17:28,680 Então isso é muito diferente. 336 00:17:28,680 --> 00:17:29,570 Frio. 337 00:17:29,570 --> 00:17:34,010 >> Então, aqui está um exemplo, em primeiro lugar, de um objeto em ação. 338 00:17:34,010 --> 00:17:36,390 Isto é o que é chamado um objeto genérico, que 339 00:17:36,390 --> 00:17:39,460 significa que ele não tem qualquer nomeadamente nome, não tem uma classe, 340 00:17:39,460 --> 00:17:42,190 é apenas algum envolvimento de valores. 341 00:17:42,190 --> 00:17:49,790 E a maneira que parece é que temos este par exterior de encaracolado cintas aqui 342 00:17:49,790 --> 00:17:57,950 indicam que a JavaScript e dizer, este é um objeto. 343 00:17:57,950 --> 00:18:02,130 Os valores dentro da mesma são, cada um dentro de valores 344 00:18:02,130 --> 00:18:04,590 do objecto que deve ser enrolado. 345 00:18:04,590 --> 00:18:09,180 E dentro desse objeto, temos então pares de valores-chave, 346 00:18:09,180 --> 00:18:13,880 onde a chave refere-se ao nome do valor dentro do objecto, 347 00:18:13,880 --> 00:18:16,790 e o outro side-- oposto a aqui- cólon 348 00:18:16,790 --> 00:18:19,850 é o valor real que deve ser armazenado. 349 00:18:19,850 --> 00:18:26,210 >> Então você vê aqui que temos uma chave chamada fn com valor sam, 350 00:18:26,210 --> 00:18:29,430 seguido por uma vírgula, dizendo para a próxima entrada. 351 00:18:29,430 --> 00:18:33,560 Em seguida, uma chave chamada LN, com um valor de verde, 352 00:18:33,560 --> 00:18:35,840 seguido por uma vírgula, seguido de "print" 353 00:18:35,840 --> 00:18:43,209 que vai ter um valor de função que vai fazer esta linha de código. 354 00:18:43,209 --> 00:18:45,500 Vamos dar um passo para trás e descompactar o que está acontecendo aqui. 355 00:18:45,500 --> 00:18:47,280 Então, isso é um pouco complicado, e nós estamos vendo algo novo 356 00:18:47,280 --> 00:18:48,071 pela primeira vez. 357 00:18:48,071 --> 00:18:51,190 358 00:18:51,190 --> 00:18:55,065 O "isto" palavra-chave é a coisa nova nós estamos vendo aqui, e que isso faz 359 00:18:55,065 --> 00:19:00,540 é, refere-se a corrente objeto no espaço, certo? 360 00:19:00,540 --> 00:19:03,990 Assim, quando dizemos, este aponta o caminho de volta 361 00:19:03,990 --> 00:19:08,140 a toda esta object-- quando fazemos this.fn, 362 00:19:08,140 --> 00:19:11,990 nós estamos indo para percorrer todo o caminho de volta a este objeto, vá para o valor fn 363 00:19:11,990 --> 00:19:16,471 e obter sam, puxe-o todo o caminho para trás, colá-la aqui, e, em seguida, seguir em frente. 364 00:19:16,471 --> 00:19:19,838 >> AUDIÊNCIA: Assim, com a recuperação, é isso feito por causa do parâmetro 365 00:19:19,838 --> 00:19:20,621 definição? 366 00:19:20,621 --> 00:19:23,870 SAM VERDE: Então, a pergunta era: é o recuperação feito por causa do parâmetro 367 00:19:23,870 --> 00:19:24,727 definição? 368 00:19:24,727 --> 00:19:25,435 Sim, absolutamente. 369 00:19:25,435 --> 00:19:29,660 370 00:19:29,660 --> 00:19:32,470 O que vai acontecer aqui é, este ponto diz ao JavaScript, 371 00:19:32,470 --> 00:19:39,990 OK, eu estou recebendo algum valor a partir desse objeto de mim mesmo. 372 00:19:39,990 --> 00:19:46,375 E então ele vai olhar para uma entrada chamado fn, e se encontra, 373 00:19:46,375 --> 00:19:48,470 ele vai voltar que value-- assim, é sam. 374 00:19:48,470 --> 00:19:51,540 Mas eu também poderia ter digitado algo que não foi definido aqui, 375 00:19:51,540 --> 00:19:54,090 e, em seguida, que seria apenas undefined-- que voltar 376 00:19:54,090 --> 00:19:58,250 é uma coisa que pode JavaScript fazer, o que pode ter benefícios, 377 00:19:58,250 --> 00:20:03,190 mas é Também-- se você cometer um erro de digitação, que pode resultar em erros estranhos. 378 00:20:03,190 --> 00:20:05,617 Por isso, vou apenas tentar encontrar o que quer que você diga a ele para encontrar 379 00:20:05,617 --> 00:20:07,700 e ele não está indo para reclamar se não encontrá-lo. 380 00:20:07,700 --> 00:20:11,390 Só vai dizer que eu não fiz encontrá-lo, e, em seguida, seguir em frente. 381 00:20:11,390 --> 00:20:17,581 Por isso, seria indefinida, acrescido em branco, além de sobrenome. 382 00:20:17,581 --> 00:20:18,080 Sim. 383 00:20:18,080 --> 00:20:21,070 E então podemos ver que se nós poderia, então, descer e access-- 384 00:20:21,070 --> 00:20:25,450 e chamamos tf.print () com parênteses. 385 00:20:25,450 --> 00:20:30,000 Vai chamar isso de impressão função sem argumentos, certo? 386 00:20:30,000 --> 00:20:34,490 Mas se nós apenas disse tf.print () ponto e vírgula, sem os parênteses, 387 00:20:34,490 --> 00:20:37,480 tudo o que teria feito é puxar a função do valor, 388 00:20:37,480 --> 00:20:40,609 mas na verdade não o chamou. 389 00:20:40,609 --> 00:20:41,162 Frio. 390 00:20:41,162 --> 00:20:42,870 HUGH ZABRISKIE: Devem fazemos um objeto? 391 00:20:42,870 --> 00:20:44,161 SAM VERDE: Claro, vamos fazer isso. 392 00:20:44,161 --> 00:20:48,750 Então, eu posso mover este exemplo para o console. 393 00:20:48,750 --> 00:20:51,380 394 00:20:51,380 --> 00:20:55,466 Podemos imaginar que eu tenho um objeto. 395 00:20:55,466 --> 00:21:03,026 396 00:21:03,026 --> 00:21:04,150 Portanto, este é um objeto simples. 397 00:21:04,150 --> 00:21:06,910 398 00:21:06,910 --> 00:21:11,050 Este é um objecto que contém dois valores com duas chaves, dois valor de chave 399 00:21:11,050 --> 00:21:12,710 pares. 400 00:21:12,710 --> 00:21:21,850 Para que eu possa, em seguida, acessar o valor armazenado dentro deste objeto, fazendo x.x1, 401 00:21:21,850 --> 00:21:23,400 por exemplo, e eu recebo uma volta. 402 00:21:23,400 --> 00:21:29,590 Da mesma forma, x.x2, obter esse valor de volta. 403 00:21:29,590 --> 00:21:33,330 >> E agora a coisa é muito legal, eu posso realmente acrescentar algo a este objeto 404 00:21:33,330 --> 00:21:34,316 depois que eu criei. 405 00:21:34,316 --> 00:21:36,315 Então você pode imaginar, vamos dizem que eu tenho uma função. 406 00:21:36,315 --> 00:21:44,430 407 00:21:44,430 --> 00:21:46,352 >> HUGH ZABRISKIE: Você tem que fazer Shift-Enter. 408 00:21:46,352 --> 00:21:47,643 >> SAM VERDE: Ah, isso é irritante. 409 00:21:47,643 --> 00:22:02,460 410 00:22:02,460 --> 00:22:04,324 O que ele não gosta? 411 00:22:04,324 --> 00:22:04,824 Oh. 412 00:22:04,824 --> 00:22:07,532 413 00:22:07,532 --> 00:22:08,691 Aqui vamos nós. 414 00:22:08,691 --> 00:22:09,190 Frio. 415 00:22:09,190 --> 00:22:12,840 >> Então, eu criei apenas Esta função, f, que 416 00:22:12,840 --> 00:22:17,590 está indo para ir para a corrente objeto e impressão this.x1. 417 00:22:17,590 --> 00:22:20,330 Então, se eu apenas chamar por f em si, nada está acontecendo 418 00:22:20,330 --> 00:22:26,970 a acontecer, né, porque não há x1 campo no objeto que ele está se referindo. 419 00:22:26,970 --> 00:22:39,710 Mas, se eu digo, x.f = f, e então eu chamar x.f (), eu vou voltar 1. 420 00:22:39,710 --> 00:22:42,990 421 00:22:42,990 --> 00:22:46,530 Essa função f é agora associado com o objeto x, 422 00:22:46,530 --> 00:22:51,800 que tem uma chave chamada x1 associada com o valor de 1, 423 00:22:51,800 --> 00:22:54,570 por isso, quando nós chamamos this.x1, é vai encontrar o que está procurando 424 00:22:54,570 --> 00:22:56,450 e ser capaz de imprimir um valor fora. 425 00:22:56,450 --> 00:22:58,700 Então, isso é apenas um exemplo do tipo das coisas loucas 426 00:22:58,700 --> 00:23:01,190 você pode fazer com objetos em JavaScript. 427 00:23:01,190 --> 00:23:03,870 428 00:23:03,870 --> 00:23:07,560 >> Então, essa versão foi a versão genérica, significado 429 00:23:07,560 --> 00:23:13,780 que criamos um objeto usando este parênteses notação cinta notation--, 430 00:23:13,780 --> 00:23:16,880 rather-- e isso é calhar se nós só queremos 431 00:23:16,880 --> 00:23:21,440 uma instância de um objeto específico, mas E se nós queremos ter mais do que um 432 00:23:21,440 --> 00:23:22,210 do mesmo tipo? 433 00:23:22,210 --> 00:23:24,440 E a resposta para isso pergunta é, há coisas 434 00:23:24,440 --> 00:23:26,760 chamadas classes em JavaScript também. 435 00:23:26,760 --> 00:23:31,470 436 00:23:31,470 --> 00:23:36,420 Nós podemos criar uma função que faz algum tipo de inicialização 437 00:23:36,420 --> 00:23:41,690 para um objeto estranho, e nós diríamos, como, 438 00:23:41,690 --> 00:23:44,550 minha class-- por isso o nome do object-- reutilizável 439 00:23:44,550 --> 00:23:47,100 é igual a função que define-lo. 440 00:23:47,100 --> 00:23:52,280 Então, o que isso seria equivalente a está criando um objeto que 441 00:23:52,280 --> 00:23:55,930 seria apenas como, chaveta, str, cólon, 442 00:23:55,930 --> 00:23:59,630 esta é uma cadeia, ponto e vírgula, chaveta. 443 00:23:59,630 --> 00:24:01,880 Isso seria o genérico objeto que inicializar, 444 00:24:01,880 --> 00:24:06,380 com a única diferença sendo a linhas seguintes, criamos um protótipo, que 445 00:24:06,380 --> 00:24:11,190 significa que é uma chave padrão que nós adicionamos ao nosso objeto que 446 00:24:11,190 --> 00:24:13,970 tem o valor listado aqui. 447 00:24:13,970 --> 00:24:20,570 O que significa que, quando eu criar um novo instância deste objeto MyClass, 448 00:24:20,570 --> 00:24:27,440 ele vai ter pré-construído dentro de ele um valor chamado str e outro valor 449 00:24:27,440 --> 00:24:32,418 myPrint chamado, que é vai ser uma função. 450 00:24:32,418 --> 00:24:32,918 Fantástica. 451 00:24:32,918 --> 00:24:37,410 452 00:24:37,410 --> 00:24:37,990 >> Ótimo. 453 00:24:37,990 --> 00:24:40,710 Então a última coisa a dizer sobre JavaScript 454 00:24:40,710 --> 00:24:46,430 é que é realmente útil para o que são chamadas operações assíncronas. 455 00:24:46,430 --> 00:24:52,500 Meios que é assíncrona pode esperar por alguma operação 456 00:24:52,500 --> 00:24:57,870 para completar antes de avançarmos em campo, mas seguir em frente, enquanto esperamos 457 00:24:57,870 --> 00:24:59,690 e, em seguida, ter algo acontecer mais tarde. 458 00:24:59,690 --> 00:25:03,480 E o que quero dizer com isso é que você pode imaginar uma situação em que 459 00:25:03,480 --> 00:25:06,850 você envia uma solicitação para algum servidor web em algum lugar, 460 00:25:06,850 --> 00:25:09,670 e ele vai mandar você de volta algum pedaço grande de dados, certo? 461 00:25:09,670 --> 00:25:13,320 E o usuário poderia esperar no Entretanto para que isso aconteça, 462 00:25:13,320 --> 00:25:15,200 e nada poderia ser acontecendo naquele momento. 463 00:25:15,200 --> 00:25:18,110 Mas isso não é um grande projeto, certo? 464 00:25:18,110 --> 00:25:20,214 Você não quer que a página da web para congelar. 465 00:25:20,214 --> 00:25:22,380 E se o usuário quiser clicar em um menu drop-down? 466 00:25:22,380 --> 00:25:24,870 Não é um grande padrão de design. 467 00:25:24,870 --> 00:25:29,290 Em vez disso, basicamente o que O JavaScript é diz, 468 00:25:29,290 --> 00:25:31,870 OK, fazer esta operação de forma assíncrona. 469 00:25:31,870 --> 00:25:36,520 Assim como, esperar no fundo, e em seguida, quando a operação é efectuada, 470 00:25:36,520 --> 00:25:39,420 chamar o callback function-- chamar alguma função, 471 00:25:39,420 --> 00:25:43,800 que alguns Action-- para sinalizar que o operação estávamos à espera de terminar 472 00:25:43,800 --> 00:25:45,520 acabou. 473 00:25:45,520 --> 00:25:51,240 E a razão que é super poderoso é, nós podemos fazer alguma coisa, passar um argumento, 474 00:25:51,240 --> 00:25:54,440 fazer alguma coisa, e depois esperar para que algo aconteça. 475 00:25:54,440 --> 00:25:58,970 Então, uma vez que algo conclui, podemos chamar um callback. 476 00:25:58,970 --> 00:26:03,300 Isso é realmente útil porque permite nós fazemos as coisas com Web API de áudio, 477 00:26:03,300 --> 00:26:07,490 por exemplo, como uma carga arquivo de áudio a partir de um servidor remoto 478 00:26:07,490 --> 00:26:11,660 sem ter que esperar para o Toda ficheiro de áudio a ser carregado, 479 00:26:11,660 --> 00:26:14,440 o que seria realmente ruim para a experiência do usuário. 480 00:26:14,440 --> 00:26:17,080 Frio. 481 00:26:17,080 --> 00:26:19,460 >> Última casal notas sobre depuração, uma vez que este 482 00:26:19,460 --> 00:26:23,682 é uma coisa que você vai ter que fazer como parte de seu projeto, garantido. 483 00:26:23,682 --> 00:26:25,140 Eu mencionei o console JavaScript. 484 00:26:25,140 --> 00:26:27,550 É um recurso super útil de todos os navegadores modernos, 485 00:26:27,550 --> 00:26:30,300 E nós realmente incentivá-lo a obter confortável usando seu console, 486 00:26:30,300 --> 00:26:33,660 se você quiser ficar bom em JavaScript. 487 00:26:33,660 --> 00:26:36,320 É super prático para depuração, mas também é 488 00:26:36,320 --> 00:26:39,440 realmente útil para descobrir como usar uma API. 489 00:26:39,440 --> 00:26:41,950 Ele permite realmente experimentação fácil 490 00:26:41,950 --> 00:26:45,910 sem ter que digitar alguns código, e, em seguida, compilá-lo. 491 00:26:45,910 --> 00:26:47,500 Você não tem que fazer todas essas etapas. 492 00:26:47,500 --> 00:26:49,619 Você pode apenas escrever algum código em uma linha, 493 00:26:49,619 --> 00:26:52,410 e, em seguida, obter um feedback imediato sobre se ou não essa linha de código 494 00:26:52,410 --> 00:26:55,230 worked-- muito útil. 495 00:26:55,230 --> 00:26:59,760 >> E também, apenas um note-- técnico o console JavaScript é um exemplo 496 00:26:59,760 --> 00:27:05,680 de um modo que é REPL-- R-E-P-L, REPL, que está para ler, avaliar, 497 00:27:05,680 --> 00:27:06,180 loop de impressão. 498 00:27:06,180 --> 00:27:09,100 499 00:27:09,100 --> 00:27:12,120 Você está indo para escrever algumas coisas em, ele vai ler o que você digitou, 500 00:27:12,120 --> 00:27:17,280 ele vai avaliá-lo, e ele vai imprimir o saída, e então ele vai começar de novo. 501 00:27:17,280 --> 00:27:22,056 Isso permite que você vá rapidamente em círculos iteração, o que é muito legal. 502 00:27:22,056 --> 00:27:25,150 503 00:27:25,150 --> 00:27:28,930 >> Eu acho que esta verdadeira última note-- é a última nota real, sim. 504 00:27:28,930 --> 00:27:30,780 Como é que vamos realmente usar JavaScript? 505 00:27:30,780 --> 00:27:34,040 Então, primeiro, podemos importar -lo usando uma tag de script 506 00:27:34,040 --> 00:27:39,500 na parte superior ou inferior de um HTML file-- em qualquer lugar dentro de um arquivo HTML, 507 00:27:39,500 --> 00:27:40,440 realmente. 508 00:27:40,440 --> 00:27:47,390 E dentro de uma tag de script, há dois sub-modos de importação de JavaScript. 509 00:27:47,390 --> 00:27:51,370 O primeiro é através de um arquivo JavaScript separado 510 00:27:51,370 --> 00:27:58,010 que nós importamos em sua totalidade, ou por ter uma área de código como roteiro 511 00:27:58,010 --> 00:28:00,290 para começar, e, em seguida, script de barra invertida ao fim. 512 00:28:00,290 --> 00:28:02,620 E então nós apenas escrever JavaScript dentro do arquivo HTML. 513 00:28:02,620 --> 00:28:03,790 Essas são as duas maneiras. 514 00:28:03,790 --> 00:28:05,165 Você não pode tê-lo dentro de HTML. 515 00:28:05,165 --> 00:28:06,502 516 00:28:06,502 --> 00:28:08,126 AUDIÊNCIA: É um melhor que o outro? 517 00:28:08,126 --> 00:28:10,542 SAM VERDE: A pergunta era: Um é melhor que o outro. 518 00:28:10,542 --> 00:28:18,306 Então, sim, como uma prática de estilo de codificação, e também é como uma prática de design. 519 00:28:18,306 --> 00:28:20,180 Existem duas razões por que ele pode ser melhor. 520 00:28:20,180 --> 00:28:23,934 O primeiro é, ele faz o seu código de um muito mais legível se todo o seu HTML 521 00:28:23,934 --> 00:28:27,100 é em um lugar, todo o seu CSS está em outro lugar, todo o seu JavaScript 522 00:28:27,100 --> 00:28:28,420 está em um terceiro lugar. 523 00:28:28,420 --> 00:28:28,920 Certo? 524 00:28:28,920 --> 00:28:32,370 Acho que já deveria ter falado sobre isso em sections-- como o que CSS-- 525 00:28:32,370 --> 00:28:35,220 que é-- e vai muitas vezes em outro arquivo. 526 00:28:35,220 --> 00:28:37,090 Assim, mesmo tipo de conceito aqui. 527 00:28:37,090 --> 00:28:42,410 Você também pode imaginar que o JavaScript seria reutilizada em mais de um 528 00:28:42,410 --> 00:28:47,350 A página HTML, ou talvez um grande número de páginas HTML, 529 00:28:47,350 --> 00:28:49,340 e ter que JavaScript reformulado em um 530 00:28:49,340 --> 00:28:51,950 arquivo que você pode importar em mais de um lugar 531 00:28:51,950 --> 00:28:54,570 permite que o código seja maneira mais sustentável. 532 00:28:54,570 --> 00:28:57,930 Você pode imaginar fazendo um mudar para o JavaScript 533 00:28:57,930 --> 00:29:00,070 e ter que alterá-lo 100 em ficheiros diferentes. 534 00:29:00,070 --> 00:29:04,070 E em vez disso, pode simplesmente mudá-lo em um, que é muito mais poderoso. 535 00:29:04,070 --> 00:29:05,420 Será que eu responder a sua pergunta? 536 00:29:05,420 --> 00:29:07,950 Frio. 537 00:29:07,950 --> 00:29:10,830 >> Nós também pode digitar no console, como já mencionei antes. 538 00:29:10,830 --> 00:29:15,070 E, novamente, uma última note-- Web Audio é construído em, 539 00:29:15,070 --> 00:29:16,978 você não precisa carregar nada. 540 00:29:16,978 --> 00:29:17,478 Frio. 541 00:29:17,478 --> 00:29:20,519 Há alguma pergunta, você tem qualquer mais perguntas sobre JavaScript, 542 00:29:20,519 --> 00:29:21,930 antes de seguir em frente? 543 00:29:21,930 --> 00:29:24,286 >> AUDIÊNCIA: [inaudível] 544 00:29:24,286 --> 00:29:25,410 SAM VERDE: Tudo bem, legal. 545 00:29:25,410 --> 00:29:27,200 Então, agora ele vai falar sobre a API. 546 00:29:27,200 --> 00:29:28,490 >> HUGH ZABRISKIE: Cool. 547 00:29:28,490 --> 00:29:28,990 Obrigado, Sam. 548 00:29:28,990 --> 00:29:30,184 >> SAM VERDE: Claro. 549 00:29:30,184 --> 00:29:32,600 HUGH ZABRISKIE: Awesome, de modo nós vamos passar de JavaScript. 550 00:29:32,600 --> 00:29:35,350 Então, nós já conversamos sobre alguns dos os fundamentos de JavaScript, 551 00:29:35,350 --> 00:29:41,105 e essas são as variáveis, funções, objetos, funciona como variáveis, 552 00:29:41,105 --> 00:29:41,980 carregamento assíncrono. 553 00:29:41,980 --> 00:29:46,100 Estas são todas as coisas que você vai veja como você usa o Web Audio. 554 00:29:46,100 --> 00:29:49,230 Então, nós apenas estamos indo para falar sobre isso primeiro em um nível elevado. 555 00:29:49,230 --> 00:29:52,120 >> É uma API, por isso é algo que é construído, como Sam disse, 556 00:29:52,120 --> 00:29:57,010 para a direita no JavaScript que você usa no console. 557 00:29:57,010 --> 00:30:01,020 E é realmente apenas como código C ++ que é realmente construído no Chrome 558 00:30:01,020 --> 00:30:04,470 e Firefox, e todos esses navegadores. 559 00:30:04,470 --> 00:30:07,060 Assim, a idéia principal com Web Áudio é que você tem 560 00:30:07,060 --> 00:30:09,440 este tipo de encanamento de áudio, certo? 561 00:30:09,440 --> 00:30:13,670 Assim, seus dados de áudio vem em de alguma forma. 562 00:30:13,670 --> 00:30:16,690 >> Existem três tipos de forms-- principal você tem o oscilador, que 563 00:30:16,690 --> 00:30:21,340 cria uma onda senoidal, onda cosseno, vamos ver como isso funciona. 564 00:30:21,340 --> 00:30:23,890 Outro muito comum, é claro, é um leitor de MP3. 565 00:30:23,890 --> 00:30:25,810 Então, talvez você comece com uma canção, e então você 566 00:30:25,810 --> 00:30:28,320 quer fazer alguma filtragem e que a saída 567 00:30:28,320 --> 00:30:30,605 isso-- que poderia ser uma fonte possível. 568 00:30:30,605 --> 00:30:32,480 E, em seguida, um muito legal um é o microfone. 569 00:30:32,480 --> 00:30:37,230 Assim você pode usar algumas muito chamadas básicas em JavaScript 570 00:30:37,230 --> 00:30:39,440 para obter acesso ao microfone, e por isso, se você 571 00:30:39,440 --> 00:30:42,870 queria fazer uma app como um detector de campo, 572 00:30:42,870 --> 00:30:45,290 por exemplo, que leva em sua voz e descobre 573 00:30:45,290 --> 00:30:47,740 a maneira muito fácil pitch-- a isso. 574 00:30:47,740 --> 00:30:50,730 Você pode apenas tipo de lê-lo em, descobrir a freqüência, 575 00:30:50,730 --> 00:30:52,250 e, em seguida, um número de saída. 576 00:30:52,250 --> 00:30:56,080 Então, vamos ver como isso funciona, também. 577 00:30:56,080 --> 00:30:59,430 >> O destino é basicamente onde os dados de áudio é emitido. 578 00:30:59,430 --> 00:31:02,890 Assim, em geral, que é como os alto-falantes portáteis. 579 00:31:02,890 --> 00:31:05,610 Outras opções são como um ScriptProcessorNode-- 580 00:31:05,610 --> 00:31:07,990 nós vamos chegar a nós em um second-- mas basicamente, 581 00:31:07,990 --> 00:31:11,939 ou você está colocando para fora som através do seu computador por meio de alto-falantes, 582 00:31:11,939 --> 00:31:14,730 ou você está tipo de gravação, por isso você está armazenando-o como dados de áudio. 583 00:31:14,730 --> 00:31:18,980 Então, talvez se alguém cria música no seu aplicativo e, em seguida, 584 00:31:18,980 --> 00:31:22,410 que pretende gravar isso e talvez como exportá-lo para SoundCloud, por example-- 585 00:31:22,410 --> 00:31:25,281 que seria uma maneira de fazer isso. 586 00:31:25,281 --> 00:31:27,030 Todas as coisas divertidas, que nós vamos falar sobre, 587 00:31:27,030 --> 00:31:29,950 acontece entre estes dois pontos, onde nós carregamos na música 588 00:31:29,950 --> 00:31:31,410 e, em seguida, que a saída. 589 00:31:31,410 --> 00:31:36,660 >> Então, eu estou indo para falar sobre os cinco estágios de produção de áudio em um segundo. 590 00:31:36,660 --> 00:31:38,950 Nós temos essa coisa chamada um AudioContext, que 591 00:31:38,950 --> 00:31:41,580 é este pequeno invólucro que vemos aqui. 592 00:31:41,580 --> 00:31:49,980 Basicamente o que AudioContext é-- se vá para o console JavaScript agora, 593 00:31:49,980 --> 00:31:52,740 podemos criar um agora. 594 00:31:52,740 --> 00:31:54,040 Apenas um exemplo de REPL, certo? 595 00:31:54,040 --> 00:31:57,880 Estamos lendo, avaliação e imprime. 596 00:31:57,880 --> 00:32:00,260 >> AudioContext é um estado global. 597 00:32:00,260 --> 00:32:05,500 É uma estrutura, que é um objeto aqui, e mantém informações 598 00:32:05,500 --> 00:32:09,960 sobre as coisas que estão acontecendo no ecrã relacionado a áudio. 599 00:32:09,960 --> 00:32:15,220 Um exemplo é a hora atual. 600 00:32:15,220 --> 00:32:18,910 Isto diz-lhe o número de segundos, com muita precisão, 601 00:32:18,910 --> 00:32:20,890 desde que a página web carregado. 602 00:32:20,890 --> 00:32:24,110 Portanto, este é um muito útil pouco propriedade que você pode usar. 603 00:32:24,110 --> 00:32:27,898 É ler only-- Eu acho que, na verdade, você pode tentar definir um valor. 604 00:32:27,898 --> 00:32:29,856 Ele vai dizer-lhe configurá-lo, e então se você imprimi-lo 605 00:32:29,856 --> 00:32:31,439 novamente-- isso não aconteceu realmente muito trabalho. 606 00:32:31,439 --> 00:32:34,472 Portanto, há somente leitura propriedades em JavaScript. 607 00:32:34,472 --> 00:32:36,430 Isto é realmente útil se você está tipo de sincronização 608 00:32:36,430 --> 00:32:38,610 um monte de diferente informação, quando você está 609 00:32:38,610 --> 00:32:41,280 tipo de reprodução de sons diferentes. 610 00:32:41,280 --> 00:32:43,630 >> Outra realmente útil é o destino contexto. 611 00:32:43,630 --> 00:32:46,587 612 00:32:46,587 --> 00:32:49,670 Definitivamente, se você estiver interessado, ser tentar isso em seu próprio direito consola 613 00:32:49,670 --> 00:32:50,980 agora. 614 00:32:50,980 --> 00:32:53,150 Portanto, este é um AudioDestinationNode. 615 00:32:53,150 --> 00:32:56,480 Basicamente o que isto diz é: onde está a saída indo? 616 00:32:56,480 --> 00:32:59,590 Portanto, há duas opções reais aqui. 617 00:32:59,590 --> 00:33:01,940 Normalmente, o padrão é apenas os alto-falantes, 618 00:33:01,940 --> 00:33:05,150 assim AudioDestinationNode basicamente, apenas diz 619 00:33:05,150 --> 00:33:09,240 há zero saídas para o som chegando, enviado para o alto-falante. 620 00:33:09,240 --> 00:33:12,050 Assim, em geral, você não tem que jogar com isso. 621 00:33:12,050 --> 00:33:15,720 Se você estiver interessado em realmente usando o ScriptProcessorNode para a gravação, 622 00:33:15,720 --> 00:33:16,990 definitivamente atirar-me um e-mail mais tarde porque é isso 623 00:33:16,990 --> 00:33:18,330 um pouco mais complicado. 624 00:33:18,330 --> 00:33:21,590 Mas, geralmente, você é apenas um tipo de saída de som de alguma forma. 625 00:33:21,590 --> 00:33:24,347 Tão legal, vamos pular de volta aqui. 626 00:33:24,347 --> 00:33:25,180 AUDIÊNCIA: Eu sinto muito. 627 00:33:25,180 --> 00:33:26,054 HUGH ZABRISKIE: Yeah. 628 00:33:26,054 --> 00:33:28,770 AUDIÊNCIA: Eu sei que você disse para falar com você mais tarde sobre a gravação. 629 00:33:28,770 --> 00:33:31,550 Você pode fazer interface que com o Pro Tools? 630 00:33:31,550 --> 00:33:33,120 >> HUGH ZABRISKIE: Com o Pro Tools? 631 00:33:33,120 --> 00:33:35,260 Vamos ver. 632 00:33:35,260 --> 00:33:37,220 Acho que não. 633 00:33:37,220 --> 00:33:41,670 Então, indo entre o cliente, que é o JavaScript 634 00:33:41,670 --> 00:33:44,310 console, e seu real computador, é geralmente 635 00:33:44,310 --> 00:33:46,490 algo que é meio de fora dos limites, se você 636 00:33:46,490 --> 00:33:52,320 vai, tipo pela natureza do as-- é um tipo de coisa design, 637 00:33:52,320 --> 00:33:57,770 mas você tenta manter o navegador separado de computador real do usuário. 638 00:33:57,770 --> 00:34:02,310 Geralmente, a única coisa que você é capaz de acesso é o microfone ou a câmera. 639 00:34:02,310 --> 00:34:04,730 Você não é capaz de, I Não acho, utilize o Pro Tools. 640 00:34:04,730 --> 00:34:07,480 No entanto, se você criou uma faixa em Pro Tools, 641 00:34:07,480 --> 00:34:12,710 exportado isso, você pode carregar esse aqui, filtrá-lo, por exemplo, 642 00:34:12,710 --> 00:34:16,820 processo que, e gravar isso em um Áudio Destination-- ou, Não-- uma Esfera 643 00:34:16,820 --> 00:34:17,870 Nó processador. 644 00:34:17,870 --> 00:34:20,730 E, em seguida, a partir daí, você poderia exportar isso para SoundCloud, você 645 00:34:20,730 --> 00:34:25,320 poderia enviá-lo por e-mail, ou o que quer que você gosta de lá. 646 00:34:25,320 --> 00:34:31,159 >> Mas há uma espécie de barreira ligeira entre fazer música em seu computador 647 00:34:31,159 --> 00:34:33,050 e fazer música online. 648 00:34:33,050 --> 00:34:37,940 >> SAM VERDE: E isso é não exclusivo para esta API. 649 00:34:37,940 --> 00:34:44,060 É uma característica do Chrome segurança, e Eu acho que todos os outros navegadores modernos. 650 00:34:44,060 --> 00:34:45,860 O navegador é auto-suficiente. 651 00:34:45,860 --> 00:34:50,980 Assim, por exemplo, uma página web não pode usar JavaScript para desligar o som 652 00:34:50,980 --> 00:34:54,190 em seus alto-falantes, por exemplo. 653 00:34:54,190 --> 00:34:58,120 Ou ele não pode desligar o computador. 654 00:34:58,120 --> 00:35:01,530 E não há nenhum ponto intermediário entre essas duas coisas, né, 655 00:35:01,530 --> 00:35:05,960 por isso ou você tem um completa abstração, 656 00:35:05,960 --> 00:35:10,050 ou você abrir o falha de deixar de segurança 657 00:35:10,050 --> 00:35:14,440 um programador com más intenções fazer o que quiser com o seu laptop. 658 00:35:14,440 --> 00:35:18,104 E é por isso Chrome é auto-suficiente. 659 00:35:18,104 --> 00:35:19,310 >> HUGH ZABRISKIE: Yeah. 660 00:35:19,310 --> 00:35:20,840 Isso faz sentido? 661 00:35:20,840 --> 00:35:21,369 Legal legal. 662 00:35:21,369 --> 00:35:23,160 Eu estava apenas indo para mostram um exemplo de um. 663 00:35:23,160 --> 00:35:25,118 Isso é muito bonito como medida em que você começa, em termos 664 00:35:25,118 --> 00:35:26,950 de acessar o computador do usuário. 665 00:35:26,950 --> 00:35:30,180 Se você tiver um teclado USB conectado, você pode usar algo chamado de Web 666 00:35:30,180 --> 00:35:32,180 MIDI API, que não vamos realmente falar aqui, 667 00:35:32,180 --> 00:35:36,330 mas esta é uma outra API que é construída em pelo menos Chrome-- novamente, 668 00:35:36,330 --> 00:35:41,570 é por isso que nós amamos Chrome-- Eu acho que o Firefox ou o Safari, 669 00:35:41,570 --> 00:35:44,300 isso é uma coisa fácil de navegadores diferentes têm google-- 670 00:35:44,300 --> 00:35:46,917 suporte diferente para o qual APIs eles implementaram. 671 00:35:46,917 --> 00:35:49,875 Mas se você quiser conectar um teclado e trabalhar com essa informação, 672 00:35:49,875 --> 00:35:52,850 tipo de enviar o teclado informações sobre para o computador 673 00:35:52,850 --> 00:35:57,620 e depois usar essa linha, essa API é onde você estaria trabalhando isso. 674 00:35:57,620 --> 00:35:58,150 >> Frio. 675 00:35:58,150 --> 00:35:58,710 ESTÁ BEM. 676 00:35:58,710 --> 00:36:01,320 Assim, movendo-se rapidamente em aqui. 677 00:36:01,320 --> 00:36:03,310 Como estamos nos saindo na hora certa? 678 00:36:03,310 --> 00:36:04,210 >> COLUNA 1: Cerca de 15. 679 00:36:04,210 --> 00:36:05,543 >> HUGH ZABRISKIE: 15 minutos deixou? 680 00:36:05,543 --> 00:36:06,160 OK legal. 681 00:36:06,160 --> 00:36:08,170 Então, vamos correr à frente aqui. 682 00:36:08,170 --> 00:36:13,500 >> Então, basicamente, o principal ponto de pensar nisso como um oleoduto 683 00:36:13,500 --> 00:36:16,430 é que cada passo na calha é uma série de nós de áudio. 684 00:36:16,430 --> 00:36:19,284 685 00:36:19,284 --> 00:36:20,950 Nossa fonte, digamos, é um oscilador. 686 00:36:20,950 --> 00:36:23,380 Precisamos criar um nó de oscilador. 687 00:36:23,380 --> 00:36:25,690 E isso é apenas um tipo do pequeno function-- 688 00:36:25,690 --> 00:36:30,460 e eles estão todos baseados fora do contexto aqui áudio. 689 00:36:30,460 --> 00:36:32,885 >> AUDIÊNCIA: Quando ele disse oscilador, isso significa 690 00:36:32,885 --> 00:36:37,250 é, na verdade, literalmente, indo de dois pólos diferentes e para trás? 691 00:36:37,250 --> 00:36:41,170 >> HUGH ZABRISKIE: Não, é como uma representação digital. 692 00:36:41,170 --> 00:36:42,740 É realmente implementado em C ++. 693 00:36:42,740 --> 00:36:46,460 Na verdade, eu não sei as especificações de como é realmente implementado, 694 00:36:46,460 --> 00:36:48,500 mas tudo isso está funcionando como dados binários. 695 00:36:48,500 --> 00:36:51,260 696 00:36:51,260 --> 00:36:52,370 Na verdade, sim. 697 00:36:52,370 --> 00:36:53,950 Isso seria dizer, eu poderia na verdade, se você estiver interessado, 698 00:36:53,950 --> 00:36:56,533 Eu poderia enviar-lhe um pouco mais informações sobre como formas de onda 699 00:36:56,533 --> 00:37:00,181 são mantidos tendo um formato digital. 700 00:37:00,181 --> 00:37:00,680 OK legal. 701 00:37:00,680 --> 00:37:03,120 >> Então, nós estamos gerando um tom como um sine acenar ou algo assim, talvez 702 00:37:03,120 --> 00:37:04,190 440 Hertz. 703 00:37:04,190 --> 00:37:05,830 Criamos um oscilador. 704 00:37:05,830 --> 00:37:09,180 Se queremos definir o volume, nós conecte nada a um GainNode, 705 00:37:09,180 --> 00:37:12,500 que poderia fazer com .creategain. 706 00:37:12,500 --> 00:37:14,250 Que define o seu volume. 707 00:37:14,250 --> 00:37:17,820 Você pode passar que em qualquer de outro opções-- bem, 708 00:37:17,820 --> 00:37:20,300 assim uma fonte de buffer de áudio nó é o lugar onde você pode 709 00:37:20,300 --> 00:37:23,660 armazenar um arquivo MP3 que você tenha carregado no. 710 00:37:23,660 --> 00:37:27,670 >> Filtro para filtragem é Biquad se você quer tirar toda a base para fora 711 00:37:27,670 --> 00:37:29,630 de uma música, ou algo parecido. 712 00:37:29,630 --> 00:37:32,450 Deus me livre você quer tomar a base de uma canção. 713 00:37:32,450 --> 00:37:36,980 E nó AudioDestination é, novamente, como onde nossa finalização é. 714 00:37:36,980 --> 00:37:39,980 Se você está sempre interessado em ver todas as diferentes opções possíveis, 715 00:37:39,980 --> 00:37:45,190 basta ir à guia e deixá a completa auto-vir para cima. 716 00:37:45,190 --> 00:37:48,690 E se você criar, você vai ver todas as coisas diferentes que você pode criar. 717 00:37:48,690 --> 00:37:50,398 Você pode criar dinâmica processadores de script, 718 00:37:50,398 --> 00:37:52,940 Eu nem sequer sei o que isso é, para a mistura de fusões de canal 719 00:37:52,940 --> 00:37:55,930 e divisores de canal e tudo isso. 720 00:37:55,930 --> 00:37:56,430 Frio. 721 00:37:56,430 --> 00:37:59,560 722 00:37:59,560 --> 00:38:01,390 >> Portanto, esta é apenas uma exemplo de um gasoduto. 723 00:38:01,390 --> 00:38:03,580 Portanto, temos três fontes entrando. 724 00:38:03,580 --> 00:38:06,830 Talvez estas são formas de onda, talvez estes são MP3s. 725 00:38:06,830 --> 00:38:08,740 Um está passando por um filtro, outro de 726 00:38:08,740 --> 00:38:12,404 ficando distorcida outro um de panning esquerda e direita. 727 00:38:12,404 --> 00:38:15,320 Você pode fazer todo tipo de coisas e todos eles se misturam em torno juntos, 728 00:38:15,320 --> 00:38:18,880 e, em seguida, sai do áudio no final, como destino. 729 00:38:18,880 --> 00:38:22,720 Este é um exemplo do que mais complicado código de Áudio Web parece. 730 00:38:22,720 --> 00:38:26,720 Você está criando todos estes objetos diferentes direito aqui-- 731 00:38:26,720 --> 00:38:27,706 Eu não tenho certeza disso. 732 00:38:27,706 --> 00:38:29,120 Não, ele não aumentar o zoom. 733 00:38:29,120 --> 00:38:29,620 ESTÁ BEM. 734 00:38:29,620 --> 00:38:31,257 >> SAM VERDE: Você faz de controle, Scroll-Up. 735 00:38:31,257 --> 00:38:32,590 HUGH ZABRISKIE: Controle Scroll-- 736 00:38:32,590 --> 00:38:33,000 SAM VERDE: Não, não. 737 00:38:33,000 --> 00:38:33,500 Ao controle-- 738 00:38:33,500 --> 00:38:36,540 739 00:38:36,540 --> 00:38:38,140 >> HUGH ZABRISKIE: Oh, controle, vá? 740 00:38:38,140 --> 00:38:38,780 Oh, gotcha. 741 00:38:38,780 --> 00:38:41,480 Sim. 742 00:38:41,480 --> 00:38:42,240 Wow, não, não tinha. 743 00:38:42,240 --> 00:38:42,740 ESTÁ BEM. 744 00:38:42,740 --> 00:38:46,090 Eu não vou fazer isso. 745 00:38:46,090 --> 00:38:48,300 >> Então, sim, neste primeiro seção aqui, você vê 746 00:38:48,300 --> 00:38:52,720 estamos criando todas estas diferentes nodos fora do contexto. 747 00:38:52,720 --> 00:38:54,980 Nós apenas estamos unindo- juntos na segunda parte 748 00:38:54,980 --> 00:38:56,980 por essa função chamado Conectar. 749 00:38:56,980 --> 00:38:58,830 Isso é realmente uma chave função em Web Audio. 750 00:38:58,830 --> 00:39:01,930 Significa apenas que uma vez que você fez algo com o som de um nó, 751 00:39:01,930 --> 00:39:03,705 passá-lo para o próximo nó. 752 00:39:03,705 --> 00:39:05,830 Portanto, temos a fonte, ele liga-se ao analisador, 753 00:39:05,830 --> 00:39:09,140 o analisador faz algo com ele, ele vai para a distorção, e assim por diante, 754 00:39:09,140 --> 00:39:12,725 e para o destino na parte inferior direita aqui. 755 00:39:12,725 --> 00:39:13,225 Frio. 756 00:39:13,225 --> 00:39:14,640 OK, por isso vamos continuar seguindo em frente. 757 00:39:14,640 --> 00:39:17,180 >> O pipeline-- novamente, estes são as condutas mais comuns, 758 00:39:17,180 --> 00:39:21,300 portanto, falar sobre todas essas coisas como distorção, panning, todas essas coisas. 759 00:39:21,300 --> 00:39:24,280 Se você estiver realmente interessado no uso de coisas Pro Tools, 760 00:39:24,280 --> 00:39:25,820 aqueles provavelmente lhe interessar. 761 00:39:25,820 --> 00:39:27,740 Se não, talvez você só quer reproduzir o som, 762 00:39:27,740 --> 00:39:29,990 ou talvez você só quer definir o volume do som. 763 00:39:29,990 --> 00:39:35,270 Esses são os dois tipo mais comum de gasodutos na produção de áudio. 764 00:39:35,270 --> 00:39:38,640 >> Mais uma vez, as maneiras que você pode levá-lo em como uma oscillator-- assim, vamos 765 00:39:38,640 --> 00:39:42,460 fazer uma demonstração de que aqui. 766 00:39:42,460 --> 00:39:47,090 767 00:39:47,090 --> 00:39:52,225 Então vamos criar um simples contexto áudio aqui, 768 00:39:52,225 --> 00:39:54,350 e de que vamos para criar o nosso oscilador. 769 00:39:54,350 --> 00:39:58,620 Então, isto é, de novo, nós somos apenas vai chamar Criar oscilador. 770 00:39:58,620 --> 00:40:07,030 Nós vamos definir uma frequência de que, 440 Hertz, favorito de todos. 771 00:40:07,030 --> 00:40:13,290 Em seguida, ligar para o destino que ponto-- que é o alto-falante, portanto, 772 00:40:13,290 --> 00:40:15,750 o destino contexto. 773 00:40:15,750 --> 00:40:21,400 Por fim, apenas dizer, começar de zero segundos a partir de agora, e não temos o som? 774 00:40:21,400 --> 00:40:22,400 >> [TOQUE] 775 00:40:22,400 --> 00:40:24,980 >> HUGH ZABRISKIE: Aqui vamos nós. 776 00:40:24,980 --> 00:40:25,940 É apenas uma onda senoidal. 777 00:40:25,940 --> 00:40:26,440 OK legal. 778 00:40:26,440 --> 00:40:28,274 E então nós vamos parar com isso. 779 00:40:28,274 --> 00:40:30,520 >> AUDIÊNCIA: Onde fiz que o feedback vem? 780 00:40:30,520 --> 00:40:31,250 >> HUGH ZABRISKIE: O feedback? 781 00:40:31,250 --> 00:40:32,458 Oh, provavelmente nossos microfones. 782 00:40:32,458 --> 00:40:34,221 783 00:40:34,221 --> 00:40:35,470 Então, sim, isso é como fazê-lo. 784 00:40:35,470 --> 00:40:37,261 E, na verdade, se eu tivesse manteve-o em execução, 785 00:40:37,261 --> 00:40:39,540 poderia ter a frequência valor como ele está correndo, 786 00:40:39,540 --> 00:40:43,320 de modo que é uma coisa divertida para brincar. 787 00:40:43,320 --> 00:40:44,930 Frio. 788 00:40:44,930 --> 00:40:46,600 Isso é sempre um adorável para apresentar. 789 00:40:46,600 --> 00:40:48,792 >> SAM VERDE: Nós não pensar sobre isso, nós fizemos? 790 00:40:48,792 --> 00:40:50,500 HUGH ZABRISKIE: Sim, Essa é uma pergunta desagradável. 791 00:40:50,500 --> 00:40:53,249 Então, buffer loading-- eu vou lhe mostrar uma exemplo de que no final. 792 00:40:53,249 --> 00:40:55,090 Isso é carregar um MP3. 793 00:40:55,090 --> 00:40:58,880 E microfone, você usa apenas uma função chamado Navigator.getUserMedia () 794 00:40:58,880 --> 00:41:03,240 para solicitar o acesso ao usuário do microfone para essa informação. 795 00:41:03,240 --> 00:41:05,610 >> Aqui está filtrando, eu vou apenas manter em movimento a partir deste. 796 00:41:05,610 --> 00:41:08,600 Isso é muito alto nível, mas os filtros apenas permitem que você 797 00:41:08,600 --> 00:41:16,154 >> [BIPE] 798 00:41:16,154 --> 00:41:18,320 Filtragem também permite que você para criar coisas como rosa 799 00:41:18,320 --> 00:41:20,050 ruído, o ruído marrom, ruído branco. 800 00:41:20,050 --> 00:41:24,330 Se você deseja criar ruído puro, que algumas pessoas gostam de mexer com, 801 00:41:24,330 --> 00:41:27,490 você pode usar o Web Audio filtragem de fazer isso. 802 00:41:27,490 --> 00:41:30,039 >> Áudio Panning-- então imagine se você estiver escrevendo um jogo 803 00:41:30,039 --> 00:41:32,330 e você deseja que o som soar como ele está vindo, como, 804 00:41:32,330 --> 00:41:36,090 atirando em toda a tela, você pode utilizar a filtração do áudio 805 00:41:36,090 --> 00:41:39,770 para criar este tipo de cone, como-- que é bastante mathy, 806 00:41:39,770 --> 00:41:41,850 mas é realmente muito legal se você obtê-lo trabalhar, 807 00:41:41,850 --> 00:41:44,500 e há algumas boas tutoriais sobre ele eu posso enviar-lhe. 808 00:41:44,500 --> 00:41:46,400 Basicamente, você pode tipo de criar o som 809 00:41:46,400 --> 00:41:50,480 de alguma coisa acontecendo por de uma forma 3D. 810 00:41:50,480 --> 00:41:57,350 E se você tem um interesse DJ, você pode começar a misturar e atravessar canções desvanecimento. 811 00:41:57,350 --> 00:42:01,260 >> Este é apenas alguns muito básico código, basicamente o que eu fiz antes. 812 00:42:01,260 --> 00:42:06,140 Isso define o volume do oscilador, por isso nós criamos nosso oscilador 813 00:42:06,140 --> 00:42:07,380 que cria a forma de onda. 814 00:42:07,380 --> 00:42:09,940 Nós criamos o nosso GainNode, definir nossa freqüência, 815 00:42:09,940 --> 00:42:14,170 e depois ligar o oscilador para o GainNode, que, em seguida, basicamente muda 816 00:42:14,170 --> 00:42:16,760 quanta sinal é permitido passar. 817 00:42:16,760 --> 00:42:20,467 Mas, realmente, é um Digital coisa, por isso é mais apenas-- sim. 818 00:42:20,467 --> 00:42:23,550 Isso não é o que está realmente acontecendo, mas é o que acontece na vida real 819 00:42:23,550 --> 00:42:24,393 com um ganho. 820 00:42:24,393 --> 00:42:27,258 >> AUDIÊNCIA: --quantization do parâmetro de volume? 821 00:42:27,258 --> 00:42:28,174 HUGH ZABRISKIE: Desculpe? 822 00:42:28,174 --> 00:42:30,360 AUDIÊNCIA: É um parâmetro de volume quantificado? 823 00:42:30,360 --> 00:42:31,840 HUGH ZABRISKIE: Yeah. 824 00:42:31,840 --> 00:42:34,620 E isso é uma coisa que eu sou realmente deficiente no meu conhecimento, 825 00:42:34,620 --> 00:42:38,010 como ganho trabalha em um nível digital. 826 00:42:38,010 --> 00:42:40,140 Eu sei que com real sinais, é basicamente 827 00:42:40,140 --> 00:42:45,120 controlar o quanto você está amplificar o sinal. 828 00:42:45,120 --> 00:42:47,017 Então sim. 829 00:42:47,017 --> 00:42:50,100 Vou enviar-lhe mais informações sobre isso, porque eu estaria curioso, na verdade, 830 00:42:50,100 --> 00:42:51,099 para saber mais sobre isso. 831 00:42:51,099 --> 00:42:54,090 Mas, basicamente, os parâmetros são, um é o fold-- 832 00:42:54,090 --> 00:42:59,690 o signal-- mais alto e zero não é nenhuma sinalizar, ou você não vai ouvir nenhum som. 833 00:42:59,690 --> 00:43:03,150 Vamos pular tempo demo para que, por causa é basicamente o que eu fiz antes. 834 00:43:03,150 --> 00:43:07,630 E, novamente, o Context.Destination é o nó-destino de áudio. 835 00:43:07,630 --> 00:43:08,360 Awesome, OK. 836 00:43:08,360 --> 00:43:10,470 >> Então, eu vou fazer um rápido dois demos. 837 00:43:10,470 --> 00:43:11,760 Como estamos nos saindo na hora certa? 838 00:43:11,760 --> 00:43:12,640 >> COLUNA 1: Cerca de 10 minutos. 839 00:43:12,640 --> 00:43:13,130 >> HUGH ZABRISKIE: 10 minutos? 840 00:43:13,130 --> 00:43:13,630 Ótimo! 841 00:43:13,630 --> 00:43:14,320 Fantástica. 842 00:43:14,320 --> 00:43:19,010 >> Assim, o primeiro que eu vou Não, ele é chamado My Favorite Song. 843 00:43:19,010 --> 00:43:22,410 Portanto, esta é apenas uma pouco HTML JavaScript. 844 00:43:22,410 --> 00:43:25,510 Nós vamos ter dois botões na página de jogar minha música favorita 845 00:43:25,510 --> 00:43:29,192 e parar a minha canção favorita. 846 00:43:29,192 --> 00:43:30,180 Eu vou mudar isso. 847 00:43:30,180 --> 00:43:32,110 >> AUDIÊNCIA: Cubra seu microfone. 848 00:43:32,110 --> 00:43:33,430 >> HUGH ZABRISKIE: Yeah. 849 00:43:33,430 --> 00:43:36,300 E eu tenho carregado aqui um script que basically-- 850 00:43:36,300 --> 00:43:38,520 e isso é realmente útil para carregar um MP3, 851 00:43:38,520 --> 00:43:41,820 de modo que este só faz carregar MP3s caminho mais rápido. 852 00:43:41,820 --> 00:43:44,180 É basicamente apenas um invólucro. 853 00:43:44,180 --> 00:43:48,737 Ela só faz o processo de carregando no MP3 muito mais rápido, 854 00:43:48,737 --> 00:43:51,570 caso contrário, você está usando solicitação HTTP, tipo de como o que estávamos fazendo 855 00:43:51,570 --> 00:43:53,950 na peça atual conjunto com Server. 856 00:43:53,950 --> 00:43:55,950 É realmente feia, você Não quero fazê-lo. 857 00:43:55,950 --> 00:44:04,110 >> Então esse cara, Boris PME, escreveu um realmente ferramenta pouco útil chamado BufferLoader. 858 00:44:04,110 --> 00:44:08,780 Tudo que você faz é simplesmente passá-lo a contexto, você passá-lo um lista-- 859 00:44:08,780 --> 00:44:11,327 ou, sim, é uma lista em JavaScript? 860 00:44:11,327 --> 00:44:12,160 SAM VERDE: Uma matriz. 861 00:44:12,160 --> 00:44:14,201 HUGH ZABRISKIE: Oh, é uma matriz, isso é certo. 862 00:44:14,201 --> 00:44:18,660 É uma matriz de caminhos para diferentes ficheiros. 863 00:44:18,660 --> 00:44:21,990 E então você passar uma função. 864 00:44:21,990 --> 00:44:25,530 Este é o retorno que nós estávamos falando sobre com carregamento assíncrono. 865 00:44:25,530 --> 00:44:28,720 Que será chamado uma vez que os arquivos carregados. 866 00:44:28,720 --> 00:44:33,780 E essa função que é chamada quando o arquivo é carregado toma como um perímetro 867 00:44:33,780 --> 00:44:35,840 uma série de tampões carregados. 868 00:44:35,840 --> 00:44:37,990 Assim que ocorre aqui. 869 00:44:37,990 --> 00:44:41,180 Basicamente, é BufferList vai ser um value-- 870 00:44:41,180 --> 00:44:46,380 ou ele vai ser uma matriz de um comprimento, que tem em si no índice 871 00:44:46,380 --> 00:44:51,320 zerar todo o arquivo carregado do MP3. 872 00:44:51,320 --> 00:44:53,320 Então, o que eu faço quando eu terminar carregamento é, eu simplesmente 873 00:44:53,320 --> 00:44:57,430 criar uma fonte de memória intermédia, que é um nó de origem do buffer de áudio. 874 00:44:57,430 --> 00:45:03,410 O próximo passo é carregar no I source.buffer como o tampão carregado completa 875 00:45:03,410 --> 00:45:06,740 do BufferList-- é um monte de buffers-- 876 00:45:06,740 --> 00:45:10,255 e, em seguida, você se conectar que o áudio tampão para o destino. 877 00:45:10,255 --> 00:45:12,380 Então, o que ele vai fazer é simplesmente colocar o MP3 878 00:45:12,380 --> 00:45:15,260 direto para a saída, e iniciá-lo imediatamente 879 00:45:15,260 --> 00:45:18,010 ao chegar esta chamada. 880 00:45:18,010 --> 00:45:21,660 >> Legal, então vamos ver isso acontecer em ação. 881 00:45:21,660 --> 00:45:24,490 Meu [inaudível] aqui, vamos ver. 882 00:45:24,490 --> 00:45:26,430 Então, eu estou indo só para iniciar um servidor de base. 883 00:45:26,430 --> 00:45:28,660 Isso é algo que você precisa fazer se você estiver 884 00:45:28,660 --> 00:45:32,490 fazer pedidos de carregamento de arquivos. 885 00:45:32,490 --> 00:45:34,140 Eu estou indo para iniciar um servidor de base. 886 00:45:34,140 --> 00:45:38,200 Este é basicamente todo o seu PSET agora em uma linha, 887 00:45:38,200 --> 00:45:43,930 mas está apenas começando um servidor na porta 80/80. 888 00:45:43,930 --> 00:45:47,300 Então vamos para cá, nós indo para carregar 80/80, 889 00:45:47,300 --> 00:45:49,110 nós estamos indo para ir para a minha música favorita. 890 00:45:49,110 --> 00:45:51,660 Então, se eu bater "Play my canção favorita "agora, 891 00:45:51,660 --> 00:45:53,964 ele vai carregar o meu canção favorita e jogar ele-- 892 00:45:53,964 --> 00:45:55,880 [MÚSICA - The Eagles, "VIDA NO RÁPIDO  FAIXA"] 893 00:45:55,880 --> 00:46:00,490 --que passa a ser "Life in Fast Lane ", dos Eagles. 894 00:46:00,490 --> 00:46:06,346 Agora, eu poderia bater "Pare meu canção favorita "e reproduzi-lo. 895 00:46:06,346 --> 00:46:09,160 >> [MÚSICA - The Eagles, "VIDA NO RÁPIDO  FAIXA"] 896 00:46:09,160 --> 00:46:18,340 >> E se eu passar por cima de consolar, porque Eu usei uma variável global aqui 897 00:46:18,340 --> 00:46:23,390 para acompanhar esse valor, ele, na verdade, vai agora ser reconhecido no console. 898 00:46:23,390 --> 00:46:25,160 Por isso, auto-cria para mim. 899 00:46:25,160 --> 00:46:29,991 Então, isso é o que está jogando agora, e eu posso simplesmente chamar source.stop () 900 00:46:29,991 --> 00:46:30,490 naquilo. 901 00:46:30,490 --> 00:46:34,930 902 00:46:34,930 --> 00:46:35,860 Bem, você sabe o quê? 903 00:46:35,860 --> 00:46:39,760 Só para vocês ouviram esta song-- você pode reconhecer essa música. 904 00:46:39,760 --> 00:46:41,801 >> [MUSIC - Rick Astley, "Never Gonna Give  VOCÊ UP "] 905 00:46:41,801 --> 00:46:42,299 906 00:46:42,299 --> 00:46:44,215 [MÚSICA - The Eagles, "VIDA NO RÁPIDO  FAIXA"] 907 00:46:44,215 --> 00:46:46,195 Temos agora de ser rickrolled. 908 00:46:46,195 --> 00:46:50,155 OK, ótimo, seguir em frente. 909 00:46:50,155 --> 00:46:51,160 Frio. 910 00:46:51,160 --> 00:46:54,554 Portanto, este é basicamente um exemplo de apenas como você poderia carregar um MP3 file-- 911 00:46:54,554 --> 00:46:56,470 [MÚSICA - The Eagles, "VIDA NO RÁPIDO  FAIXA"] 912 00:46:56,470 --> 00:46:59,590 --e jogá-lo, e parar e iniciá-lo. 913 00:46:59,590 --> 00:47:03,008 Eu poderia ter feito muito mais [inaudível] 914 00:47:03,008 --> 00:47:07,570 >> O último que eu vou fazer é, Eu vou lhe mostrar um [inaudível]. 915 00:47:07,570 --> 00:47:18,070 >> [Música tocando] 916 00:47:18,070 --> 00:47:21,800 >> É como se, ogg.wave.mp3. 917 00:47:21,800 --> 00:47:26,450 Eu acho que, se bem me lembro, Eu correr em alguns problemas com m4a, 918 00:47:26,450 --> 00:47:27,721 mas eu não tenho certeza sobre isso. 919 00:47:27,721 --> 00:47:28,470 Acho mp3.wave-- 920 00:47:28,470 --> 00:47:28,930 921 00:47:28,930 --> 00:47:30,971 >> [MUSIC - Rick Astley, "Never Gonna Give  VOCÊ UP "] 922 00:47:30,971 --> 00:47:35,930 923 00:47:35,930 --> 00:47:36,500 >> OK ótimo. 924 00:47:36,500 --> 00:47:37,625 Eu não deveria ter dito isso. 925 00:47:37,625 --> 00:47:40,570 De qualquer forma, Olá. 926 00:47:40,570 --> 00:47:43,430 927 00:47:43,430 --> 00:47:45,490 Então nós temos esta aberta. 928 00:47:45,490 --> 00:47:52,320 Portanto, agora tudo que eu faço é, eu basicamente criado a sintaxe básica para a criação de música. 929 00:47:52,320 --> 00:47:57,610 Então, se eu fizer algo como, adicione g4 em 1 de 2, o que isso significa é que, 930 00:47:57,610 --> 00:48:00,950 adicionar a nota piano, G4, que constitui a quarta L 931 00:48:00,950 --> 00:48:02,680 -se no piano do fundo. 932 00:48:02,680 --> 00:48:05,930 Portanto, este é tipo de MIDI fale, então para aqueles que são a música baseada, 933 00:48:05,930 --> 00:48:07,860 este é apenas notas MIDI. 934 00:48:07,860 --> 00:48:10,090 >> AUDIÊNCIA: Esse é o G do Médio C, certo? 935 00:48:10,090 --> 00:48:11,840 >> HANS ZABRISKIE: Este é o G acima Oriente C, isso é certo. 936 00:48:11,840 --> 00:48:12,470 >> AUDIÊNCIA: Acima Oriente C. 937 00:48:12,470 --> 00:48:13,345 >> HUGH ZABRISKIE: Yeah. 938 00:48:13,345 --> 00:48:14,340 Na verdade sim. 939 00:48:14,340 --> 00:48:16,131 Eu acho que eu realmente fiz é um [inaudível], 940 00:48:16,131 --> 00:48:18,860 então isso pode ser uma oitava acima disso. 941 00:48:18,860 --> 00:48:20,070 Então vamos ver. 942 00:48:20,070 --> 00:48:21,152 Se eu acertar Play-- 943 00:48:21,152 --> 00:48:22,110 [PIANO NOTA REPETITIVO] 944 00:48:22,110 --> 00:48:23,200 --we're vai ouvir isso. 945 00:48:23,200 --> 00:48:25,700 A idéia é que ela opera assim como uma linha de comando seria, 946 00:48:25,700 --> 00:48:27,510 por isso, se eu subir e descer no meu teclado, você 947 00:48:27,510 --> 00:48:31,550 pode voltar ao anterior comandos, o que é bastante útil. 948 00:48:31,550 --> 00:48:35,136 E abaixo é a minha lista de faixas, que são todos rodando em loop. 949 00:48:35,136 --> 00:48:38,260 >> AUDIÊNCIA: Você estava assumindo o Teclado de 88 teclas em que, certo? 950 00:48:38,260 --> 00:48:41,051 >> HUGH ZABRISKIE: A pergunta era: Eu estou assumindo um teclado de 88 teclas, 951 00:48:41,051 --> 00:48:41,990 e sim, eu sou. 952 00:48:41,990 --> 00:48:45,030 O que eu fiz é que eu basicamente, levou 88 amostras 953 00:48:45,030 --> 00:48:46,970 do piano, um para cada nota. 954 00:48:46,970 --> 00:48:49,180 E assim cada vez que você ouvir uma nota de agora em diante, 955 00:48:49,180 --> 00:48:57,550 que é efectivamente um circuito que parece como-- Isso está ficando jogado em loop, 956 00:48:57,550 --> 00:49:00,120 Assim, para cada nota, este está em execução. 957 00:49:00,120 --> 00:49:02,860 O que acontece é que eu criar um tampão novamente, 958 00:49:02,860 --> 00:49:06,010 Eu criar um nó de ganho para ajustar o volume. 959 00:49:06,010 --> 00:49:08,240 Isso só realmente um maneira complicada de dizer que 960 00:49:08,240 --> 00:49:10,550 armazenar o tampão em uma source.buffer. 961 00:49:10,550 --> 00:49:13,160 Dou-lhe o ganho, eu conecte-o ao ganho, 962 00:49:13,160 --> 00:49:15,576 o ganho é ligado ao saída, e então eu jogá-lo. 963 00:49:15,576 --> 00:49:20,735 Assim que é uma espécie de processo de tomar em uma fonte de buffer. 964 00:49:20,735 --> 00:49:24,820 >> AUDIÊNCIA: Você pode realmente ter que som seco e torná-lo molhado [inaudível]? 965 00:49:24,820 --> 00:49:26,260 >> HUGH ZABRISKIE: É possível, sim. 966 00:49:26,260 --> 00:49:29,260 Há re-verbo, há delay, distorção. 967 00:49:29,260 --> 00:49:33,260 Basicamente você pode colocar qualquer coisa em entre nesse sanduíche de-- bem, 968 00:49:33,260 --> 00:49:37,660 pipeline é uma metáfora melhor, mas você pode adicionar qualquer coisa em que. 969 00:49:37,660 --> 00:49:38,200 Frio. 970 00:49:38,200 --> 00:49:40,280 >> Então, eu vou terminar a demo aqui para dar-lhe um sentido 971 00:49:40,280 --> 00:49:46,390 de apenas o grande número de vezes que você pode executar essa função de uma só vez. 972 00:49:46,390 --> 00:49:49,280 Então, eu estou indo para remover isto. 973 00:49:49,280 --> 00:49:59,110 Eu estou indo para criar um gerador isso-- basicamente o que does-- isso é realmente 974 00:49:59,110 --> 00:50:04,220 tipo de syntax-- complicado, mas é vai gerar notas em tempo real, 975 00:50:04,220 --> 00:50:06,601 e apenas começar a jogar -los, uma vez que as avalia. 976 00:50:06,601 --> 00:50:07,392 [PIANO interpondo] 977 00:50:07,392 --> 00:50:10,990 978 00:50:10,990 --> 00:50:12,817 >> Assim, podemos apenas fazer um pouco de música aqui. 979 00:50:12,817 --> 00:50:13,608 [PIANO interpondo] 980 00:50:13,608 --> 00:50:39,570 981 00:50:39,570 --> 00:50:41,470 >> Então, o que este comando faz, por exemplo, é 982 00:50:41,470 --> 00:50:46,910 que leva essas três notas para o piano e, em seguida, coloca-los em B3. 983 00:50:46,910 --> 00:50:48,660 Esta sintaxe pode fazer um pouco mais de sentido 984 00:50:48,660 --> 00:50:50,590 para aqueles que têm um música de fundo aqui. 985 00:50:50,590 --> 00:50:55,180 986 00:50:55,180 --> 00:50:56,551 >> Eu posso adicionar um bumbo. 987 00:50:56,551 --> 00:50:57,050 Eu posso-- 988 00:50:57,050 --> 00:50:58,048 >> [Interpondo INSTRUMENTS] 989 00:50:58,048 --> 00:50:59,256 >> --a apenas brincar com isso. 990 00:50:59,256 --> 00:51:12,519 991 00:51:12,519 --> 00:51:13,474 >> Assim, você pode make-- 992 00:51:13,474 --> 00:51:14,515 [Interpondo INSTRUMENTS] 993 00:51:14,515 --> 00:51:15,513 Aquele é um pouco mais chato. 994 00:51:15,513 --> 00:51:16,554 [Interpondo INSTRUMENTS] 995 00:51:16,554 --> 00:51:26,491 996 00:51:26,491 --> 00:51:30,981 >> Assim que adiciona aleatoriamente um prato seco em cada nota 16, com um 16% 997 00:51:30,981 --> 00:51:31,481 [INAUDÍVEL]. 998 00:51:31,481 --> 00:51:32,522 >> [Interpondo INSTRUMENTS] 999 00:51:32,522 --> 00:51:40,962 1000 00:51:40,962 --> 00:51:50,400 >> Sim, então a forma como este works-- é sempre em 4: 4. 1001 00:51:50,400 --> 00:51:51,441 [Interpondo INSTRUMENTS] 1002 00:51:51,441 --> 00:52:06,910 1003 00:52:06,910 --> 00:52:10,902 >> Sim, então os quatro trimestres, e 16/8. 1004 00:52:10,902 --> 00:52:14,851 1005 00:52:14,851 --> 00:52:15,892 [Interpondo INSTRUMENTS] 1006 00:52:15,892 --> 00:52:27,970 1007 00:52:27,970 --> 00:52:33,780 >> Assim, em média, você tem 60% de bate nas 16 notas. 1008 00:52:33,780 --> 00:52:35,990 >> De qualquer forma, esta foi apenas tipo de mostrar fora 1009 00:52:35,990 --> 00:52:39,780 algumas das coisas que você poderia construir com a API de áudio Web. 1010 00:52:39,780 --> 00:52:43,840 É realmente poderoso, ele é muito rápido, e você pode fazer um monte de coisas legais 1011 00:52:43,840 --> 00:52:44,340 com isso. 1012 00:52:44,340 --> 00:52:51,260 Então, novamente, todas as perguntas que você tem, email myself-- Hugh-- ou Sam, 1013 00:52:51,260 --> 00:52:55,869 e honestamente, o Google tem uma tonelada de bons recursos. 1014 00:52:55,869 --> 00:52:56,660 Alguma última pergunta? 1015 00:52:56,660 --> 00:52:57,970 Sim. 1016 00:52:57,970 --> 00:53:00,790 >> AUDIÊNCIA: Então você pode acessar o microfone embutido. 1017 00:53:00,790 --> 00:53:03,089 E se você queria usar um microfone melhor? 1018 00:53:03,089 --> 00:53:05,380 HUGH ZABRISKIE: Se você queria usar melhor microfone? 1019 00:53:05,380 --> 00:53:11,320 Então, novamente, isso é parte do abstração entre Chrome 1020 00:53:11,320 --> 00:53:12,950 e no resto do seu computador. 1021 00:53:12,950 --> 00:53:18,950 A não ser que ele esteja disponível através uma API, como Web API MIDI, 1022 00:53:18,950 --> 00:53:22,030 você poderia provavelmente encontrar alguns hacks, mas geralmente não é tão viável. 1023 00:53:22,030 --> 00:53:25,300 >> SAM VERDE: Você pode Também-- tudo o cromo sabe 1024 00:53:25,300 --> 00:53:28,820 é o que o seu microfone padrão é, e que ele acessa. 1025 00:53:28,820 --> 00:53:33,410 Então, se você tinha um microfone você poderia definir como microfone padrão do computador, 1026 00:53:33,410 --> 00:53:35,990 você pode acessá-lo desse jeito e ele provavelmente iria funcionar. 1027 00:53:35,990 --> 00:53:37,490 HUGH ZABRISKIE: Isso é um bom ponto. 1028 00:53:37,490 --> 00:53:39,656 Eu nunca tentei isso, mas você pode ser capaz de tipo 1029 00:53:39,656 --> 00:53:45,700 de-- se você redirecionar o alto-falante de entrada, você pode ser capaz de fazer isso, sim. 1030 00:53:45,700 --> 00:53:48,360 >> Alguma última pergunta? 1031 00:53:48,360 --> 00:53:49,340 Frio. 1032 00:53:49,340 --> 00:53:51,680 Bem, obrigado caras tanto para assistir. 1033 00:53:51,680 --> 00:53:52,199 Eu sou Hugh. 1034 00:53:52,199 --> 00:53:52,990 SAM VERDE: Eu sou Sam. 1035 00:53:52,990 --> 00:53:55,410 HUGH ZABRISKIE: E este é CS50. 1036 00:53:55,410 --> 00:53:56,767