1
00:00:00,000 --> 00:00:05,900

2
00:00:05,900 --> 00:00:07,170
>> Sam Green: Salut, tout le monde.

3
00:00:07,170 --> 00:00:08,640
Bienvenue à notre séminaire.

4
00:00:08,640 --> 00:00:10,009
Mon nom est Sam.

5
00:00:10,009 --> 00:00:11,050
HUGH ZABRISKIE: Je suis Hugh.

6
00:00:11,050 --> 00:00:17,420
Sam Green: Et nous allons parler aujourd'hui
à propos de JavaScript et l'API Web Audio.

7
00:00:17,420 --> 00:00:21,180
Juste pour commencer, ceci est un aperçu
de notre ordre du jour pour le séminaire.

8
00:00:21,180 --> 00:00:25,350
Nous allons commencer par parler
pourquoi vous devriez être intéressé par le Web

9
00:00:25,350 --> 00:00:30,130
API Audio, pourquoi est-JavaScript
la langue dont vous avez besoin pour elle,

10
00:00:30,130 --> 00:00:32,619
puis parler JavaScript
essentials-- si semblable,

11
00:00:32,619 --> 00:00:34,800
vous guider à travers quelques-uns
rudiments de la langue,

12
00:00:34,800 --> 00:00:37,290
et ensuite parler de la
API audio à un niveau élevé.

13
00:00:37,290 --> 00:00:41,140
Ensuite, Hugh parler de certains
des étapes de la production audio

14
00:00:41,140 --> 00:00:45,509
puis démonstration Cet impressionnant séquenceur
projet qu'il construit et vous montrer le code.

15
00:00:45,509 --> 00:00:48,050
Et puis, nous aurons le temps pour
questions à la fin pour les personnes

16
00:00:48,050 --> 00:00:49,593
qui sont ici vivre.

17
00:00:49,593 --> 00:00:50,540
>> HUGH ZABRISKIE: Cool.

18
00:00:50,540 --> 00:00:50,990
>> Sam Green: Cool.

19
00:00:50,990 --> 00:00:51,383
>> HUGH ZABRISKIE: Cool.

20
00:00:51,383 --> 00:00:52,170
Je vais sauvegarder.

21
00:00:52,170 --> 00:00:54,960
>> Sam Green: Donc, commençons par le commencement.

22
00:00:54,960 --> 00:00:57,840
Donc l'une des grandes choses
sur le Web Audio API

23
00:00:57,840 --> 00:01:00,480
est qu'il n'y a pas de mise en place nécessaire.

24
00:01:00,480 --> 00:01:04,230
Il vient intégré à
la plupart des navigateurs modernes,

25
00:01:04,230 --> 00:01:08,630
y compris Chrome, Edge, ensemble
tas de others-- tous ceux

26
00:01:08,630 --> 00:01:12,650
que de grandes portions de
les gens utilisent aujourd'hui.

27
00:01:12,650 --> 00:01:14,807
Donc, il n'y a pas mis en place,
Mis à part juste de

28
00:01:14,807 --> 00:01:16,890
un serveur web va, pour
vous de commencer à travailler

29
00:01:16,890 --> 00:01:18,420
sur votre projet, ce qui est excellent.

30
00:01:18,420 --> 00:01:21,500

31
00:01:21,500 --> 00:01:24,190
>> Nous recommandons plutôt
fortement que vous considérez

32
00:01:24,190 --> 00:01:26,530
d'utiliser Chrome pour
Développement web JavaScript,

33
00:01:26,530 --> 00:01:30,260
juste parce que son développeur
les outils sont vraiment forts.

34
00:01:30,260 --> 00:01:33,220
Comme un exemple de tout ce que nous entendons
en disant ouvrir votre JavaScript

35
00:01:33,220 --> 00:01:38,600
console-- si vous allez dans Chrome
et vous regardez une page Web,

36
00:01:38,600 --> 00:01:43,897
et vous faites un clic gauche
Inspecter l'élément, puis

37
00:01:43,897 --> 00:01:46,730
vous allez à cette petite liste déroulante
ici et vous cliquez sur Console,

38
00:01:46,730 --> 00:01:50,660
vous verrez ce que ouvre ressemble un
beaucoup comme une invite de commande que vous

39
00:01:50,660 --> 00:01:53,720
pourraient voir sur votre Mac, ou sur l'ID.

40
00:01:53,720 --> 00:01:59,260
Et juste comme ça, nous pouvons
Type commandes ici, comme Effacer,

41
00:01:59,260 --> 00:02:01,350
et d'autres commandes comme ça.

42
00:02:01,350 --> 00:02:04,267
Nous pouvons créer des variables, comme
nous verrons plus tard en JavaScript.

43
00:02:04,267 --> 00:02:07,100
Et donc tout ce que nous pouvons faire dans
JavaScript, nous pouvons le faire avec la console,

44
00:02:07,100 --> 00:02:11,430
et que est une façon super pratique pour
commencer à jouer avec les API

45
00:02:11,430 --> 00:02:15,760
et de se familiariser avec
JavaScript dès le départ.

46
00:02:15,760 --> 00:02:18,290
Pas de mise en place nécessaire,
qui est vraiment agréable.

47
00:02:18,290 --> 00:02:18,790
Cool.

48
00:02:18,790 --> 00:02:22,064

49
00:02:22,064 --> 00:02:22,880
Impressionnant.

50
00:02:22,880 --> 00:02:24,780
>> Donc, une chose de plus à ajouter.

51
00:02:24,780 --> 00:02:27,780
Si vous avez des questions-- il ya
beaucoup d'entre vous qui ne sont pas ici en direct,

52
00:02:27,780 --> 00:02:31,232
hésitez pas à envoyer ces us--
sont nos adresses e-mail.

53
00:02:31,232 --> 00:02:33,190
Si vous avez des questions
vous ne voulez pas à nous demander,

54
00:02:33,190 --> 00:02:36,160
comme, oh je dois un bug
dans mon code, ou quelque chose

55
00:02:36,160 --> 00:02:39,270
qui est un peu plus précis,
peut-être le Google en premier.

56
00:02:39,270 --> 00:02:42,340
Il ya beaucoup de grandes ressources
à propos de l'API Web Audio là-bas.

57
00:02:42,340 --> 00:02:44,089
Il est vraiment bien
documenté et il est d'être

58
00:02:44,089 --> 00:02:47,194
utilisée par une tonne de personnes
l'industrie et les gens qui sont juste

59
00:02:47,194 --> 00:02:48,610
construire des choses amusantes pour eux-mêmes.

60
00:02:48,610 --> 00:02:51,306
Donc, il devrait y avoir beaucoup
des ressources là-bas.

61
00:02:51,306 --> 00:02:53,040
Impressionnant.

62
00:02:53,040 --> 00:02:56,100
>> Cool, alors pourquoi le Web Audio API?

63
00:02:56,100 --> 00:02:59,840
Ce schéma est un peu
d'une évolution de la façon dont

64
00:02:59,840 --> 00:03:04,100
son sur le Web a augmenté au fil du temps.

65
00:03:04,100 --> 00:03:13,080
Bgsound était comme la balise HTML d'origine
Internet Explorer utilisée pour soutenir.

66
00:03:13,080 --> 00:03:16,790
Il ne permettait sons assez basique,
la fonctionnalité n'a pas été très robuste,

67
00:03:16,790 --> 00:03:19,380
et vous ne pouviez pas faire
séquençage compliqué,

68
00:03:19,380 --> 00:03:21,890
ou contrôler lorsque le son a commencé
et arrêté très robuste.

69
00:03:21,890 --> 00:03:23,930
Ainsi, il n'a pas été particulièrement
bien développé.

70
00:03:23,930 --> 00:03:27,470
Puis après cela, Flash
venu along-- qui,

71
00:03:27,470 --> 00:03:31,712
Je suis sûr que vous les gars sont tous familiers
avec Flash-- peut-être pas comment cela fonctionne,

72
00:03:31,712 --> 00:03:32,920
mais vous avez certainement vu.

73
00:03:32,920 --> 00:03:35,586
Vous devez mettre à jour votre version de Flash
Plug-in, tout ce genre de choses,

74
00:03:35,586 --> 00:03:40,110
et que certainement étendu la gamme
de fonctionnalité qui était disponible.

75
00:03:40,110 --> 00:03:45,370
Mais faire l'utilisateur d'installer
un plug-in est certainement

76
00:03:45,370 --> 00:03:48,480
un inconvénient à compris Flash
dans votre application, non?

77
00:03:48,480 --> 00:03:52,410
Parce qu'alors, vous êtes dépendant de la
l'utilisateur d'aller et de trouver ce plug-in,

78
00:03:52,410 --> 00:03:54,660
et probablement être tourné
off par cette étape supplémentaire

79
00:03:54,660 --> 00:03:56,640
ils ont à prendre pour utiliser votre application.

80
00:03:56,640 --> 00:04:01,270
Et puis il pourrait y avoir une mise à jour
ça va casser votre application entière,

81
00:04:01,270 --> 00:04:03,880
et il finit par être un cauchemar
pour le développeur, aussi.

82
00:04:03,880 --> 00:04:06,230
Ce qui fut une barricade.

83
00:04:06,230 --> 00:04:10,480
>> Et puis après qui est venu,
la balise HTML audio, qui

84
00:04:10,480 --> 00:04:16,579
est une caractéristique de plus moderne qui HTML--
certes permis pour beaucoup plus de choses,

85
00:04:16,579 --> 00:04:20,050
mais même les choses que vous pourriez faire
il y avait un peu limité seulement

86
00:04:20,050 --> 00:04:22,730
à la suite des choses
que le HTML était capable.

87
00:04:22,730 --> 00:04:26,060
Ainsi, lorsque le JavaScript
API, l'API Web audio,

88
00:04:26,060 --> 00:04:29,290
est devenu une norme
pratiquer à travers les navigateurs,

89
00:04:29,290 --> 00:04:32,490
qui a vraiment élargi le jeu
des opportunités pour les développeurs

90
00:04:32,490 --> 00:04:36,590
à vraiment entrer dans la construction
trucs cool pour le web.

91
00:04:36,590 --> 00:04:39,220
Pendant longtemps, il y avait
des outils vraiment robustes été

92
00:04:39,220 --> 00:04:44,360
pour les applications audio natives,
like-- tout le monde sait GarageBand,

93
00:04:44,360 --> 00:04:48,360
puis il ya évidemment plus
applications de mixage audio professionnels,

94
00:04:48,360 --> 00:04:49,640
et ce genre de choses.

95
00:04:49,640 --> 00:04:52,690
Mais il n'y avait pas un
vraiment bon Cloud-- pas

96
00:04:52,690 --> 00:04:55,811
Nuage, oui, je suppose
Plate-forme web Cloud--

97
00:04:55,811 --> 00:04:58,310
qui permettrait aux développeurs de
construire des applications pour les personnes

98
00:04:58,310 --> 00:05:00,570
pour faire le mixage audio.

99
00:05:00,570 --> 00:05:03,960
Et comme il va vous montrer
plus tard, le Web Audio API

100
00:05:03,960 --> 00:05:07,470
permet de vraiment puissant
choses à arriver vraiment tout simplement,

101
00:05:07,470 --> 00:05:09,597
ce qui est plutôt cool.

102
00:05:09,597 --> 00:05:12,680
Voilà donc l'instruction à laquelle vous
devraient regarder le reste du séminaire,

103
00:05:12,680 --> 00:05:14,350
fondamentalement.

104
00:05:14,350 --> 00:05:17,880
>> Et maintenant, je vais parler
certains éléments JavaScript-- juste de base

105
00:05:17,880 --> 00:05:20,240
de la langue, de sorte que
nous pouvons être sur la même page

106
00:05:20,240 --> 00:05:22,470
lorsque nous parlons de la
API un peu plus tard.

107
00:05:22,470 --> 00:05:23,260
Cool.

108
00:05:23,260 --> 00:05:26,192
>> Donc, ceci est un résumé.

109
00:05:26,192 --> 00:05:27,150
Je oublié ce fut ici.

110
00:05:27,150 --> 00:05:27,510
Oui.

111
00:05:27,510 --> 00:05:27,870
>> HUGH ZABRISKIE: Il ya deux diapositives ici.

112
00:05:27,870 --> 00:05:30,245
>> Sam Green: Ceci est le résumé
de quelques-unes des limitations

113
00:05:30,245 --> 00:05:35,220
de l'autre, les vieilles méthodes de reliure.

114
00:05:35,220 --> 00:05:37,828
Et puis maintenant, nous avons ces choses.

115
00:05:37,828 --> 00:05:40,011
Cool.

116
00:05:40,011 --> 00:05:40,510
Impressionnant.

117
00:05:40,510 --> 00:05:43,200
>> Donc, l'essentiel JavaScript.

118
00:05:43,200 --> 00:05:47,230
Tout d'abord, il ya une
différence assez importante

119
00:05:47,230 --> 00:05:49,940
en JavaScript dans un rapport
langage comme C, de la manière

120
00:05:49,940 --> 00:05:52,050
que les variables sont créées.

121
00:05:52,050 --> 00:05:55,634
Donc, dans C, nous sommes habitués à avoir
de taper nos variables, non?

122
00:05:55,634 --> 00:05:57,800
Et je ne veux pas dire, comme le type
saisissez-les, je veux dire le type

123
00:05:57,800 --> 00:06:01,900
comme leur attribuer un sens de bien--
comme, un int, un flotteur, un caractère.

124
00:06:01,900 --> 00:06:05,210
En C, nous étions vraiment habitués à
avoir à créer une variable

125
00:06:05,210 --> 00:06:09,690
et puis coller à ce type pour le
tout le temps que nous utilisons cette variable.

126
00:06:09,690 --> 00:06:13,990
Et ce ne sont pas nécessairement pire,
mais il est probablement plus difficile à utiliser.

127
00:06:13,990 --> 00:06:16,190
L'une des caractéristiques cool
JavaScript est

128
00:06:16,190 --> 00:06:19,740
que les variables sont ce qu'on appelle
"typage dynamique", qui

129
00:06:19,740 --> 00:06:22,500
signifie que je peux créer un
variable que la syntaxe,

130
00:06:22,500 --> 00:06:25,800
varX est égal à 5, par exemple.

131
00:06:25,800 --> 00:06:27,790
Cela crée l'origine
un nombre entier variable--

132
00:06:27,790 --> 00:06:29,870
juste en dessous de la
hotte somewhere-- mais je

133
00:06:29,870 --> 00:06:33,040
peut changer cette variable
de se référer à une chaîne

134
00:06:33,040 --> 00:06:35,820
sans rien faire comme
la création d'une nouvelle variable.

135
00:06:35,820 --> 00:06:37,880
Je ne veux pas à vous soucier
sur le changement de type.

136
00:06:37,880 --> 00:06:45,440
JavaScript sait que le type de
changé, et cela se produit dynamiquement.

137
00:06:45,440 --> 00:06:48,510
>> Donc, il ya des avantages
et des inconvénients à ce que,

138
00:06:48,510 --> 00:06:51,250
comme toute personne qui a travaillé dans
JavaScript pendant un certain temps afin de connaître.

139
00:06:51,250 --> 00:06:53,600
Il ya des moments où
vous pourriez accidentellement

140
00:06:53,600 --> 00:06:57,720
changer le type d'une variable et
pas gérer ce changement de type,

141
00:06:57,720 --> 00:07:01,120
puis votre JavaScript
peut crash-- ou d'une exception

142
00:07:01,120 --> 00:07:06,070
être jeté, parce que vous aurez la
Type tort quand vous vous attendez à un type.

143
00:07:06,070 --> 00:07:07,040
Cool.

144
00:07:07,040 --> 00:07:11,470
>> Donc, scoping-- qui est comme, si nous
rappeler les premières semaines dans le cours,

145
00:07:11,470 --> 00:07:15,420
fait référence à une variable façon visible
est et dans quel domaine du code.

146
00:07:15,420 --> 00:07:18,400
Tout cela ressemble beaucoup
à la façon dont elle regarde en C.

147
00:07:18,400 --> 00:07:24,755
Donc variables sont généralement scope
entre accolades dans une fonction,

148
00:07:24,755 --> 00:07:27,005
et puis il ya aussi
les variables à l'échelle mondiale que le scope

149
00:07:27,005 --> 00:07:29,171
soient: si vous écrivez une variable
en dehors d'une fonction,

150
00:07:29,171 --> 00:07:31,790
il sera visible dans l'ensemble du texte.

151
00:07:31,790 --> 00:07:35,840
>> Une différence entre
JavaScript et C en particulier,

152
00:07:35,840 --> 00:07:40,280
est que si vous déclarez un mondiale
partout variable dans un fichier texte

153
00:07:40,280 --> 00:07:43,324
il est visible dans toute fonction
dans ce fichier texte.

154
00:07:43,324 --> 00:07:44,240
Cela est exact, à droite?

155
00:07:44,240 --> 00:07:46,330
>> HUGH ZABRISKIE: Yep.

156
00:07:46,330 --> 00:07:49,120
>> Sam Green: Donc, qui est aussi un peu
peu original par rapport à C,

157
00:07:49,120 --> 00:07:52,660
où nous avons toujours eu d'avoir notre
les définitions de variables au-dessus des lieux

158
00:07:52,660 --> 00:07:53,770
ils ont été utilisés.

159
00:07:53,770 --> 00:07:57,957
Cela ne veut pas d'une règle qui est appliquée
plus, donc, un peu différent.

160
00:07:57,957 --> 00:08:00,540
Et encore une fois juste pour souligner de nouveau,
mondiale contre variables-- locale

161
00:08:00,540 --> 00:08:03,457
très similaire à C. Vous pourriez avoir
deux variables avec le même nom,

162
00:08:03,457 --> 00:08:06,540
et ont un de leurs noms être assombris
par une variable locale si l'un d'eux

163
00:08:06,540 --> 00:08:07,546
était mondiale.

164
00:08:07,546 --> 00:08:09,420
Genre Donc, similaire
problèmes que certains d'entre vous

165
00:08:09,420 --> 00:08:11,920
peut se sont heurtées à une certaine
de votre problème définit jusqu'ici.

166
00:08:11,920 --> 00:08:14,450
Cool, de sorte que les variables est.

167
00:08:14,450 --> 00:08:20,310
>> Flux de contrôle, ce qui signifie que,
si-else-- stuff-- et boucles logique.

168
00:08:20,310 --> 00:08:24,510
Donc, pour commencer, voici ce que if-else
déclarations ressemblent en JavaScript.

169
00:08:24,510 --> 00:08:29,750
Le placement des diverses choses
sur les lignes est sans importance.

170
00:08:29,750 --> 00:08:34,409
Ceci est juste l'une des conventions
le code de structure de façon que nous.

171
00:08:34,409 --> 00:08:38,634
Tout comme en C, nous avons une
"si," une déclaration de parenthèse.

172
00:08:38,634 --> 00:08:40,840

173
00:08:40,840 --> 00:08:42,090
Cela ne veut pas ce que je voulais faire.

174
00:08:42,090 --> 00:08:44,860

175
00:08:44,860 --> 00:08:45,550
Je l'ai encore fait.

176
00:08:45,550 --> 00:08:46,841
>> HUGH ZABRISKIE: Essayer de sortir?

177
00:08:46,841 --> 00:08:49,770
Sam Green: Non, je suis
juste essayer de zoomer.

178
00:08:49,770 --> 00:08:50,660
Il n'a pas d'importance.

179
00:08:50,660 --> 00:08:54,730

180
00:08:54,730 --> 00:08:59,370
>> Donc, nous avons un "if" et
nous avons un état intérieur de celui-ci

181
00:08:59,370 --> 00:09:03,130
qui évalue à vrai ou faux,
et qui détermine si oui ou non

182
00:09:03,130 --> 00:09:04,510
nous entrons dans ce bloc de code.

183
00:09:04,510 --> 00:09:09,860
Et de même, nous avons un autre, si, et
un autre, tout comme nous sommes habitués à en C.

184
00:09:09,860 --> 00:09:14,010
>> Vous devez également être assez à l'aise
dès le départ avec des boucles,

185
00:09:14,010 --> 00:09:16,440
parce qu'ils regardent aussi
un peu comme C ressemble.

186
00:09:16,440 --> 00:09:19,600
Mais vous remarquerez que nous avons à nouveau
avoir, au lieu de int initialisations,

187
00:09:19,600 --> 00:09:22,570
nous avons initialisations var.

188
00:09:22,570 --> 00:09:24,650
Et je suppose que vous avez
faire attention à faire

189
00:09:24,650 --> 00:09:28,460
que vous ne changez pas la valeur
de I par l'un int à une chaîne,

190
00:09:28,460 --> 00:09:31,780
par exemple, parce que ce qui se passe à
provoquer un comportement bizarre vous ne pourriez pas

191
00:09:31,780 --> 00:09:32,280
attendre.

192
00:09:32,280 --> 00:09:35,750
Mais cela devrait ressembler
assez familier, aussi bien.

193
00:09:35,750 --> 00:09:39,460
>> Donc, ceci est où les choses commencent à
obtenir un peu fou en JavaScript

194
00:09:39,460 --> 00:09:44,920
pour quelqu'un qui va partir d'un
fond de C. Il existe des fonctions

195
00:09:44,920 --> 00:09:48,070
en JavaScript, et il ya une façon
de déclarer une fonction qui ressemble

196
00:09:48,070 --> 00:09:50,361
sorte de semblable à C, et
puis il ya un autre qui

197
00:09:50,361 --> 00:09:52,450
regarde un peu différent.

198
00:09:52,450 --> 00:09:54,930
>> La première version,
que nous pouvons voir ici,

199
00:09:54,930 --> 00:09:59,260
est une sorte de C-like, où
nous disons, ceci est une fonction,

200
00:09:59,260 --> 00:10:01,490
lui donner un nom, donner
le nombre d'arguments,

201
00:10:01,490 --> 00:10:05,150
et ensuite le contenu de la fonction
aller à l'intérieur de ces accolades.

202
00:10:05,150 --> 00:10:08,850
Nous verrons un exemple de
arguments en seulement une seconde.

203
00:10:08,850 --> 00:10:13,420
>> Considérant que, sur la ligne suivante, nous voyons, oh,
voici une variable appelée "myFunction"

204
00:10:13,420 --> 00:10:17,546
et nous égaler à cette
function-- chose-- générique

205
00:10:17,546 --> 00:10:19,170
ne semble pas avoir quelque chose se passe.

206
00:10:19,170 --> 00:10:22,780

207
00:10:22,780 --> 00:10:26,080
La raison qui est différent
que C est que JavaScript

208
00:10:26,080 --> 00:10:30,040
est ce qu'on appelle un langage fonctionnel,
ou présente des éléments fonctionnels, ce qui signifie

209
00:10:30,040 --> 00:10:33,510
ce sont en fait les valeurs des fonctions.

210
00:10:33,510 --> 00:10:39,520
Et cela signifie que nous pouvons mettre en
une variable égale à une fonction

211
00:10:39,520 --> 00:10:43,210
et de passer ensuite cette fonction
autour, passer comme un argument,

212
00:10:43,210 --> 00:10:46,550
faire toutes sortes de choses
comme ça avec fonctions.

213
00:10:46,550 --> 00:10:49,682
>> Une autre chose à note--
fonctions sont écrites

214
00:10:49,682 --> 00:10:51,140
avec un certain nombre d'arguments.

215
00:10:51,140 --> 00:10:54,056
Nous verrons un exemple d'une fonction
avec un argument sur la diapositive suivante.

216
00:10:54,056 --> 00:10:56,720
Mais JavaScript ne sera pas
crier à vous si vous essayez

217
00:10:56,720 --> 00:10:59,330
à utiliser une fonction avec la
nombre incorrect d'arguments.

218
00:10:59,330 --> 00:11:05,310
Il va juste faire de son mieux pour faire
faire, ce qui signifie que si vous passez,

219
00:11:05,310 --> 00:11:09,410
vous appelez une fonction qui attend un
dispute avec aucun argument, tout ce qui

220
00:11:09,410 --> 00:11:13,990
qui va se passer est qu'il va faire de son mieux
d'essayer et d'exécuter ce code,

221
00:11:13,990 --> 00:11:16,541
et si elle finit par manquer
en une exception ou une erreur,

222
00:11:16,541 --> 00:11:19,790
il va jeter cette exception et juste garder
going-- qui est juste l'un des moyens

223
00:11:19,790 --> 00:11:21,070
que JavaScript fonctionne.

224
00:11:21,070 --> 00:11:21,781
Oui.

225
00:11:21,781 --> 00:11:24,207
>> AUDIENCE: Qu'advient-il si
il ya trop d'arguments?

226
00:11:24,207 --> 00:11:26,040
Sam Green: Donc, le
question était, ce qui se passe

227
00:11:26,040 --> 00:11:27,380
si il ya trop d'arguments?

228
00:11:27,380 --> 00:11:29,171
Et la réponse est que
JavaScript sera juste

229
00:11:29,171 --> 00:11:32,120
ignorer ceux qui sont
après celles qu'il prévoit.

230
00:11:32,120 --> 00:11:36,420
Il va essayer d'exécuter la fonction
appeler comme si elle était juste les deux premiers.

231
00:11:36,420 --> 00:11:37,075
Droit?

232
00:11:37,075 --> 00:11:37,700
>> HUGH ZABRISKIE: Tout à fait, oui.

233
00:11:37,700 --> 00:11:39,449
De même, si
sont trop peu d'arguments,

234
00:11:39,449 --> 00:11:42,640
il juste sorte de nulle donne à tous les
arguments, il n'a pas de valeurs

235
00:11:42,640 --> 00:11:43,660
pour.

236
00:11:43,660 --> 00:11:45,810
>> Sam Green: Qui peut
effectivement être utile, si vous

237
00:11:45,810 --> 00:11:49,060
envie d'écrire une fonction qui
prend une variable arguments numériques.

238
00:11:49,060 --> 00:11:55,830
Vous pouvez définir des valeurs par défaut dans
la définition de la fonction,

239
00:11:55,830 --> 00:11:59,060
et il peut ignorer le fait
que l'entrée est pas là.

240
00:11:59,060 --> 00:12:01,584

241
00:12:01,584 --> 00:12:04,000
Je veux donc parler un peu
plus sur ce dernier point

242
00:12:04,000 --> 00:12:05,541
point, qui est fonctions sont des valeurs.

243
00:12:05,541 --> 00:12:07,930

244
00:12:07,930 --> 00:12:11,010
Ceci est un exemple qui est
un peu hallucinant

245
00:12:11,010 --> 00:12:14,880
si vous venez de lire, et ne pensez pas
à propos de ce qui se passe pendant une seconde.

246
00:12:14,880 --> 00:12:17,910
Alors, regardons juste au
la première ligne ici.

247
00:12:17,910 --> 00:12:24,360
Nous avons cette variable, f1, que nous disons
est une fonction qui fait cette chose.

248
00:12:24,360 --> 00:12:28,535
Et le contenu de la fonction
sont CONSOLE.LOG («bonjour»).

249
00:12:28,535 --> 00:12:32,220
Vous pouvez penser que le console.log
JavaScript équivalent de printf.

250
00:12:32,220 --> 00:12:35,510
Alors qu'est-ce qui va se passer est, si nous
exécuter ce code dans notre navigateur,

251
00:12:35,510 --> 00:12:37,530
il va imprimer une chaîne.

252
00:12:37,530 --> 00:12:39,342
Je peux le démontrer.

253
00:12:39,342 --> 00:12:42,300
PUBLIC: En journal, cependant, est-ce que
dire qu'il est enregistré quelque part?

254
00:12:42,300 --> 00:12:42,550
Sam Green: Oui.

255
00:12:42,550 --> 00:12:44,216
Donc, je vais vous montrer ce qui va se passer.

256
00:12:44,216 --> 00:12:48,085
Donc la question est, ce qui ne log moyen?

257
00:12:48,085 --> 00:12:51,262
>> HUGH ZABRISKIE: Donc console.log
est comme printf pour C.

258
00:12:51,262 --> 00:12:52,970
Sam Green: Donc console.log
est comme printf,

259
00:12:52,970 --> 00:12:59,240
donc si je dois cette console.log ('bonjour'),
et je demande que la chaîne "bonjour"

260
00:12:59,240 --> 00:13:00,730
est imprimé sur la console.

261
00:13:00,730 --> 00:13:03,340
Ceci est la console.

262
00:13:03,340 --> 00:13:05,930
Il est juste comme printf, où
il imprime à sortir standard.

263
00:13:05,930 --> 00:13:09,050

264
00:13:09,050 --> 00:13:11,230
Et nous le verrons dans une minute,
mais cela est en réalité

265
00:13:11,230 --> 00:13:16,529
faisant référence à l'objet de la console,
et appeler une méthode sur cet objet.

266
00:13:16,529 --> 00:13:18,320
Cela fera plus de sens
en une minute lorsque nous

267
00:13:18,320 --> 00:13:20,660
apprendre à parler
objets en JavaScript,

268
00:13:20,660 --> 00:13:22,509
mais je pensais que je voudrais juste mentionner que.

269
00:13:22,509 --> 00:13:24,300
HUGH ZABRISKIE: Nous sommes
utilisé dans C, droite-

270
00:13:24,300 --> 00:13:27,580
nous écrivons habituellement un grand programme
dans le principal de faire quelque chose.

271
00:13:27,580 --> 00:13:30,700
Mais ce qui est cool en JavaScript est vous
avoir cette sorte d'interprète que

272
00:13:30,700 --> 00:13:33,620
fonctionne en temps réel, de sorte qu'il
prend juste ligne par ligne,

273
00:13:33,620 --> 00:13:35,320
il peut tout interpréter sur place.

274
00:13:35,320 --> 00:13:37,403
Et il garde la trace des
les choses qui ont été exécutées avant,

275
00:13:37,403 --> 00:13:41,620
il est donc un outil très utile pour
console.log utiliser, ou de la console,

276
00:13:41,620 --> 00:13:46,870
généralement, pour tout simplement jouer
autour avec JavaScript.

277
00:13:46,870 --> 00:13:51,420
>> Sam Green: Pour en revenir à cette
example-- la deuxième ligne de code

278
00:13:51,420 --> 00:13:55,320
ici est assez ahurissant dans ma tête.

279
00:13:55,320 --> 00:13:59,790
La première fois que je lis cela,
comme il a été, ce qui se passe?

280
00:13:59,790 --> 00:14:04,580
Donc ce qui se passe est, cette
déclaration de fonction dit,

281
00:14:04,580 --> 00:14:10,170
Je dois une fonction appelée f2
que cela attendre un argument, f,

282
00:14:10,170 --> 00:14:12,990
puis il appelle cette
fonction, f, qui

283
00:14:12,990 --> 00:14:17,652
a été adoptée à elle comme un argument
sans se arguments.

284
00:14:17,652 --> 00:14:19,110
Alors, qui aurait pu être déroutant.

285
00:14:19,110 --> 00:14:21,890

286
00:14:21,890 --> 00:14:28,400
Si nous comprenons cela comme f2 prend f1
comme argument, puis à l'intérieur de f2,

287
00:14:28,400 --> 00:14:31,190
f obtient called-- quels moyens
que cette ligne de code,

288
00:14:31,190 --> 00:14:34,192
après ces deux lignes de
code, résultats dans «bonjour»

289
00:14:34,192 --> 00:14:35,400
en cours d'impression à la console.

290
00:14:35,400 --> 00:14:41,660

291
00:14:41,660 --> 00:14:44,910
>> Le fait que nous pouvons passer
autour de fonctions en tant que valeurs

292
00:14:44,910 --> 00:14:47,870
finit par être l'un des plus
de puissantes fonctionnalités de JavaScript

293
00:14:47,870 --> 00:14:49,700
en tant que langage de programmation.

294
00:14:49,700 --> 00:14:52,782
En dehors de l'ensemble de la
choses impressionnantes qu'il peut faire,

295
00:14:52,782 --> 00:14:54,990
seulement comme une caractéristique de la
langue en termes de la façon dont

296
00:14:54,990 --> 00:14:58,400
qu'il rend les choses faciles
et permet de programmer

297
00:14:58,400 --> 00:15:01,060
pour des choses qui ne sont pas particulièrement
bien adapté au web,

298
00:15:01,060 --> 00:15:04,500
programmation fonctionnelle et fonctionnelle
aspects de la programmation de JavaScript

299
00:15:04,500 --> 00:15:07,130
est l'un des plus
concepts puissants qui

300
00:15:07,130 --> 00:15:11,030
existe dans JavaScript-- si vous me demandez.

301
00:15:11,030 --> 00:15:11,960
Cool.

302
00:15:11,960 --> 00:15:13,534
>> Donc, la prochaine chose.

303
00:15:13,534 --> 00:15:16,450
En plus d'être fonctionnel,
il ya aussi des éléments de JavaScript

304
00:15:16,450 --> 00:15:20,510
qui sont orientée objet,
qui est l'un des très

305
00:15:20,510 --> 00:15:23,800
mots à la mode populaires en informatique.

306
00:15:23,800 --> 00:15:27,040
Programmation orientée objet
est une chose vraiment populaire.

307
00:15:27,040 --> 00:15:34,210
JavaScript dispose d'une version de cela,
où je crois que chaque valeur est également

308
00:15:34,210 --> 00:15:41,475
un objet, ce qui signifie que tous les objets
enveloppements réuni certains nombre de valeurs.

309
00:15:41,475 --> 00:15:44,020

310
00:15:44,020 --> 00:15:49,750
Donc, pour les valeurs qui sont simples, comme
un entier, comme varX est égal à 5,

311
00:15:49,750 --> 00:15:52,250
cet objet enveloppe juste que seule valeur.

312
00:15:52,250 --> 00:15:54,760

313
00:15:54,760 --> 00:15:59,036
>> Mais on peut aussi imaginer une situation
where-- nous pouvons penser à des situations dans C

314
00:15:59,036 --> 00:16:00,910
où nous voulions faire
quelque chose avec structs,

315
00:16:00,910 --> 00:16:03,285
par exemple, qui encapsule plusieurs
valeurs ensemble et crée

316
00:16:03,285 --> 00:16:05,870
il est très facile de passer des choses autour.

317
00:16:05,870 --> 00:16:09,270
Voilà quand un objet est en JavaScript.

318
00:16:09,270 --> 00:16:12,340
>> Il est important de se rappeler
quand je dis que les objets enveloppés

319
00:16:12,340 --> 00:16:15,330
un certain nombre de valeurs ensemble,
que les fonctions sont aussi

320
00:16:15,330 --> 00:16:21,506
valeurs, ce qui signifie que les fonctions peuvent
être aussi à l'intérieur d'un objet JavaScript.

321
00:16:21,506 --> 00:16:26,910
Et la raison qui est important
est que, alors que nous avons souvent

322
00:16:26,910 --> 00:16:30,290
penser à appeler une méthode
sur un objet qui est

323
00:16:30,290 --> 00:16:35,200
d'un terme populaire des autres
langages orientés objet populaires,

324
00:16:35,200 --> 00:16:39,330
l'une des différences est que ici
tout ce qui est dans une méthode JavaScript

325
00:16:39,330 --> 00:16:47,270
est une valeur stockée à l'intérieur d'un objet
qui effectue une action-- éventuellement

326
00:16:47,270 --> 00:16:51,850
en utilisant les autres valeurs qui sont à l'intérieur
de cet objet, mais pas nécessairement.

327
00:16:51,850 --> 00:16:56,930
Alors vous pouvez imaginer une situation, je
deviner dans un peu d'une manière folle,

328
00:16:56,930 --> 00:17:02,990
où vous avez appelé une méthode d'un
objet sur un autre objet, par exemple.

329
00:17:02,990 --> 00:17:06,010
Ainsi, il est un peu funky en cette façon.

330
00:17:06,010 --> 00:17:09,369
>> Et vous pouvez aussi changer les méthodes
qui sont associés à un objet

331
00:17:09,369 --> 00:17:13,740
en attribuant un procédé qui
nouvelle fonction, qui est également

332
00:17:13,740 --> 00:17:18,250
assez différent des autres
langages orientés objet, où

333
00:17:18,250 --> 00:17:21,410
une fois que nous déclarons un objet
et l'instancier,

334
00:17:21,410 --> 00:17:25,839
nous ne pouvons pas changer les méthodes qui sont
associé à cet objet plus.

335
00:17:25,839 --> 00:17:28,680
Voilà donc assez différente.

336
00:17:28,680 --> 00:17:29,570
Cool.

337
00:17:29,570 --> 00:17:34,010
>> Alors, voici un exemple, d'abord,
d'un objet dans l'action.

338
00:17:34,010 --> 00:17:36,390
Ceci est ce qu'on appelle
un objet générique, qui

339
00:17:36,390 --> 00:17:39,460
signifie qu'il n'a pas de
nom particulier, ne possède pas une classe,

340
00:17:39,460 --> 00:17:42,190
il est juste un emballage de valeurs.

341
00:17:42,190 --> 00:17:49,790
Et de la manière qui est, nous avons
cette paire extérieure de Accolades ici

342
00:17:49,790 --> 00:17:57,950
qui indiquent à JavaScript
et dire, cela est un objet.

343
00:17:57,950 --> 00:18:02,130
Les valeurs intérieur de celui-
sont chacune des valeurs à l'intérieur

344
00:18:02,130 --> 00:18:04,590
de l'objet qui devrait
être enveloppé ensemble.

345
00:18:04,590 --> 00:18:09,180
Et à l'intérieur de cet objet,
nous avons ensuite paires clé-valeur,

346
00:18:09,180 --> 00:18:13,880
où la clé désigne le nom
de la valeur à l'intérieur de l'objet,

347
00:18:13,880 --> 00:18:16,790
et l'autre side--
en face de la ici-- du côlon

348
00:18:16,790 --> 00:18:19,850
est la valeur réelle
qui doivent être stockés.

349
00:18:19,850 --> 00:18:26,210
>> Donc, vous voyez ici que nous avons une
clé appelée fn avec la valeur sam,

350
00:18:26,210 --> 00:18:29,430
suivi d'une virgule,
dire sur l'entrée suivante.

351
00:18:29,430 --> 00:18:33,560
Ensuite, une clé appelée LN,
avec une valeur de vert,

352
00:18:33,560 --> 00:18:35,840
suivi d'une virgule,
suivi par "impression"

353
00:18:35,840 --> 00:18:43,209
qui va avoir une valeur de fonction
que va faire cette ligne de code.

354
00:18:43,209 --> 00:18:45,500
Prenons un peu de recul et
déballer ce qui se passe ici.

355
00:18:45,500 --> 00:18:47,280
Donc, cela est un peu compliqué,
et nous voyons quelque chose de nouveau

356
00:18:47,280 --> 00:18:48,071
pour la première fois.

357
00:18:48,071 --> 00:18:51,190

358
00:18:51,190 --> 00:18:55,065
Le "ce" mot-clé est la chose nouvelle
nous voyons ici, et ce que cela fait

359
00:18:55,065 --> 00:19:00,540
est, se réfère au courant
opposer portée, non?

360
00:19:00,540 --> 00:19:03,990
Donc, quand nous disons, ce
Points Tout le chemin du retour

361
00:19:03,990 --> 00:19:08,140
à l'ensemble de cette object--
quand nous faisons this.fn,

362
00:19:08,140 --> 00:19:11,990
nous allons aller tout le chemin du retour
à cet objet, aller à la valeur de fn

363
00:19:11,990 --> 00:19:16,471
et obtenir sam, tirer tout le chemin
dos, coller ici, et de passer ensuite.

364
00:19:16,471 --> 00:19:19,838
>> AUDIENCE: Donc, avec la récupération, est
que fait raison de le paramètre

365
00:19:19,838 --> 00:19:20,621
définition?

366
00:19:20,621 --> 00:19:23,870
Sam Green: Donc la question est, est la
la récupération fait raison de le paramètre

367
00:19:23,870 --> 00:19:24,727
définition?

368
00:19:24,727 --> 00:19:25,435
Oui, absolument.

369
00:19:25,435 --> 00:19:29,660

370
00:19:29,660 --> 00:19:32,470
Qu'est-ce qui va se passer ici est,
ce point dit à la JavaScript,

371
00:19:32,470 --> 00:19:39,990
OK, je me fais une certaine valeur
de cet objet de moi-même.

372
00:19:39,990 --> 00:19:46,375
Et puis il va chercher une entrée
appelé fn, et si il le trouve,

373
00:19:46,375 --> 00:19:48,470
il reviendra que value-- oui, il est sam.

374
00:19:48,470 --> 00:19:51,540
Mais je pourrais aussi ai tapé
quelque chose qui n'a pas été définie ici,

375
00:19:51,540 --> 00:19:54,090
puis il serait tout simplement
retourner undefined-- qui

376
00:19:54,090 --> 00:19:58,250
est une chose qui peut JavaScript
faire, ce qui peut avoir des avantages,

377
00:19:58,250 --> 00:20:03,190
mais il est also-- si vous faites une faute de frappe,
il peut en résulter des erreurs étranges.

378
00:20:03,190 --> 00:20:05,617
Donc, il va juste essayer de trouver
tout ce que vous lui demandez de trouver

379
00:20:05,617 --> 00:20:07,700
et il ne va pas
se plaindre si ne le trouve pas.

380
00:20:07,700 --> 00:20:11,390
Il va juste dire, je ne l'ai pas
trouver, et de passer ensuite.

381
00:20:11,390 --> 00:20:17,581
Donc, il serait undefined,
plus le blanc, plus le nom.

382
00:20:17,581 --> 00:20:18,080
Oui.

383
00:20:18,080 --> 00:20:21,070
Et puis, nous pouvons voir que si nous
pourrait alors descendre et access--

384
00:20:21,070 --> 00:20:25,450
et nous appelons tf.print () avec des parenthèses.

385
00:20:25,450 --> 00:20:30,000
Il va appeler que l'imprimé
fonction sans aucun argument, non?

386
00:20:30,000 --> 00:20:34,490
Mais si nous venons de dire tf.print ()
virgule, sans les parenthèses,

387
00:20:34,490 --> 00:20:37,480
tout ce qui aurait fait est de tirer
la fonction de la valeur,

388
00:20:37,480 --> 00:20:40,609
mais pas réellement appelé.

389
00:20:40,609 --> 00:20:41,162
Cool.

390
00:20:41,162 --> 00:20:42,870
HUGH ZABRISKIE: Si
nous faisons un objet?

391
00:20:42,870 --> 00:20:44,161
Sam Green: Bien sûr, nous allons le faire.

392
00:20:44,161 --> 00:20:48,750
Donc, je peux déplacer cette
par exemple à la console.

393
00:20:48,750 --> 00:20:51,380

394
00:20:51,380 --> 00:20:55,466
Nous pouvons imaginer que je dois un objet.

395
00:20:55,466 --> 00:21:03,026

396
00:21:03,026 --> 00:21:04,150
Alors ceci est un simple objet.

397
00:21:04,150 --> 00:21:06,910

398
00:21:06,910 --> 00:21:11,050
Ceci est un objet qui contient deux
valeurs avec deux touches, deux valeur de clé

399
00:21:11,050 --> 00:21:12,710
paires.

400
00:21:12,710 --> 00:21:21,850
Donc, je peux alors accéder à la valeur stockée
à l'intérieur de cet objet en faisant x.x1,

401
00:21:21,850 --> 00:21:23,400
par exemple, et je reçois 1 arrière.

402
00:21:23,400 --> 00:21:29,590
De même, x.x2, obtenir que la valeur de retour.

403
00:21:29,590 --> 00:21:33,330
>> Et maintenant, la chose est vraiment cool, je peux
effectivement ajouter quelque chose à cet objet

404
00:21:33,330 --> 00:21:34,316
après que je l'ai créé.

405
00:21:34,316 --> 00:21:36,315
Alors vous pouvez imaginer, de laisser
Je dois dire une fonction.

406
00:21:36,315 --> 00:21:44,430

407
00:21:44,430 --> 00:21:46,352
>> HUGH ZABRISKIE: Vous
avoir à faire Maj-Entrée.

408
00:21:46,352 --> 00:21:47,643
>> Sam Green: Oh, qui est ennuyeux.

409
00:21:47,643 --> 00:22:02,460

410
00:22:02,460 --> 00:22:04,324
Qu'a-t-il pas aimé?

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
Et c'est parti.

414
00:22:08,691 --> 00:22:09,190
Cool.

415
00:22:09,190 --> 00:22:12,840
>> Donc, je viens de créer
cette fonction, f, que

416
00:22:12,840 --> 00:22:17,590
va aller au courant
objet et imprimer this.x1.

417
00:22:17,590 --> 00:22:20,330
Donc, si je viens de l'appeler par f
elle-même, rien ne va

418
00:22:20,330 --> 00:22:26,970
de se produire, à droite, car il n'y a pas x1
champ de l'objet, il fait référence à.

419
00:22:26,970 --> 00:22:39,710
Mais, si je dis, x.f = f, et puis je
appeler x.f (), je vais revenir 1.

420
00:22:39,710 --> 00:22:42,990

421
00:22:42,990 --> 00:22:46,530
Cette fonction de f est maintenant
associé à l'objet x,

422
00:22:46,530 --> 00:22:51,800
qui a une clé appelée x1
associée à la valeur 1,

423
00:22:51,800 --> 00:22:54,570
Alors, quand nous appelons this.x1, il est
va trouver ce qu'il cherche

424
00:22:54,570 --> 00:22:56,450
et être en mesure d'imprimer sur une valeur.

425
00:22:56,450 --> 00:22:58,700
Voilà donc un exemple
du genre des choses folles

426
00:22:58,700 --> 00:23:01,190
vous pouvez faire avec des objets en JavaScript.

427
00:23:01,190 --> 00:23:03,870

428
00:23:03,870 --> 00:23:07,560
>> Alors que la version était
version générique, sens

429
00:23:07,560 --> 00:23:13,780
que nous avons créé un objet en utilisant cette
parenthèses notation accolade notation--,

430
00:23:13,780 --> 00:23:16,880
rather-- et voilà
pratique si nous voulons juste

431
00:23:16,880 --> 00:23:21,440
une instance d'un objet particulier, mais
si nous voulons avoir plus d'un

432
00:23:21,440 --> 00:23:22,210
du même genre?

433
00:23:22,210 --> 00:23:24,440
Et la réponse à cette
question est, il ya des choses

434
00:23:24,440 --> 00:23:26,760
appelé classes ainsi JavaScript.

435
00:23:26,760 --> 00:23:31,470

436
00:23:31,470 --> 00:23:36,420
Nous pouvons créer une fonction qui
fait une sorte de initialisation

437
00:23:36,420 --> 00:23:41,690
pour un objet étranger,
et nous dirions, comme,

438
00:23:41,690 --> 00:23:44,550
mon class-- sorte que le nom
du object-- réutilisable

439
00:23:44,550 --> 00:23:47,100
est égal à la fonction qui définit le haut.

440
00:23:47,100 --> 00:23:52,280
Alors qu'est-ce que ce serait l'équivalent
à crée un objet qui

441
00:23:52,280 --> 00:23:55,930
serait comme juste,
accolade, str, du côlon,

442
00:23:55,930 --> 00:23:59,630
ceci est une chaîne,
virgule, accolade.

443
00:23:59,630 --> 00:24:01,880
Ce serait le générique
objet on initialise,

444
00:24:01,880 --> 00:24:06,380
avec la seule différence étant le
prochaines lignes, nous créons un prototype, qui

445
00:24:06,380 --> 00:24:11,190
signifie qu'il est une clé par défaut
nous ajoutons à notre objet qui

446
00:24:11,190 --> 00:24:13,970
a la valeur indiquée ici.

447
00:24:13,970 --> 00:24:20,570
Ce qui signifie que, lorsque je crée un nouveau
instance de cet objet MyClass,

448
00:24:20,570 --> 00:24:27,440
il va avoir pré-construit à l'intérieur du
une valeur appelée str et une autre valeur

449
00:24:27,440 --> 00:24:32,418
myPrint appelé, qui est
va être une fonction.

450
00:24:32,418 --> 00:24:32,918
Impressionnant.

451
00:24:32,918 --> 00:24:37,410

452
00:24:37,410 --> 00:24:37,990
>> Formidable.

453
00:24:37,990 --> 00:24:40,710
Donc la dernière chose à
dire sur JavaScript

454
00:24:40,710 --> 00:24:46,430
est qu'il est vraiment utile pour ce
sont appelés opérations asynchrones.

455
00:24:46,430 --> 00:24:52,500
Des moyens asynchrone est que nous
peut attendre pour une opération

456
00:24:52,500 --> 00:24:57,870
pour terminer avant de passer
, mais passer alors que nous attendons

457
00:24:57,870 --> 00:24:59,690
puis quelque chose se passe plus tard.

458
00:24:59,690 --> 00:25:03,480
Et ce que je veux dire par là, vous
peut imaginer une situation où

459
00:25:03,480 --> 00:25:06,850
vous envoyez une demande à
un serveur Web, quelque part,

460
00:25:06,850 --> 00:25:09,670
et il va vous renvoyer
certains gros morceau de données, non?

461
00:25:09,670 --> 00:25:13,320
Et votre utilisateur pourrait attendre dans la
Entre-temps pour que cela se produise,

462
00:25:13,320 --> 00:25:15,200
et rien ne pouvait être
passait à ce moment-là.

463
00:25:15,200 --> 00:25:18,110
Mais cela ne un grand dessein, non?

464
00:25:18,110 --> 00:25:20,214
Vous ne voulez pas la page Web de geler.

465
00:25:20,214 --> 00:25:22,380
Que faire si l'utilisateur veut
cliquer sur un menu déroulant?

466
00:25:22,380 --> 00:25:24,870
Il est pas un grand motif de conception.

467
00:25:24,870 --> 00:25:29,290
Au lieu de cela, fondamentalement ce que
JavaScript ne se dit,

468
00:25:29,290 --> 00:25:31,870
OK, effectuer cette opération de façon asynchrone.

469
00:25:31,870 --> 00:25:36,520
Donc, comme, attendre dans le fond,
et puis quand l'opération est effectuée,

470
00:25:36,520 --> 00:25:39,420
appeler le rappel function--
appeler une fonction,

471
00:25:39,420 --> 00:25:43,800
Faites quelques action-- signaler que le
opération que nous attendions pour mettre fin à

472
00:25:43,800 --> 00:25:45,520
est fini.

473
00:25:45,520 --> 00:25:51,240
Et la raison qui est super puissant est,
nous pouvons faire quelque chose, passer un argument,

474
00:25:51,240 --> 00:25:54,440
faire quelque chose, et puis attendre
pour que quelque chose arrive.

475
00:25:54,440 --> 00:25:58,970
Puis, une fois que quelque chose
Complètes, nous pouvons appeler une fonction de rappel.

476
00:25:58,970 --> 00:26:03,300
Cela est vraiment utile, car elle permet de
nous faisons les choses avec Web Audio API,

477
00:26:03,300 --> 00:26:07,490
par exemple, comme la charge d'un
fichier audio à partir d'un serveur distant

478
00:26:07,490 --> 00:26:11,660
sans avoir à attendre pour la
tout le fichier audio à charger,

479
00:26:11,660 --> 00:26:14,440
ce qui serait vraiment
mauvais pour l'expérience utilisateur.

480
00:26:14,440 --> 00:26:17,080
Cool.

481
00:26:17,080 --> 00:26:19,460
>> Dernière quelques notes sur
débogage, puisque ce

482
00:26:19,460 --> 00:26:23,682
est une chose que vous allez avoir à faire
dans le cadre de votre projet, garanti.

483
00:26:23,682 --> 00:26:25,140
Je l'ai mentionné la console JavaScript.

484
00:26:25,140 --> 00:26:27,550
Il est une fonctionnalité super utile
de tous les navigateurs modernes,

485
00:26:27,550 --> 00:26:30,300
Et nous vous encourageons vraiment obtenir
à l'aise avec votre console,

486
00:26:30,300 --> 00:26:33,660
si vous voulez obtenir de bons à JavaScript.

487
00:26:33,660 --> 00:26:36,320
Il est super pratique pour
débogage, mais il est aussi

488
00:26:36,320 --> 00:26:39,440
vraiment utile pour comprendre
comment utiliser une API.

489
00:26:39,440 --> 00:26:41,950
Il permet de vraiment
l'expérimentation facile

490
00:26:41,950 --> 00:26:45,910
sans avoir à taper un peu
code, puis compiler.

491
00:26:45,910 --> 00:26:47,500
Vous ne devez pas faire toutes ces étapes.

492
00:26:47,500 --> 00:26:49,619
Vous pouvez simplement écrire
du code dans une ligne,

493
00:26:49,619 --> 00:26:52,410
puis obtenir une rétroaction immédiate sur
si cette ligne de code ou non

494
00:26:52,410 --> 00:26:55,230
worked-- très pratique.

495
00:26:55,230 --> 00:26:59,760
>> Et aussi, juste un note-- technique
la console JavaScript est un exemple

496
00:26:59,760 --> 00:27:05,680
d'un REPL-- sorte que ce R-E-P-L, REPL,
qui se tient pour la lecture, d'évaluer,

497
00:27:05,680 --> 00:27:06,180
boucle d'impression.

498
00:27:06,180 --> 00:27:09,100

499
00:27:09,100 --> 00:27:12,120
Vous allez taper des trucs
dans, il va lire ce que vous avez tapé dans,

500
00:27:12,120 --> 00:27:17,280
il va l'évaluer, et il va imprimer le
sortie, puis il va recommencer.

501
00:27:17,280 --> 00:27:22,056
Cela vous permet d'aller rapidement dans
cercles itération, ce qui est vraiment cool.

502
00:27:22,056 --> 00:27:25,150

503
00:27:25,150 --> 00:27:28,930
>> Je suppose que ce réel dernière note--
est la réelle dernière note, oui.

504
00:27:28,930 --> 00:27:30,780
Comment pouvons-nous réellement utiliser JavaScript?

505
00:27:30,780 --> 00:27:34,040
Alors d'abord, nous pouvons importer
à l'aide d'une balise script

506
00:27:34,040 --> 00:27:39,500
en haut ou en bas d'une HTML file--
partout à l'intérieur d'un fichier HTML,

507
00:27:39,500 --> 00:27:40,440
vraiment.

508
00:27:40,440 --> 00:27:47,390
Et dans une balise de script, il ya
deux sous-manières d'importer JavaScript.

509
00:27:47,390 --> 00:27:51,370
Le premier est en ayant une
fichier JavaScript distinct

510
00:27:51,370 --> 00:27:58,010
que nous importons dans son intégralité, ou
en ayant une superficie de code comme le script

511
00:27:58,010 --> 00:28:00,290
pour commencer, et ensuite
script de barre oblique inverse à la fin.

512
00:28:00,290 --> 00:28:02,620
Et puis nous écrivons simplement
JavaScript dans le fichier HTML.

513
00:28:02,620 --> 00:28:03,790
Ce sont les deux façons.

514
00:28:03,790 --> 00:28:05,165
Vous ne pouvez pas avoir à l'intérieur du HTML.

515
00:28:05,165 --> 00:28:06,502

516
00:28:06,502 --> 00:28:08,126
Public: Est-ce mieux que l'autre?

517
00:28:08,126 --> 00:28:10,542
Sam Green: La question était,
Est-ce que l'un est meilleur que l'autre.

518
00:28:10,542 --> 00:28:18,306
Donc, oui, comme une pratique de style de codage,
et aussi il est comme une pratique de conception.

519
00:28:18,306 --> 00:28:20,180
Il ya deux raisons
pourquoi il pourrait être mieux.

520
00:28:20,180 --> 00:28:23,934
Le premier est, il rend votre code une
beaucoup plus lisible si l'ensemble de votre HTML

521
00:28:23,934 --> 00:28:27,100
est en un seul endroit, l'ensemble de votre CSS est dans
un autre endroit, l'ensemble de votre JavaScript

522
00:28:27,100 --> 00:28:28,420
est dans une troisième place.

523
00:28:28,420 --> 00:28:28,920
Droit?

524
00:28:28,920 --> 00:28:32,370
Je pense que nous aurions déjà parlé
à ce sujet dans sections-- comme ce CSS--

525
00:28:32,370 --> 00:28:35,220
et que cela va est--
souvent dans un autre fichier.

526
00:28:35,220 --> 00:28:37,090
Donc, même genre de concept ici.

527
00:28:37,090 --> 00:28:42,410
Vous pouvez aussi imaginer que JavaScript
seraient réutilisés sur plusieurs

528
00:28:42,410 --> 00:28:47,350
Page HTML, ou peut-être un
grand nombre de pages HTML,

529
00:28:47,350 --> 00:28:49,340
et ayant que JavaScript
remaniée en une seule

530
00:28:49,340 --> 00:28:51,950
fichier que vous pouvez importer
en plus d'un endroit

531
00:28:51,950 --> 00:28:54,570
permet au code d'être
de façon plus maintenable.

532
00:28:54,570 --> 00:28:57,930
Vous pouvez imaginer faire un
changer le JavaScript

533
00:28:57,930 --> 00:29:00,070
et d'avoir à changer
dans 100 fichiers différents.

534
00:29:00,070 --> 00:29:04,070
Et à la place, nous pouvons simplement changer
en un seul, ce qui est beaucoup plus puissant.

535
00:29:04,070 --> 00:29:05,420
Ai-je répondu à votre question?

536
00:29:05,420 --> 00:29:07,950
Cool.

537
00:29:07,950 --> 00:29:10,830
>> Nous pouvons également taper dans la console,
comme nous l'avons mentionné précédemment.

538
00:29:10,830 --> 00:29:15,070
Et encore une fois, une dernière note--
Web Audio est intégré,

539
00:29:15,070 --> 00:29:16,978
vous ne devez charger quoi que ce soit.

540
00:29:16,978 --> 00:29:17,478
Cool.

541
00:29:17,478 --> 00:29:20,519
Y at-il des questions, avez-vous
d'autres questions sur JavaScript,

542
00:29:20,519 --> 00:29:21,930
avant de passer?

543
00:29:21,930 --> 00:29:24,286
>> AUDIENCE: [inaudible]

544
00:29:24,286 --> 00:29:25,410
Sam Green: Très bien, cool.

545
00:29:25,410 --> 00:29:27,200
Alors maintenant, il va parler de l'API.

546
00:29:27,200 --> 00:29:28,490
>> HUGH ZABRISKIE: Cool.

547
00:29:28,490 --> 00:29:28,990
Merci, Sam.

548
00:29:28,990 --> 00:29:30,184
>> Sam Green: Bien sûr.

549
00:29:30,184 --> 00:29:32,600
HUGH ZABRISKIE: Awesome, donc
nous allons passer à partir de JavaScript.

550
00:29:32,600 --> 00:29:35,350
Donc, nous avons parlé de certains
l'essentiel de JavaScript,

551
00:29:35,350 --> 00:29:41,105
et ceux qui sont les variables, fonctions,
objets, fonctions en tant que variables,

552
00:29:41,105 --> 00:29:41,980
chargement asynchrone.

553
00:29:41,980 --> 00:29:46,100
Ce sont toutes les choses que vous aurez
voir que vous utilisez le Web Audio.

554
00:29:46,100 --> 00:29:49,230
Donc, nous allons juste parler
à ce sujet d'abord à un niveau élevé.

555
00:29:49,230 --> 00:29:52,120
>> Il est une API, il est donc quelque chose de
qui est construit, comme l'a dit Sam,

556
00:29:52,120 --> 00:29:57,010
à droite dans le code JavaScript
que vous utilisez dans la console.

557
00:29:57,010 --> 00:30:01,020
Et il est effectivement tout comme le code C ++
qui est vraiment construite dans Chrome

558
00:30:01,020 --> 00:30:04,470
et Firefox, et l'ensemble de ces navigateurs.

559
00:30:04,470 --> 00:30:07,060
Donc, l'idée principale avec Web
Audio est que vous avez

560
00:30:07,060 --> 00:30:09,440
ce genre de pipeline de l'audio, pas vrai?

561
00:30:09,440 --> 00:30:13,670
Donc, vos données audio
vient dans une certaine forme.

562
00:30:13,670 --> 00:30:16,690
>> Il ya trois type de forms-- principale
vous avez l'oscillateur, qui

563
00:30:16,690 --> 00:30:21,340
crée une onde sinusoïdale, cosinus,
nous allons voir comment cela fonctionne.

564
00:30:21,340 --> 00:30:23,890
Un autre très commun,
bien sûr, est un MP3.

565
00:30:23,890 --> 00:30:25,810
Alors peut-être vous commencez avec
une chanson, et puis vous

566
00:30:25,810 --> 00:30:28,320
veulent faire du filtrage
à cette sortie et

567
00:30:28,320 --> 00:30:30,605
that-- qui pourrait être une source possible.

568
00:30:30,605 --> 00:30:32,480
Et puis un vraiment cool
l'une est le microphone.

569
00:30:32,480 --> 00:30:37,230
Ainsi, vous pouvez utiliser certains très
appels de base en JavaScript

570
00:30:37,230 --> 00:30:39,440
pour obtenir l'accès au
microphone, et si vous

571
00:30:39,440 --> 00:30:42,870
voulu faire une application
comme un détecteur de hauteur,

572
00:30:42,870 --> 00:30:45,290
par exemple, qui prend en
votre voix et chiffres sur

573
00:30:45,290 --> 00:30:47,740
l'pitch-- moyen très facile de cela.

574
00:30:47,740 --> 00:30:50,730
Vous pouvez juste sorte de lire
dans, comprendre la fréquence,

575
00:30:50,730 --> 00:30:52,250
puis un certain nombre de sortie.

576
00:30:52,250 --> 00:30:56,080
Donc, nous allons voir comment ça fonctionne, aussi bien.

577
00:30:56,080 --> 00:30:59,430
>> La destination est fondamentalement
dans lequel les données audio est émis.

578
00:30:59,430 --> 00:31:02,890
Donc, en général, ça ressemble
vos haut-parleurs portables.

579
00:31:02,890 --> 00:31:05,610
Autres options sont comme
un ScriptProcessorNode--

580
00:31:05,610 --> 00:31:07,990
nous y reviendrons nœuds dans un
second-- mais fondamentalement,

581
00:31:07,990 --> 00:31:11,939
soit vous mettez sur son
grâce à votre ordinateur via haut-parleurs,

582
00:31:11,939 --> 00:31:14,730
ou que vous sorte de l'enregistrement, de sorte
vous stocker sous forme de données audio.

583
00:31:14,730 --> 00:31:18,980
Alors peut-être si quelqu'un crée
la musique dans votre application, puis

584
00:31:18,980 --> 00:31:22,410
vous voulez enregistrer cela et peut-être comme
exporter vers SoundCloud, pour example--

585
00:31:22,410 --> 00:31:25,281
ce serait une façon de le faire.

586
00:31:25,281 --> 00:31:27,030
Tous les trucs fun,
dont nous allons parler,

587
00:31:27,030 --> 00:31:29,950
qui se produit entre ces deux points,
où nous chargeons de la musique

588
00:31:29,950 --> 00:31:31,410
puis sortie il.

589
00:31:31,410 --> 00:31:36,660
>> Donc, je vais parler de cinq
étapes de la production audio en une seconde.

590
00:31:36,660 --> 00:31:38,950
Nous avons cette chose appelée
un AudioContext, qui

591
00:31:38,950 --> 00:31:41,580
est ce petit wrapper que nous voyons ici.

592
00:31:41,580 --> 00:31:49,980
Fondamentalement, ce que AudioContext est-- si nous
aller à la console JavaScript à l'heure actuelle,

593
00:31:49,980 --> 00:31:52,740
nous pouvons créer un dès maintenant.

594
00:31:52,740 --> 00:31:54,040
Juste un exemple de REPL, non?

595
00:31:54,040 --> 00:31:57,880
Lisaient,
l'évaluation, et il imprime.

596
00:31:57,880 --> 00:32:00,260
>> AudioContext est un état global.

597
00:32:00,260 --> 00:32:05,500
Il a une structure, il est un objet
ici, et il conserve les informations

598
00:32:05,500 --> 00:32:09,960
à propos de choses se passent que
sur l'écran pour les réglages audio.

599
00:32:09,960 --> 00:32:15,220
Un exemple est l'heure actuelle.

600
00:32:15,220 --> 00:32:18,910
Cela vous indique le nombre
des secondes, de façon très précise,

601
00:32:18,910 --> 00:32:20,890
depuis la page web chargée.

602
00:32:20,890 --> 00:32:24,110
Alors ceci est un vraiment utile
peu de bien que vous pouvez utiliser.

603
00:32:24,110 --> 00:32:27,898
Il a lu terre que: Je pense effectivement
vous pouvez tenter de régler une valeur.

604
00:32:27,898 --> 00:32:29,856
Il vous dira le définissez,
et puis si vous l'imprimez

605
00:32:29,856 --> 00:32:31,439
again-- il n'a pas fait assez de travail.

606
00:32:31,439 --> 00:32:34,472
Donc, il sont en lecture seule
propriétés en JavaScript.

607
00:32:34,472 --> 00:32:36,430
Ceci est vraiment utile si
vous sorte de la synchronisation

608
00:32:36,430 --> 00:32:38,610
beaucoup de différent
informations, lorsque vous êtes

609
00:32:38,610 --> 00:32:41,280
sorte de jouer des sons différents.

610
00:32:41,280 --> 00:32:43,630
>> Un autre vraiment utile
est la destination de contexte.

611
00:32:43,630 --> 00:32:46,587

612
00:32:46,587 --> 00:32:49,670
Certainement, si vous êtes intéressé, être
essayer ceci à votre propre droit de la console

613
00:32:49,670 --> 00:32:50,980
en ce moment.

614
00:32:50,980 --> 00:32:53,150
Alors ceci est un AudioDestinationNode.

615
00:32:53,150 --> 00:32:56,480
Fondamentalement, ce que cela dit est,
où est la sortie va?

616
00:32:56,480 --> 00:32:59,590
Donc, il ya deux options réelles ici.

617
00:32:59,590 --> 00:33:01,940
Habituellement, la valeur par défaut
est seulement vos haut-parleurs,

618
00:33:01,940 --> 00:33:05,150
afin AudioDestinationNode
essentiellement dit juste

619
00:33:05,150 --> 00:33:09,240
il ya zéro sorties au son
venant, envoyé au haut-parleur.

620
00:33:09,240 --> 00:33:12,050
Donc, en général, vous ne faites pas
avoir à jouer avec cela.

621
00:33:12,050 --> 00:33:15,720
Si vous êtes intéressé à utiliser effectivement
l'ScriptProcessorNode pour l'enregistrement,

622
00:33:15,720 --> 00:33:16,990
certainement tirez-moi un
e-mail plus tard, parce que ce

623
00:33:16,990 --> 00:33:18,330
un peu plus compliqué.

624
00:33:18,330 --> 00:33:21,590
Mais en général, vous êtes juste un peu
de délivrer son dans une certaine forme.

625
00:33:21,590 --> 00:33:24,347
So cool, nous allons retourner à cette page.

626
00:33:24,347 --> 00:33:25,180
AUDIENCE: Je suis désolé.

627
00:33:25,180 --> 00:33:26,054
HUGH ZABRISKIE: Ouais.

628
00:33:26,054 --> 00:33:28,770
AUDIENCE: Je sais que vous avez dit de parler
à vous plus tard à propos de l'enregistrement.

629
00:33:28,770 --> 00:33:31,550
Pouvez-vous interface avec Pro Tools?

630
00:33:31,550 --> 00:33:33,120
>> HUGH ZABRISKIE: Avec Pro Tools?

631
00:33:33,120 --> 00:33:35,260
Voyons voir.

632
00:33:35,260 --> 00:33:37,220
Je ne le pense pas.

633
00:33:37,220 --> 00:33:41,670
Donc aller entre le client,
qui est le JavaScript

634
00:33:41,670 --> 00:33:44,310
console, et votre réelle
ordinateur, est généralement

635
00:33:44,310 --> 00:33:46,490
quelque chose qui est un peu
de hors limites, si vous

636
00:33:46,490 --> 00:33:52,320
sera, genre par la nature des the--
il est une sorte de chose de la conception,

637
00:33:52,320 --> 00:33:57,770
mais vous essayez de garder le navigateur séparée
à partir de l'ordinateur réel de l'utilisateur.

638
00:33:57,770 --> 00:34:02,310
Généralement, la seule chose que vous êtes en mesure de
l'accès est le microphone ou la caméra.

639
00:34:02,310 --> 00:34:04,730
Vous n'êtes pas en mesure de, je
ne pense pas, utilisez Pro Tools.

640
00:34:04,730 --> 00:34:07,480
Cependant, si vous avez créé
une piste dans Pro Tools,

641
00:34:07,480 --> 00:34:12,710
exporté que vous pouvez charger que
ici, le filtrer, par exemple,

642
00:34:12,710 --> 00:34:16,820
processus qui, et enregistrer que dans un
Audio destination-- ou, no-- une Sphère

643
00:34:16,820 --> 00:34:17,870
Noeud de processeur.

644
00:34:17,870 --> 00:34:20,730
Et puis à partir de là, vous pouviez
exporter que de SoundCloud, vous

645
00:34:20,730 --> 00:34:25,320
pourrait l'envoyer dans un e-mail, ou
ce que vous voulez à partir de là.

646
00:34:25,320 --> 00:34:31,159
>> Mais il est une sorte de barrière légère
entre faire de la musique sur votre ordinateur

647
00:34:31,159 --> 00:34:33,050
et faire de la musique en ligne.

648
00:34:33,050 --> 00:34:37,940
>> Sam Green: Et voilà
pas unique à cette API.

649
00:34:37,940 --> 00:34:44,060
Il est une caractéristique de sécurité de Chrome, et
Je pense que tous les autres navigateurs modernes.

650
00:34:44,060 --> 00:34:45,860
Le navigateur est autonome.

651
00:34:45,860 --> 00:34:50,980
Ainsi, par exemple, une page Web ne peut pas
utiliser JavaScript pour couper le son

652
00:34:50,980 --> 00:34:54,190
sur vos haut-parleurs, par exemple.

653
00:34:54,190 --> 00:34:58,120
Ou il ne peut pas éteindre votre ordinateur.

654
00:34:58,120 --> 00:35:01,530
Et il n'y a pas de point intermédiaire
entre ces deux choses, à droite,

655
00:35:01,530 --> 00:35:05,960
donc soit vous avez une
abstraction complète,

656
00:35:05,960 --> 00:35:10,050
ou vous ouvrez le
faille de sécurité de laisser

657
00:35:10,050 --> 00:35:14,440
un programmeur avec de mauvaises intentions faire
ce qu'ils veulent avec votre ordinateur portable.

658
00:35:14,440 --> 00:35:18,104
Et voilà pourquoi Chrome est autonome.

659
00:35:18,104 --> 00:35:19,310
>> HUGH ZABRISKIE: Ouais.

660
00:35:19,310 --> 00:35:20,840
Cela a-t-il du sens?

661
00:35:20,840 --> 00:35:21,369
Cool cool.

662
00:35:21,369 --> 00:35:23,160
Je voulais simplement
montrer un exemple d'un.

663
00:35:23,160 --> 00:35:25,118
Ceci est à peu près aussi
autant que vous obtenez, en termes

664
00:35:25,118 --> 00:35:26,950
d'accéder à l'ordinateur de l'utilisateur.

665
00:35:26,950 --> 00:35:30,180
Si vous avez un clavier USB branché,
vous pouvez utiliser ce qu'on appelle le Web

666
00:35:30,180 --> 00:35:32,180
API MIDI, que nous ne
vraiment parler ici,

667
00:35:32,180 --> 00:35:36,330
mais ceci est une autre API qui est
construite en au moins Chrome-- nouveau,

668
00:35:36,330 --> 00:35:41,570
voilà pourquoi nous aimons Chrome--
Je pense que Firefox ou Safari,

669
00:35:41,570 --> 00:35:44,300
cela est une chose facile à
différents navigateurs ont google--

670
00:35:44,300 --> 00:35:46,917
support différent pour ce qui
API qu'ils ont mis en œuvre.

671
00:35:46,917 --> 00:35:49,875
Mais si vous voulez brancher un clavier
et de travailler avec cette information,

672
00:35:49,875 --> 00:35:52,850
genre d'envoyer le clavier
informations sur l'ordinateur

673
00:35:52,850 --> 00:35:57,620
et ensuite l'utiliser en ligne, cette API
est l'endroit où vous souhaitez travailler cela.

674
00:35:57,620 --> 00:35:58,150
>> Cool.

675
00:35:58,150 --> 00:35:58,710
D'ACCORD.

676
00:35:58,710 --> 00:36:01,320
Donc, se déplaçant rapidement ici.

677
00:36:01,320 --> 00:36:03,310
Comment faisons-nous à temps?

678
00:36:03,310 --> 00:36:04,210
>> ENCEINTE 1: Environ 15.

679
00:36:04,210 --> 00:36:05,543
>> HUGH ZABRISKIE: 15 minutes?

680
00:36:05,543 --> 00:36:06,160
OK cool.

681
00:36:06,160 --> 00:36:08,170
Donc, nous allons course devant ici.

682
00:36:08,170 --> 00:36:13,500
>> Donc, fondamentalement, le principal point de
penser à cela comme un pipeline

683
00:36:13,500 --> 00:36:16,430
est que chaque étape dans le pipeline
est une série de noeuds de audio.

684
00:36:16,430 --> 00:36:19,284

685
00:36:19,284 --> 00:36:20,950
Notre source, disons, est un oscillateur.

686
00:36:20,950 --> 00:36:23,380
Nous devons créer un nœud de l'oscillateur.

687
00:36:23,380 --> 00:36:25,690
Et cela est juste genre
de la petite function--

688
00:36:25,690 --> 00:36:30,460
et ils sont tous basés sur
du contexte audio ici.

689
00:36:30,460 --> 00:36:32,885
>> PUBLIC: Quand il dit
oscillateur, ce que cela signifie

690
00:36:32,885 --> 00:36:37,250
il est effectivement littéralement allant de
deux pôles différents allers et retours?

691
00:36:37,250 --> 00:36:41,170
>> HUGH ZABRISKIE: Non, il est comme
une représentation numérique.

692
00:36:41,170 --> 00:36:42,740
Il est effectivement mis en œuvre en C ++.

693
00:36:42,740 --> 00:36:46,460
En fait, je ne sais pas les spécifications
de la façon dont il est effectivement mis en œuvre,

694
00:36:46,460 --> 00:36:48,500
mais tout cela fonctionne comme données binaires.

695
00:36:48,500 --> 00:36:51,260

696
00:36:51,260 --> 00:36:52,370
En fait, oui.

697
00:36:52,370 --> 00:36:53,950
Cela reviendrait à dire, je pouvais
en fait, si vous êtes intéressé,

698
00:36:53,950 --> 00:36:56,533
Je pourrais vous envoyer un peu plus
informations sur la façon dont les formes d'onde

699
00:36:56,533 --> 00:37:00,181
sont maintenus ayant un format numérique.

700
00:37:00,181 --> 00:37:00,680
OK cool.

701
00:37:00,680 --> 00:37:03,120
>> Nous sommes donc générer un ton comme une condition sine
WAVE ou quelque chose comme ça, peut-être

702
00:37:03,120 --> 00:37:04,190
440 Hertz.

703
00:37:04,190 --> 00:37:05,830
Nous créons un oscillateur.

704
00:37:05,830 --> 00:37:09,180
Si nous voulons régler le volume, nous
rien connecter à un GainNode,

705
00:37:09,180 --> 00:37:12,500
que nous pourrions faire avec .creategain.

706
00:37:12,500 --> 00:37:14,250
Qui fixe le volume.

707
00:37:14,250 --> 00:37:17,820
Vous pouvez passer que sur tout
de l'autre ainsi dire les options,

708
00:37:17,820 --> 00:37:20,300
si une source de la mémoire tampon audio
noeud est où vous pourriez

709
00:37:20,300 --> 00:37:23,660
stocker un fichier MP3 que vous avez chargé.

710
00:37:23,660 --> 00:37:27,670
>> Biquad filtre pour le filtrage est si
vous voulez prendre toute la base sur

711
00:37:27,670 --> 00:37:29,630
d'une chanson, ou quelque chose comme ça.

712
00:37:29,630 --> 00:37:32,450
A Dieu ne plaise que vous voulez prendre
la base sur une chanson.

713
00:37:32,450 --> 00:37:36,980
Et le noeud de AudioDestination est, encore une fois,
comme l'endroit où notre finalisation est.

714
00:37:36,980 --> 00:37:39,980
Si jamais vous êtes intéressé à voir
toutes les différentes options possibles,

715
00:37:39,980 --> 00:37:45,190
juste aller à l'onglet et laisser
l'auto-complétion venir.

716
00:37:45,190 --> 00:37:48,690
Et si vous ne créez, vous verrez tous les
choses différentes que vous pouvez créer.

717
00:37:48,690 --> 00:37:50,398
Vous pouvez créer dynamique
processeurs de script,

718
00:37:50,398 --> 00:37:52,940
Je ne sais même pas ce que cela
est, pour mélanger les fusions de canal

719
00:37:52,940 --> 00:37:55,930
et répartiteurs de canal et tout ça.

720
00:37:55,930 --> 00:37:56,430
Cool.

721
00:37:56,430 --> 00:37:59,560

722
00:37:59,560 --> 00:38:01,390
>> Donc, ceci est juste un
exemple d'un pipeline.

723
00:38:01,390 --> 00:38:03,580
Nous avons donc trois sources venant.

724
00:38:03,580 --> 00:38:06,830
Peut-être que ce sont des formes d'onde,
Peut-être ceux-ci sont en format MP3.

725
00:38:06,830 --> 00:38:08,740
Un qui se passe dans un
filtres, les uns des autres

726
00:38:08,740 --> 00:38:12,404
se déformée autre
son panoramique gauche et à droite.

727
00:38:12,404 --> 00:38:15,320
Vous pouvez faire toutes sortes de choses et
ils ont tous se mélangent autour ensemble,

728
00:38:15,320 --> 00:38:18,880
puis sort de l'audio
à la fin, en tant que destination.

729
00:38:18,880 --> 00:38:22,720
Ceci est un exemple de ce que plus
compliquée code Web Audio ressemble.

730
00:38:22,720 --> 00:38:26,720
Vous créez toutes ces
différents objets droite ici--

731
00:38:26,720 --> 00:38:27,706
Je ne suis pas sûr de cela.

732
00:38:27,706 --> 00:38:29,120
Non, il n'a pas de zoomer.

733
00:38:29,120 --> 00:38:29,620
D'ACCORD.

734
00:38:29,620 --> 00:38:31,257
>> Sam Green: vous ne contrôlez, défilement vers le haut.

735
00:38:31,257 --> 00:38:32,590
HUGH ZABRISKIE: Contrôle Scroll--

736
00:38:32,590 --> 00:38:33,000
Sam Green: Non, non.

737
00:38:33,000 --> 00:38:33,500
Contrôle--

738
00:38:33,500 --> 00:38:36,540

739
00:38:36,540 --> 00:38:38,140
>> HUGH ZABRISKIE: Oh, de commande, faites?

740
00:38:38,140 --> 00:38:38,780
Oh, Gotcha.

741
00:38:38,780 --> 00:38:41,480
Oui.

742
00:38:41,480 --> 00:38:42,240
Wow, Non, Non.

743
00:38:42,240 --> 00:38:42,740
D'ACCORD.

744
00:38:42,740 --> 00:38:46,090
Je ne ferai pas ça.

745
00:38:46,090 --> 00:38:48,300
>> Donc oui, dans cette première
section ici, vous voyez

746
00:38:48,300 --> 00:38:52,720
nous créons tous ces différents
nœuds sur le contexte.

747
00:38:52,720 --> 00:38:54,980
Nous sommes en train de les reconstituer
ensemble dans la seconde partie

748
00:38:54,980 --> 00:38:56,980
par cette fonction appelée Connect.

749
00:38:56,980 --> 00:38:58,830
Voilà vraiment une clé
fonction dans Web Audio.

750
00:38:58,830 --> 00:39:01,930
Cela signifie qu'une fois que vous avez fait
quelque chose avec le bruit dans un noeud,

751
00:39:01,930 --> 00:39:03,705
transmettre à la prochaine noeud.

752
00:39:03,705 --> 00:39:05,830
Nous avons donc la source, il
en communication avec l'analyseur,

753
00:39:05,830 --> 00:39:09,140
l'analyseur fait quelque chose avec elle,
il va de déformation, et ainsi de suite,

754
00:39:09,140 --> 00:39:12,725
et à la destination
en bas à droite ici.

755
00:39:12,725 --> 00:39:13,225
Cool.

756
00:39:13,225 --> 00:39:14,640
OK, donc nous allons continuer à avancer.

757
00:39:14,640 --> 00:39:17,180
>> Le pipeline-- nouveau, ces
sont conduites les plus courants,

758
00:39:17,180 --> 00:39:21,300
si nous parlons de toutes ces choses comme
distorsion, panoramique, tous ces trucs.

759
00:39:21,300 --> 00:39:24,280
Si vous êtes vraiment intéressé
en utilisant des choses Pro Tools,

760
00:39:24,280 --> 00:39:25,820
ceux qui vous intéressent sans doute.

761
00:39:25,820 --> 00:39:27,740
Si non, peut-être que vous venez
vouloir jouer le son,

762
00:39:27,740 --> 00:39:29,990
ou peut-être vous voulez juste
régler le volume sur le son.

763
00:39:29,990 --> 00:39:35,270
Ce sont les deux plus courante Trier
des pipelines dans la production audio.

764
00:39:35,270 --> 00:39:38,640
>> Encore une fois, les façons dont vous pouvez prendre
en tant oscillator-- Donc, nous allons

765
00:39:38,640 --> 00:39:42,460
faire la démonstration de ce droit ici.

766
00:39:42,460 --> 00:39:47,090

767
00:39:47,090 --> 00:39:52,225
Donc, nous allons créer un
contexte audio simple, ici,

768
00:39:52,225 --> 00:39:54,350
et de ce que nous allons
de créer notre oscillateur.

769
00:39:54,350 --> 00:39:58,620
Voilà donc, encore une fois, nous sommes juste
va appeler Créer Oscillateur.

770
00:39:58,620 --> 00:40:07,030
Nous allons définir une fréquence sur
que, 440 Hertz, le favori de tout le monde.

771
00:40:07,030 --> 00:40:13,290
Alors que nous nous connectons à la destination
point-- qui est le haut-parleur, de sorte

772
00:40:13,290 --> 00:40:15,750
la destination de contexte.

773
00:40:15,750 --> 00:40:21,400
Enfin, nous disons simplement, commencer à zéro
secondes à partir de maintenant, et ne nous avons le son?

774
00:40:21,400 --> 00:40:22,400
>> [SONNERIE]

775
00:40:22,400 --> 00:40:24,980
>> HUGH ZABRISKIE: Ici nous allons.

776
00:40:24,980 --> 00:40:25,940
Il est juste une onde sinusoïdale.

777
00:40:25,940 --> 00:40:26,440
OK cool.

778
00:40:26,440 --> 00:40:28,274
Et puis nous nous arrêterons que.

779
00:40:28,274 --> 00:40:30,520
>> AUDIENCE: Où avez-
que la rétroaction vient-il?

780
00:40:30,520 --> 00:40:31,250
>> HUGH ZABRISKIE: Le retour?

781
00:40:31,250 --> 00:40:32,458
Oh, sans doute nos micros.

782
00:40:32,458 --> 00:40:34,221

783
00:40:34,221 --> 00:40:35,470
Donc oui, voilà comment vous le faites.

784
00:40:35,470 --> 00:40:37,261
Et en fait, si je devais
gardé courir, vous

785
00:40:37,261 --> 00:40:39,540
pourrait avoir la fréquence
valeur car il est en cours d'exécution,

786
00:40:39,540 --> 00:40:43,320
de sorte que est une chose amusante à jouer.

787
00:40:43,320 --> 00:40:44,930
Cool.

788
00:40:44,930 --> 00:40:46,600
Ce est toujours une belle un à présenter.

789
00:40:46,600 --> 00:40:48,792
>> Sam Green: Nous ne sommes pas
pensons à ce sujet, avons-nous?

790
00:40:48,792 --> 00:40:50,500
HUGH ZABRISKIE: Ouais,
qui est méchante.

791
00:40:50,500 --> 00:40:53,249
Ainsi, le tampon loading-- je vais vous montrer une
exemple de ce que tout à la fin.

792
00:40:53,249 --> 00:40:55,090
Cela chargement d'un MP3.

793
00:40:55,090 --> 00:40:58,880
Et un microphone, vous suffit d'utiliser une fonction
Navigator.getUserMedia appelé ()

794
00:40:58,880 --> 00:41:03,240
de demander l'accès à l'utilisateur de
microphone pour cette information.

795
00:41:03,240 --> 00:41:05,610
>> Ici se filtrage, je vais
juste continuer à avancer de cette situation.

796
00:41:05,610 --> 00:41:08,600
Cette est assez haut niveau,
mais filtres vous permettent juste

797
00:41:08,600 --> 00:41:16,154
>> [BIP]

798
00:41:16,154 --> 00:41:18,320
Filtrage vous permet également
de créer des choses comme le rose

799
00:41:18,320 --> 00:41:20,050
le bruit, le bruit brun, bruit blanc.

800
00:41:20,050 --> 00:41:24,330
Si vous voulez créer un bruit pur, qui
certaines personnes aiment à déranger,

801
00:41:24,330 --> 00:41:27,490
vous pouvez utiliser Web Audio
filtrage de le faire.

802
00:41:27,490 --> 00:41:30,039
>> Audio Panning-- alors imaginez
si vous écrivez un jeu

803
00:41:30,039 --> 00:41:32,330
et que vous voulez le son
sonner comme ça vient, comme,

804
00:41:32,330 --> 00:41:36,090
tir à travers l'écran, vous
peut utiliser le panoramique de l'audio

805
00:41:36,090 --> 00:41:39,770
pour créer ce genre de cône,
qui like-- il est assez Mathy,

806
00:41:39,770 --> 00:41:41,850
mais il est en fait vraiment
cool si vous obtenez ça marche,

807
00:41:41,850 --> 00:41:44,500
et il ya quelque chose de bon
tutoriels sur ce je peux vous envoyer.

808
00:41:44,500 --> 00:41:46,400
Fondamentalement, vous pouvez genre
de créer le son

809
00:41:46,400 --> 00:41:50,480
de quelque chose qui passe d'une manière 3D.

810
00:41:50,480 --> 00:41:57,350
Et si vous avez un intérêt de DJ, vous pouvez
commencer à mélanger et traverser chansons décoloration.

811
00:41:57,350 --> 00:42:01,260
>> Ceci est juste un peu très basique
code, essentiellement ce que je faisais avant.

812
00:42:01,260 --> 00:42:06,140
Ceci définit le volume de la
oscillateur, de sorte que nous créons notre oscillateur

813
00:42:06,140 --> 00:42:07,380
ce qui crée la forme d'onde.

814
00:42:07,380 --> 00:42:09,940
Nous créons notre GainNode,
définir notre fréquence,

815
00:42:09,940 --> 00:42:14,170
puis connectez l'oscillateur à la
GainNode, qui change alors essentiellement

816
00:42:14,170 --> 00:42:16,760
la quantité de signal est autorisé à traverser.

817
00:42:16,760 --> 00:42:20,467
Mais vraiment, il est un numérique
chose, il est donc plus just-- ouais.

818
00:42:20,467 --> 00:42:23,550
Cela ne veut pas ce qui se passe réellement,
mais qui est ce qui arrive dans la vie réelle

819
00:42:23,550 --> 00:42:24,393
avec un gain.

820
00:42:24,393 --> 00:42:27,258
>> AUDIENCE: --quantization
du paramètre de volume?

821
00:42:27,258 --> 00:42:28,174
HUGH ZABRISKIE: Désolé?

822
00:42:28,174 --> 00:42:30,360
Public: Est-ce une
paramètre de volume quantifié?

823
00:42:30,360 --> 00:42:31,840
HUGH ZABRISKIE: Ouais.

824
00:42:31,840 --> 00:42:34,620
Et cela est une chose que je suis vraiment
déficient dans ma connaissance,

825
00:42:34,620 --> 00:42:38,010
comment le gain fonctionne à un niveau numérique.

826
00:42:38,010 --> 00:42:40,140
Je sais avec réelle
signaux, il est fondamentalement

827
00:42:40,140 --> 00:42:45,120
contrôler combien vous êtes
amplifier le signal.

828
00:42:45,120 --> 00:42:47,017
Donc voilà.

829
00:42:47,017 --> 00:42:50,100
Je vous enverrai plus d'informations sur
que, parce que je serais curieux effectivement

830
00:42:50,100 --> 00:42:51,099
pour en savoir plus à ce sujet.

831
00:42:51,099 --> 00:42:54,090
Mais fondamentalement les paramètres
sont, l'un est le fold--

832
00:42:54,090 --> 00:42:59,690
l'signal-- plus fort et zéro est pas
Signal, ou vous ne serez pas entendre aucun son.

833
00:42:59,690 --> 00:43:03,150
Nous passerons le temps de démonstration pour cette raison
il est fondamentalement ce que je faisais avant.

834
00:43:03,150 --> 00:43:07,630
Et encore, le Context.Destination
est le noeud de destination audio.

835
00:43:07,630 --> 00:43:08,360
Impressionnant, OK.

836
00:43:08,360 --> 00:43:10,470
>> Donc, je vais faire un rapide deux démos.

837
00:43:10,470 --> 00:43:11,760
Comment faisons-nous à temps?

838
00:43:11,760 --> 00:43:12,640
>> ENCEINTE 1: Environ 10 minutes.

839
00:43:12,640 --> 00:43:13,130
>> HUGH ZABRISKIE: 10 minutes?

840
00:43:13,130 --> 00:43:13,630
Formidable!

841
00:43:13,630 --> 00:43:14,320
Impressionnant.

842
00:43:14,320 --> 00:43:19,010
>> Donc, le premier que je vais
ne, il a appelé ma chanson préférée.

843
00:43:19,010 --> 00:43:22,410
Donc, ceci est juste un
peu JavaScript HTML.

844
00:43:22,410 --> 00:43:25,510
Nous allons avoir deux boutons
sur la page de jouer ma chanson préférée

845
00:43:25,510 --> 00:43:29,192
et arrêter ma chanson préférée.

846
00:43:29,192 --> 00:43:30,180
Je vais changer cette situation.

847
00:43:30,180 --> 00:43:32,110
>> AUDIENCE: Couvrez votre microphone.

848
00:43:32,110 --> 00:43:33,430
>> HUGH ZABRISKIE: Ouais.

849
00:43:33,430 --> 00:43:36,300
Et je l'ai chargé ici
un script qui basically--

850
00:43:36,300 --> 00:43:38,520
et cela est vraiment utile
pour charger un fichier MP3,

851
00:43:38,520 --> 00:43:41,820
donc cela fait juste
chargement MP3 façon plus rapide.

852
00:43:41,820 --> 00:43:44,180
Il est fondamentalement juste un wrapper.

853
00:43:44,180 --> 00:43:48,737
Il est tout simplement le processus de
charger dans MP3s beaucoup plus rapide,

854
00:43:48,737 --> 00:43:51,570
sinon vous utilisez requête HTTP,
un peu comme ce que nous faisions

855
00:43:51,570 --> 00:43:53,950
sur la pièce courante définie par serveur.

856
00:43:53,950 --> 00:43:55,950
Il est vraiment moche, vous
ne veulent pas le faire.

857
00:43:55,950 --> 00:44:04,110
>> Donc ce gars, Boris PME, a écrit un très
utile petit outil appelé BufferLoader.

858
00:44:04,110 --> 00:44:08,780
Tout ce que vous faites est tout simplement le passer le
contexte, vous lui passez un films--

859
00:44:08,780 --> 00:44:11,327
ou, oui, est-il une liste en JavaScript?

860
00:44:11,327 --> 00:44:12,160
Sam Green: Un tableau.

861
00:44:12,160 --> 00:44:14,201
HUGH ZABRISKIE: Oh, il est
un tableau, qui est à droite.

862
00:44:14,201 --> 00:44:18,660
Il est un tableau de chemins
à différents fichiers.

863
00:44:18,660 --> 00:44:21,990
Et puis vous passez une fonction.

864
00:44:21,990 --> 00:44:25,530
Ceci est le rappel que nous parlions
environ avec un chargement asynchrone.

865
00:44:25,530 --> 00:44:28,720
Qui sera appelée
Une fois les fichiers chargés.

866
00:44:28,720 --> 00:44:33,780
Et cette fonction qui est appelée quand
le fichier est chargé prend comme un périmètre

867
00:44:33,780 --> 00:44:35,840
un tableau de tampons chargés.

868
00:44:35,840 --> 00:44:37,990
Alors que se produit ici.

869
00:44:37,990 --> 00:44:41,180
Fondamentalement, est BufferList
va être un value--

870
00:44:41,180 --> 00:44:46,380
ou ça va être un tableau de
longueur, qui a en elle de l'indice

871
00:44:46,380 --> 00:44:51,320
zéro l'ensemble du fichier chargé du MP3.

872
00:44:51,320 --> 00:44:53,320
Donc ce que je fais quand je finis
Chargement en cours est, je tout simplement

873
00:44:53,320 --> 00:44:57,430
créer une source de tampon, qui
est un noeud de source du tampon audio.

874
00:44:57,430 --> 00:45:03,410
La prochaine étape est que je charge dans le
source.buffer que le tampon chargé complète

875
00:45:03,410 --> 00:45:06,740
à partir de la BufferList--
il ya beaucoup de buffers--

876
00:45:06,740 --> 00:45:10,255
puis vous vous connectez que l'audio
un tampon pour la destination.

877
00:45:10,255 --> 00:45:12,380
Alors qu'est-ce qu'il va faire
est tout simplement mettre le MP3

878
00:45:12,380 --> 00:45:15,260
tout droit à la sortie,
et commencer immédiatement

879
00:45:15,260 --> 00:45:18,010
En obtenant cet appel.

880
00:45:18,010 --> 00:45:21,660
>> Cool, alors voyons
cela se produise dans l'action.

881
00:45:21,660 --> 00:45:24,490
Mon [inaudible] ici, nous allons voir.

882
00:45:24,490 --> 00:45:26,430
Donc je vais juste
démarrer un serveur de base.

883
00:45:26,430 --> 00:45:28,660
Voilà quelque chose qui
vous devez faire si vous êtes

884
00:45:28,660 --> 00:45:32,490
faire des demandes pour les fichiers de chargement.

885
00:45:32,490 --> 00:45:34,140
Je vais démarrer un serveur de base.

886
00:45:34,140 --> 00:45:38,200
Ceci est fondamentalement votre entière
PSET en ce moment dans une ligne,

887
00:45:38,200 --> 00:45:43,930
mais il ne fait que commencer
un serveur sur le port 80/80.

888
00:45:43,930 --> 00:45:47,300
Donc, nous allons ici, nous
va charger 80/80,

889
00:45:47,300 --> 00:45:49,110
nous allons aller à ma chanson préférée.

890
00:45:49,110 --> 00:45:51,660
Donc, si je frappe "Play my
chanson préférée "en ce moment,

891
00:45:51,660 --> 00:45:53,964
il va charger mon
chanson préférée et jouer it--

892
00:45:53,964 --> 00:45:55,880
[MUSIQUE - les Eagles, "LA VIE DANS LE FAST
 VOIE"]

893
00:45:55,880 --> 00:46:00,490
--which arrive à être "Life in
le Fast Lane »par les Eagles.

894
00:46:00,490 --> 00:46:06,346
Maintenant, je pourrais frapper "Arrêtez mon
chanson préférée "et rejouer.

895
00:46:06,346 --> 00:46:09,160
>> [MUSIQUE - les Eagles, "LA VIE DANS LE FAST
 VOIE"]

896
00:46:09,160 --> 00:46:18,340
>> Et si je vais plus à consoler, parce
Je ai utilisé une variable globale sur ici

897
00:46:18,340 --> 00:46:23,390
de garder une trace de cette valeur, il fait
seront dorénavant comptabilisés dans la console.

898
00:46:23,390 --> 00:46:25,160
Donc, il crée automatiquement pour moi.

899
00:46:25,160 --> 00:46:29,991
Voilà donc ce qui se joue en ce moment,
et je ne peux tout simplement appeler source.stop ()

900
00:46:29,991 --> 00:46:30,490
sur ça.

901
00:46:30,490 --> 00:46:34,930

902
00:46:34,930 --> 00:46:35,860
Eh bien, vous savez quoi?

903
00:46:35,860 --> 00:46:39,760
Juste pour que vous les gars ont entendu cette
song-- vous pourriez reconnaître cette chanson.

904
00:46:39,760 --> 00:46:41,801
>> [MUSIQUE - Rick Astley, "Never Gonna DONNER
 You Up "]

905
00:46:41,801 --> 00:46:42,299

906
00:46:42,299 --> 00:46:44,215
[MUSIQUE - les Eagles, "LA VIE DANS LE FAST
 VOIE"]

907
00:46:44,215 --> 00:46:46,195
Nous avons maintenant tous été Rickrolled.

908
00:46:46,195 --> 00:46:50,155
Bon, d'accord, de passer.

909
00:46:50,155 --> 00:46:51,160
Cool.

910
00:46:51,160 --> 00:46:54,554
Donc, cela est essentiellement un exemple de
juste comment vous pouvez charger un fichier MP3 file--

911
00:46:54,554 --> 00:46:56,470
[MUSIQUE - les Eagles, "LA VIE DANS LE FAST
 VOIE"]

912
00:46:56,470 --> 00:46:59,590
--et jouer, et arrêter et démarrer.

913
00:46:59,590 --> 00:47:03,008
Je aurais pu faire beaucoup plus de [inaudible]

914
00:47:03,008 --> 00:47:07,570
>> La dernière que je vais faire est,
Je vais vous montrer un [inaudible].

915
00:47:07,570 --> 00:47:18,070
>> [Jouer de la musique]

916
00:47:18,070 --> 00:47:21,800
>> Il est comme, ogg.wave.mp3.

917
00:47:21,800 --> 00:47:26,450
Je pense que, si je me souviens bien,
Je ai rencontré quelques problèmes avec .m4a,

918
00:47:26,450 --> 00:47:27,721
mais je ne suis pas sûr à ce sujet.

919
00:47:27,721 --> 00:47:28,470
Je pense mp3.wave--

920
00:47:28,470 --> 00:47:28,930

921
00:47:28,930 --> 00:47:30,971
>> [MUSIQUE - Rick Astley, "Never Gonna DONNER
 You Up "]

922
00:47:30,971 --> 00:47:35,930

923
00:47:35,930 --> 00:47:36,500
>> D'accord, super.

924
00:47:36,500 --> 00:47:37,625
Je ne l'aurais pas dit cela.

925
00:47:37,625 --> 00:47:40,570
Quoi qu'il en soit, bonjour.

926
00:47:40,570 --> 00:47:43,430

927
00:47:43,430 --> 00:47:45,490
Nous avons donc cette ouverture.

928
00:47:45,490 --> 00:47:52,320
Alors maintenant, tout ce que je fais est, je essentiellement créé
une syntaxe de base pour créer de la musique.

929
00:47:52,320 --> 00:47:57,610
Donc, si je fais quelque chose comme, ajouter g4
1 sur 2, ce que cela signifie est que,

930
00:47:57,610 --> 00:48:00,950
ajouter la note de piano, G4,
qui est la quatrième G

931
00:48:00,950 --> 00:48:02,680
sur le piano à partir du bas.

932
00:48:02,680 --> 00:48:05,930
Donc, ce genre de MIDI est la parole,
Donc, pour ceux qui sont axés sur la musique,

933
00:48:05,930 --> 00:48:07,860
cela est juste notes MIDI.

934
00:48:07,860 --> 00:48:10,090
>> AUDIENCE: Voilà le G
du Moyen-C, non?

935
00:48:10,090 --> 00:48:11,840
>> HUGH ZABRISKIE: Ceci est la G
ci-dessus Moyen-C, qui est juste.

936
00:48:11,840 --> 00:48:12,470
>> AUDIENCE: au dessus du milieu C.

937
00:48:12,470 --> 00:48:13,345
>> HUGH ZABRISKIE: Ouais.

938
00:48:13,345 --> 00:48:14,340
En fait, oui.

939
00:48:14,340 --> 00:48:16,131
Je pense que je réellement fait
l'un [inaudible],

940
00:48:16,131 --> 00:48:18,860
alors ce pourrait être une octave au-dessus.

941
00:48:18,860 --> 00:48:20,070
Voyons donc.

942
00:48:20,070 --> 00:48:21,152
Si je frappe Play--

943
00:48:21,152 --> 00:48:22,110
[PIANO NOTE RÉPÉTITIVE]

944
00:48:22,110 --> 00:48:23,200
--we're allez entendre cela.

945
00:48:23,200 --> 00:48:25,700
L'idée est qu'il fonctionne
tout comme une ligne de commande serait,

946
00:48:25,700 --> 00:48:27,510
donc si je vais monter et descendre
sur mon clavier, vous

947
00:48:27,510 --> 00:48:31,550
peut revenir à précédente
commandes, ce qui est très utile.

948
00:48:31,550 --> 00:48:35,136
Et ci-dessous est ma liste de pistes,
qui sont tous en cours d'exécution sur la boucle.

949
00:48:35,136 --> 00:48:38,260
>> AUDIENCE: Vous étiez en supposant que le
88-clavier sur ça, non?

950
00:48:38,260 --> 00:48:41,051
>> HUGH ZABRISKIE: La question était,
suis-je suppose un clavier de 88 touches,

951
00:48:41,051 --> 00:48:41,990
et oui, je suis.

952
00:48:41,990 --> 00:48:45,030
Qu'est-ce que je l'ai fait est que je
88 échantillons pris au fond

953
00:48:45,030 --> 00:48:46,970
du piano, une pour chaque note.

954
00:48:46,970 --> 00:48:49,180
Et chaque fois que vous
entendre une note à partir de maintenant,

955
00:48:49,180 --> 00:48:57,550
qui est en fait une boucle qui ressemble
like-- cela se joue sur la boucle,

956
00:48:57,550 --> 00:49:00,120
Donc, pour chaque note, cela est en cours d'exécution.

957
00:49:00,120 --> 00:49:02,860
Ce qui se passe est, je
créer à nouveau un tampon,

958
00:49:02,860 --> 00:49:06,010
Je crée un nœud de gain pour régler le volume.

959
00:49:06,010 --> 00:49:08,240
Cette juste un vraiment
façon compliquée de dire que je

960
00:49:08,240 --> 00:49:10,550
stocker le tampon dans un source.buffer.

961
00:49:10,550 --> 00:49:13,160
Je lui donne le gain, je
le connecter au gain,

962
00:49:13,160 --> 00:49:15,576
le gain est reliée à la
sortie, puis je le joue.

963
00:49:15,576 --> 00:49:20,735
Alors qui est genre de processus
de la prise dans une source de tampon.

964
00:49:20,735 --> 00:49:24,820
>> AUDIENCE: Pouvez-vous réellement prendre cette
bruit sec et le rendre humide [inaudible]?

965
00:49:24,820 --> 00:49:26,260
>> HUGH ZABRISKIE: Vous pouvez, oui.

966
00:49:26,260 --> 00:49:29,260
Il est re-verbe, il ya
délai, distorsion.

967
00:49:29,260 --> 00:49:33,260
Vous pouvez pratiquement rien mettre dans
entre dans ce sandwich de-- bien,

968
00:49:33,260 --> 00:49:37,660
pipeline est une meilleure métaphore,
mais vous pouvez ajouter quelque chose à cela.

969
00:49:37,660 --> 00:49:38,200
Cool.

970
00:49:38,200 --> 00:49:40,280
>> Donc, je vais finir la démo
ici pour vous donner une idée

971
00:49:40,280 --> 00:49:46,390
de tout le grand nombre de fois que vous
peut exécuter cette fonction tout à la fois.

972
00:49:46,390 --> 00:49:49,280
Donc, je vais supprimer ce.

973
00:49:49,280 --> 00:49:59,110
Je vais créer un générateur that--
essentiellement ce que cela est vraiment does--

974
00:49:59,110 --> 00:50:04,220
une sorte de syntax-- compliqué, mais il est
va générer des notes à la volée,

975
00:50:04,220 --> 00:50:06,601
et juste commencer à jouer
comme il les évalue.

976
00:50:06,601 --> 00:50:07,392
[PIANO interposition]

977
00:50:07,392 --> 00:50:10,990

978
00:50:10,990 --> 00:50:12,817
>> Ainsi, nous pouvons juste faire un peu de musique ici.

979
00:50:12,817 --> 00:50:13,608
[PIANO interposition]

980
00:50:13,608 --> 00:50:39,570

981
00:50:39,570 --> 00:50:41,470
>> Alors, que cette commande
le fait, par exemple, est

982
00:50:41,470 --> 00:50:46,910
il prend ces trois notes pour le
piano et les met ensuite B3.

983
00:50:46,910 --> 00:50:48,660
Cette syntaxe pourrait faire
un peu plus de sens

984
00:50:48,660 --> 00:50:50,590
à ceux qui ont un
musique de fond ici.

985
00:50:50,590 --> 00:50:55,180

986
00:50:55,180 --> 00:50:56,551
>> Je peux ajouter une grosse caisse.

987
00:50:56,551 --> 00:50:57,050
Je peux--

988
00:50:57,050 --> 00:50:58,048
>> [Interposition INSTRUMENTS]

989
00:50:58,048 --> 00:50:59,256
>> --just jouer avec cela.

990
00:50:59,256 --> 00:51:12,519

991
00:51:12,519 --> 00:51:13,474
>> Ainsi, vous pouvez make--

992
00:51:13,474 --> 00:51:14,515
[Interposition INSTRUMENTS]

993
00:51:14,515 --> 00:51:15,513
Celui-là est un peu plus ennuyeux.

994
00:51:15,513 --> 00:51:16,554
[Interposition INSTRUMENTS]

995
00:51:16,554 --> 00:51:26,491

996
00:51:26,491 --> 00:51:30,981
>> Donc, cela ajoute au hasard une cymbale sec
sur chaque note 16, avec un 16%

997
00:51:30,981 --> 00:51:31,481
[INAUDIBLE].

998
00:51:31,481 --> 00:51:32,522
>> [Interposition INSTRUMENTS]

999
00:51:32,522 --> 00:51:40,962

1000
00:51:40,962 --> 00:51:50,400
>> Ouais, donc la façon dont cette
works-- il est toujours en 4: 4.

1001
00:51:50,400 --> 00:51:51,441
[Interposition INSTRUMENTS]

1002
00:51:51,441 --> 00:52:06,910

1003
00:52:06,910 --> 00:52:10,902
>> Ouais, donc les quatre trimestres, et 16/8.

1004
00:52:10,902 --> 00:52:14,851

1005
00:52:14,851 --> 00:52:15,892
[Interposition INSTRUMENTS]

1006
00:52:15,892 --> 00:52:27,970

1007
00:52:27,970 --> 00:52:33,780
>> Donc, en moyenne, vous obtenez 60%
de hits sur les notes 16e.

1008
00:52:33,780 --> 00:52:35,990
>> Quoi qu'il en soit, ce fut tout simplement
sorte de montrer

1009
00:52:35,990 --> 00:52:39,780
quelques-unes des choses que vous pourriez
construire avec le Web Audio API.

1010
00:52:39,780 --> 00:52:43,840
Il est très puissant, il est très rapide,
et vous pouvez faire beaucoup de choses cool

1011
00:52:43,840 --> 00:52:44,340
Avec ça.

1012
00:52:44,340 --> 00:52:51,260
Encore une fois, toutes les questions que vous avez,
email myself-- Hugh-- ou Sam,

1013
00:52:51,260 --> 00:52:55,869
et honnêtement, Google a
une tonne de bonnes ressources.

1014
00:52:55,869 --> 00:52:56,660
Tous les dernières questions?

1015
00:52:56,660 --> 00:52:57,970
Oui.

1016
00:52:57,970 --> 00:53:00,790
>> Auditoire: Alors, vous pouvez accéder
le microphone intégré.

1017
00:53:00,790 --> 00:53:03,089
Que faire si vous vouliez
utiliser un meilleur microphone?

1018
00:53:03,089 --> 00:53:05,380
HUGH ZABRISKIE: Si vous vouliez
à utiliser une meilleure micro?

1019
00:53:05,380 --> 00:53:11,320
Encore une fois, cela fait partie de la
abstraction entre Chrome

1020
00:53:11,320 --> 00:53:12,950
et le reste de votre ordinateur.

1021
00:53:12,950 --> 00:53:18,950
Sauf si elle est disponible par le biais
une API, comme API Web MIDI,

1022
00:53:18,950 --> 00:53:22,030
vous pourriez probablement trouver quelques hacks,
mais généralement pas que possible.

1023
00:53:22,030 --> 00:53:25,300
>> Sam Green: Vous pouvez also--
tout le Chrome sait

1024
00:53:25,300 --> 00:53:28,820
est ce que votre microphone par défaut
est, et qu'il accède à ce.

1025
00:53:28,820 --> 00:53:33,410
Donc, si vous aviez un microphone vous pouviez
défini comme le microphone par défaut de l'ordinateur,

1026
00:53:33,410 --> 00:53:35,990
vous pouvez accéder de cette façon
et il serait probablement travailler.

1027
00:53:35,990 --> 00:53:37,490
HUGH ZABRISKIE: Voilà un bon point.

1028
00:53:37,490 --> 00:53:39,656
Je ne l'ai jamais essayé, mais
vous pourriez être en mesure de type

1029
00:53:39,656 --> 00:53:45,700
de-- si vous redirigez le haut-parleur d'entrée,
vous pourriez être en mesure de le faire, oui.

1030
00:53:45,700 --> 00:53:48,360
>> Tous les dernières questions?

1031
00:53:48,360 --> 00:53:49,340
Cool.

1032
00:53:49,340 --> 00:53:51,680
Eh bien merci les gars
tant pour regarder.

1033
00:53:51,680 --> 00:53:52,199
Je suis Hugh.

1034
00:53:52,199 --> 00:53:52,990
Sam Green: Je suis Sam.

1035
00:53:52,990 --> 00:53:55,410
HUGH ZABRISKIE: Et cela est CS50.

1036
00:53:55,410 --> 00:53:56,767