>> Sam Green: Salut, tout le monde.
Bienvenue à notre séminaire.
Mon nom est Sam.
HUGH ZABRISKIE: Je suis Hugh.
Sam Green: Et nous allons parler aujourd'hui à propos de JavaScript et l'API Web Audio.
Juste pour commencer, ceci est un aperçu de notre ordre du jour pour le séminaire.
Nous allons commencer par parler pourquoi vous devriez être intéressé par le Web
API Audio, pourquoi est-JavaScript la langue dont vous avez besoin pour elle,
puis parler JavaScript essentials-- si semblable,
vous guider à travers quelques-uns rudiments de la langue,
et ensuite parler de la API audio à un niveau élevé.
Ensuite, Hugh parler de certains des étapes de la production audio
puis démonstration Cet impressionnant séquenceur projet qu'il construit et vous montrer le code.
Et puis, nous aurons le temps pour questions à la fin pour les personnes
qui sont ici vivre.
>> HUGH ZABRISKIE: Cool.
>> Sam Green: Cool.
>> HUGH ZABRISKIE: Cool.
Je vais sauvegarder.
>> Sam Green: Donc, commençons par le commencement.
Donc l'une des grandes choses sur le Web Audio API
est qu'il n'y a pas de mise en place nécessaire.
Il vient intégré à la plupart des navigateurs modernes,
y compris Chrome, Edge, ensemble tas de others-- tous ceux
que de grandes portions de les gens utilisent aujourd'hui.
Donc, il n'y a pas mis en place, Mis à part juste de
un serveur web va, pour vous de commencer à travailler
sur votre projet, ce qui est excellent.
>> Nous recommandons plutôt fortement que vous considérez
d'utiliser Chrome pour Développement web JavaScript,
juste parce que son développeur les outils sont vraiment forts.
Comme un exemple de tout ce que nous entendons en disant ouvrir votre JavaScript
console-- si vous allez dans Chrome et vous regardez une page Web,
et vous faites un clic gauche Inspecter l'élément, puis
vous allez à cette petite liste déroulante ici et vous cliquez sur Console,
vous verrez ce que ouvre ressemble un beaucoup comme une invite de commande que vous
pourraient voir sur votre Mac, ou sur l'ID.
Et juste comme ça, nous pouvons Type commandes ici, comme Effacer,
et d'autres commandes comme ça.
Nous pouvons créer des variables, comme nous verrons plus tard en JavaScript.
Et donc tout ce que nous pouvons faire dans JavaScript, nous pouvons le faire avec la console,
et que est une façon super pratique pour commencer à jouer avec les API
et de se familiariser avec JavaScript dès le départ.
Pas de mise en place nécessaire, qui est vraiment agréable.
Cool.
Impressionnant.
>> Donc, une chose de plus à ajouter.
Si vous avez des questions-- il ya beaucoup d'entre vous qui ne sont pas ici en direct,
hésitez pas à envoyer ces us-- sont nos adresses e-mail.
Si vous avez des questions vous ne voulez pas à nous demander,
comme, oh je dois un bug dans mon code, ou quelque chose
qui est un peu plus précis, peut-être le Google en premier.
Il ya beaucoup de grandes ressources à propos de l'API Web Audio là-bas.
Il est vraiment bien documenté et il est d'être
utilisée par une tonne de personnes l'industrie et les gens qui sont juste
construire des choses amusantes pour eux-mêmes.
Donc, il devrait y avoir beaucoup des ressources là-bas.
Impressionnant.
>> Cool, alors pourquoi le Web Audio API?
Ce schéma est un peu d'une évolution de la façon dont
son sur le Web a augmenté au fil du temps.
Bgsound était comme la balise HTML d'origine Internet Explorer utilisée pour soutenir.
Il ne permettait sons assez basique, la fonctionnalité n'a pas été très robuste,
et vous ne pouviez pas faire séquençage compliqué,
ou contrôler lorsque le son a commencé et arrêté très robuste.
Ainsi, il n'a pas été particulièrement bien développé.
Puis après cela, Flash venu along-- qui,
Je suis sûr que vous les gars sont tous familiers avec Flash-- peut-être pas comment cela fonctionne,
mais vous avez certainement vu.
Vous devez mettre à jour votre version de Flash Plug-in, tout ce genre de choses,
et que certainement étendu la gamme de fonctionnalité qui était disponible.
Mais faire l'utilisateur d'installer un plug-in est certainement
un inconvénient à compris Flash dans votre application, non?
Parce qu'alors, vous êtes dépendant de la l'utilisateur d'aller et de trouver ce plug-in,
et probablement être tourné off par cette étape supplémentaire
ils ont à prendre pour utiliser votre application.
Et puis il pourrait y avoir une mise à jour ça va casser votre application entière,
et il finit par être un cauchemar pour le développeur, aussi.
Ce qui fut une barricade.
>> Et puis après qui est venu, la balise HTML audio, qui
est une caractéristique de plus moderne qui HTML-- certes permis pour beaucoup plus de choses,
mais même les choses que vous pourriez faire il y avait un peu limité seulement
à la suite des choses que le HTML était capable.
Ainsi, lorsque le JavaScript API, l'API Web audio,
est devenu une norme pratiquer à travers les navigateurs,
qui a vraiment élargi le jeu des opportunités pour les développeurs
à vraiment entrer dans la construction trucs cool pour le web.
Pendant longtemps, il y avait des outils vraiment robustes été
pour les applications audio natives, like-- tout le monde sait GarageBand,
puis il ya évidemment plus applications de mixage audio professionnels,
et ce genre de choses.
Mais il n'y avait pas un vraiment bon Cloud-- pas
Nuage, oui, je suppose Plate-forme web Cloud--
qui permettrait aux développeurs de construire des applications pour les personnes
pour faire le mixage audio.
Et comme il va vous montrer plus tard, le Web Audio API
permet de vraiment puissant choses à arriver vraiment tout simplement,
ce qui est plutôt cool.
Voilà donc l'instruction à laquelle vous devraient regarder le reste du séminaire,
fondamentalement.
>> Et maintenant, je vais parler certains éléments JavaScript-- juste de base
de la langue, de sorte que nous pouvons être sur la même page
lorsque nous parlons de la API un peu plus tard.
Cool.
>> Donc, ceci est un résumé.
Je oublié ce fut ici.
Oui.
>> HUGH ZABRISKIE: Il ya deux diapositives ici.
>> Sam Green: Ceci est le résumé de quelques-unes des limitations
de l'autre, les vieilles méthodes de reliure.
Et puis maintenant, nous avons ces choses.
Cool.
Impressionnant.
>> Donc, l'essentiel JavaScript.
Tout d'abord, il ya une différence assez importante
en JavaScript dans un rapport langage comme C, de la manière
que les variables sont créées.
Donc, dans C, nous sommes habitués à avoir de taper nos variables, non?
Et je ne veux pas dire, comme le type saisissez-les, je veux dire le type
comme leur attribuer un sens de bien-- comme, un int, un flotteur, un caractère.
En C, nous étions vraiment habitués à avoir à créer une variable
et puis coller à ce type pour le tout le temps que nous utilisons cette variable.
Et ce ne sont pas nécessairement pire, mais il est probablement plus difficile à utiliser.
L'une des caractéristiques cool JavaScript est
que les variables sont ce qu'on appelle "typage dynamique", qui
signifie que je peux créer un variable que la syntaxe,
varX est égal à 5, par exemple.
Cela crée l'origine un nombre entier variable--
juste en dessous de la hotte somewhere-- mais je
peut changer cette variable de se référer à une chaîne
sans rien faire comme la création d'une nouvelle variable.
Je ne veux pas à vous soucier sur le changement de type.
JavaScript sait que le type de changé, et cela se produit dynamiquement.
>> Donc, il ya des avantages et des inconvénients à ce que,
comme toute personne qui a travaillé dans JavaScript pendant un certain temps afin de connaître.
Il ya des moments où vous pourriez accidentellement
changer le type d'une variable et pas gérer ce changement de type,
puis votre JavaScript peut crash-- ou d'une exception
être jeté, parce que vous aurez la Type tort quand vous vous attendez à un type.
Cool.
>> Donc, scoping-- qui est comme, si nous rappeler les premières semaines dans le cours,
fait référence à une variable façon visible est et dans quel domaine du code.
Tout cela ressemble beaucoup à la façon dont elle regarde en C.
Donc variables sont généralement scope entre accolades dans une fonction,
et puis il ya aussi les variables à l'échelle mondiale que le scope
soient: si vous écrivez une variable en dehors d'une fonction,
il sera visible dans l'ensemble du texte.
>> Une différence entre JavaScript et C en particulier,
est que si vous déclarez un mondiale partout variable dans un fichier texte
il est visible dans toute fonction dans ce fichier texte.
Cela est exact, à droite?
>> HUGH ZABRISKIE: Yep.
>> Sam Green: Donc, qui est aussi un peu peu original par rapport à C,
où nous avons toujours eu d'avoir notre les définitions de variables au-dessus des lieux
ils ont été utilisés.
Cela ne veut pas d'une règle qui est appliquée plus, donc, un peu différent.
Et encore une fois juste pour souligner de nouveau, mondiale contre variables-- locale
très similaire à C. Vous pourriez avoir deux variables avec le même nom,
et ont un de leurs noms être assombris par une variable locale si l'un d'eux
était mondiale.
Genre Donc, similaire problèmes que certains d'entre vous
peut se sont heurtées à une certaine de votre problème définit jusqu'ici.
Cool, de sorte que les variables est.
>> Flux de contrôle, ce qui signifie que, si-else-- stuff-- et boucles logique.
Donc, pour commencer, voici ce que if-else déclarations ressemblent en JavaScript.
Le placement des diverses choses sur les lignes est sans importance.
Ceci est juste l'une des conventions le code de structure de façon que nous.
Tout comme en C, nous avons une "si," une déclaration de parenthèse.
Cela ne veut pas ce que je voulais faire.
Je l'ai encore fait.
>> HUGH ZABRISKIE: Essayer de sortir?
Sam Green: Non, je suis juste essayer de zoomer.
Il n'a pas d'importance.
>> Donc, nous avons un "if" et nous avons un état intérieur de celui-ci
qui évalue à vrai ou faux, et qui détermine si oui ou non
nous entrons dans ce bloc de code.
Et de même, nous avons un autre, si, et un autre, tout comme nous sommes habitués à en C.
>> Vous devez également être assez à l'aise dès le départ avec des boucles,
parce qu'ils regardent aussi un peu comme C ressemble.
Mais vous remarquerez que nous avons à nouveau avoir, au lieu de int initialisations,
nous avons initialisations var.
Et je suppose que vous avez faire attention à faire
que vous ne changez pas la valeur de I par l'un int à une chaîne,
par exemple, parce que ce qui se passe à provoquer un comportement bizarre vous ne pourriez pas
attendre.
Mais cela devrait ressembler assez familier, aussi bien.
>> Donc, ceci est où les choses commencent à obtenir un peu fou en JavaScript
pour quelqu'un qui va partir d'un fond de C. Il existe des fonctions
en JavaScript, et il ya une façon de déclarer une fonction qui ressemble
sorte de semblable à C, et puis il ya un autre qui
regarde un peu différent.
>> La première version, que nous pouvons voir ici,
est une sorte de C-like, où nous disons, ceci est une fonction,
lui donner un nom, donner le nombre d'arguments,
et ensuite le contenu de la fonction aller à l'intérieur de ces accolades.
Nous verrons un exemple de arguments en seulement une seconde.
>> Considérant que, sur la ligne suivante, nous voyons, oh, voici une variable appelée "myFunction"
et nous égaler à cette function-- chose-- générique
ne semble pas avoir quelque chose se passe.
La raison qui est différent que C est que JavaScript
est ce qu'on appelle un langage fonctionnel, ou présente des éléments fonctionnels, ce qui signifie
ce sont en fait les valeurs des fonctions.
Et cela signifie que nous pouvons mettre en une variable égale à une fonction
et de passer ensuite cette fonction autour, passer comme un argument,
faire toutes sortes de choses comme ça avec fonctions.
>> Une autre chose à note-- fonctions sont écrites
avec un certain nombre d'arguments.
Nous verrons un exemple d'une fonction avec un argument sur la diapositive suivante.
Mais JavaScript ne sera pas crier à vous si vous essayez
à utiliser une fonction avec la nombre incorrect d'arguments.
Il va juste faire de son mieux pour faire faire, ce qui signifie que si vous passez,
vous appelez une fonction qui attend un dispute avec aucun argument, tout ce qui
qui va se passer est qu'il va faire de son mieux d'essayer et d'exécuter ce code,
et si elle finit par manquer en une exception ou une erreur,
il va jeter cette exception et juste garder going-- qui est juste l'un des moyens
que JavaScript fonctionne.
Oui.
>> AUDIENCE: Qu'advient-il si il ya trop d'arguments?
Sam Green: Donc, le question était, ce qui se passe
si il ya trop d'arguments?
Et la réponse est que JavaScript sera juste
ignorer ceux qui sont après celles qu'il prévoit.
Il va essayer d'exécuter la fonction appeler comme si elle était juste les deux premiers.
Droit?
>> HUGH ZABRISKIE: Tout à fait, oui.
De même, si sont trop peu d'arguments,
il juste sorte de nulle donne à tous les arguments, il n'a pas de valeurs
pour.
>> Sam Green: Qui peut effectivement être utile, si vous
envie d'écrire une fonction qui prend une variable arguments numériques.
Vous pouvez définir des valeurs par défaut dans la définition de la fonction,
et il peut ignorer le fait que l'entrée est pas là.
Je veux donc parler un peu plus sur ce dernier point
point, qui est fonctions sont des valeurs.
Ceci est un exemple qui est un peu hallucinant
si vous venez de lire, et ne pensez pas à propos de ce qui se passe pendant une seconde.
Alors, regardons juste au la première ligne ici.
Nous avons cette variable, f1, que nous disons est une fonction qui fait cette chose.
Et le contenu de la fonction sont CONSOLE.LOG («bonjour»).
Vous pouvez penser que le console.log JavaScript équivalent de printf.
Alors qu'est-ce qui va se passer est, si nous exécuter ce code dans notre navigateur,
il va imprimer une chaîne.
Je peux le démontrer.
PUBLIC: En journal, cependant, est-ce que dire qu'il est enregistré quelque part?
Sam Green: Oui.
Donc, je vais vous montrer ce qui va se passer.
Donc la question est, ce qui ne log moyen?
>> HUGH ZABRISKIE: Donc console.log est comme printf pour C.
Sam Green: Donc console.log est comme printf,
donc si je dois cette console.log ('bonjour'), et je demande que la chaîne "bonjour"
est imprimé sur la console.
Ceci est la console.
Il est juste comme printf, où il imprime à sortir standard.
Et nous le verrons dans une minute, mais cela est en réalité
faisant référence à l'objet de la console, et appeler une méthode sur cet objet.
Cela fera plus de sens en une minute lorsque nous
apprendre à parler objets en JavaScript,
mais je pensais que je voudrais juste mentionner que.
HUGH ZABRISKIE: Nous sommes utilisé dans C, droite-
nous écrivons habituellement un grand programme dans le principal de faire quelque chose.
Mais ce qui est cool en JavaScript est vous avoir cette sorte d'interprète que
fonctionne en temps réel, de sorte qu'il prend juste ligne par ligne,
il peut tout interpréter sur place.
Et il garde la trace des les choses qui ont été exécutées avant,
il est donc un outil très utile pour console.log utiliser, ou de la console,
généralement, pour tout simplement jouer autour avec JavaScript.
>> Sam Green: Pour en revenir à cette example-- la deuxième ligne de code
ici est assez ahurissant dans ma tête.
La première fois que je lis cela, comme il a été, ce qui se passe?
Donc ce qui se passe est, cette déclaration de fonction dit,
Je dois une fonction appelée f2 que cela attendre un argument, f,
puis il appelle cette fonction, f, qui
a été adoptée à elle comme un argument sans se arguments.
Alors, qui aurait pu être déroutant.
Si nous comprenons cela comme f2 prend f1 comme argument, puis à l'intérieur de f2,
f obtient called-- quels moyens que cette ligne de code,
après ces deux lignes de code, résultats dans «bonjour»
en cours d'impression à la console.
>> Le fait que nous pouvons passer autour de fonctions en tant que valeurs
finit par être l'un des plus de puissantes fonctionnalités de JavaScript
en tant que langage de programmation.
En dehors de l'ensemble de la choses impressionnantes qu'il peut faire,
seulement comme une caractéristique de la langue en termes de la façon dont
qu'il rend les choses faciles et permet de programmer
pour des choses qui ne sont pas particulièrement bien adapté au web,
programmation fonctionnelle et fonctionnelle aspects de la programmation de JavaScript
est l'un des plus concepts puissants qui
existe dans JavaScript-- si vous me demandez.
Cool.
>> Donc, la prochaine chose.
En plus d'être fonctionnel, il ya aussi des éléments de JavaScript
qui sont orientée objet, qui est l'un des très
mots à la mode populaires en informatique.
Programmation orientée objet est une chose vraiment populaire.
JavaScript dispose d'une version de cela, où je crois que chaque valeur est également
un objet, ce qui signifie que tous les objets enveloppements réuni certains nombre de valeurs.
Donc, pour les valeurs qui sont simples, comme un entier, comme varX est égal à 5,
cet objet enveloppe juste que seule valeur.
>> Mais on peut aussi imaginer une situation where-- nous pouvons penser à des situations dans C
où nous voulions faire quelque chose avec structs,
par exemple, qui encapsule plusieurs valeurs ensemble et crée
il est très facile de passer des choses autour.
Voilà quand un objet est en JavaScript.
>> Il est important de se rappeler quand je dis que les objets enveloppés
un certain nombre de valeurs ensemble, que les fonctions sont aussi
valeurs, ce qui signifie que les fonctions peuvent être aussi à l'intérieur d'un objet JavaScript.
Et la raison qui est important est que, alors que nous avons souvent
penser à appeler une méthode sur un objet qui est
d'un terme populaire des autres langages orientés objet populaires,
l'une des différences est que ici tout ce qui est dans une méthode JavaScript
est une valeur stockée à l'intérieur d'un objet qui effectue une action-- éventuellement
en utilisant les autres valeurs qui sont à l'intérieur de cet objet, mais pas nécessairement.
Alors vous pouvez imaginer une situation, je deviner dans un peu d'une manière folle,
où vous avez appelé une méthode d'un objet sur un autre objet, par exemple.
Ainsi, il est un peu funky en cette façon.
>> Et vous pouvez aussi changer les méthodes qui sont associés à un objet
en attribuant un procédé qui nouvelle fonction, qui est également
assez différent des autres langages orientés objet, où
une fois que nous déclarons un objet et l'instancier,
nous ne pouvons pas changer les méthodes qui sont associé à cet objet plus.
Voilà donc assez différente.
Cool.
>> Alors, voici un exemple, d'abord, d'un objet dans l'action.
Ceci est ce qu'on appelle un objet générique, qui
signifie qu'il n'a pas de nom particulier, ne possède pas une classe,
il est juste un emballage de valeurs.
Et de la manière qui est, nous avons cette paire extérieure de Accolades ici
qui indiquent à JavaScript et dire, cela est un objet.
Les valeurs intérieur de celui- sont chacune des valeurs à l'intérieur
de l'objet qui devrait être enveloppé ensemble.
Et à l'intérieur de cet objet, nous avons ensuite paires clé-valeur,
où la clé désigne le nom de la valeur à l'intérieur de l'objet,
et l'autre side-- en face de la ici-- du côlon
est la valeur réelle qui doivent être stockés.
>> Donc, vous voyez ici que nous avons une clé appelée fn avec la valeur sam,
suivi d'une virgule, dire sur l'entrée suivante.
Ensuite, une clé appelée LN, avec une valeur de vert,
suivi d'une virgule, suivi par "impression"
qui va avoir une valeur de fonction que va faire cette ligne de code.
Prenons un peu de recul et déballer ce qui se passe ici.
Donc, cela est un peu compliqué, et nous voyons quelque chose de nouveau
pour la première fois.
Le "ce" mot-clé est la chose nouvelle nous voyons ici, et ce que cela fait
est, se réfère au courant opposer portée, non?
Donc, quand nous disons, ce Points Tout le chemin du retour
à l'ensemble de cette object-- quand nous faisons this.fn,
nous allons aller tout le chemin du retour à cet objet, aller à la valeur de fn
et obtenir sam, tirer tout le chemin dos, coller ici, et de passer ensuite.
>> AUDIENCE: Donc, avec la récupération, est que fait raison de le paramètre
définition?
Sam Green: Donc la question est, est la la récupération fait raison de le paramètre
définition?
Oui, absolument.
Qu'est-ce qui va se passer ici est, ce point dit à la JavaScript,
OK, je me fais une certaine valeur de cet objet de moi-même.
Et puis il va chercher une entrée appelé fn, et si il le trouve,
il reviendra que value-- oui, il est sam.
Mais je pourrais aussi ai tapé quelque chose qui n'a pas été définie ici,
puis il serait tout simplement retourner undefined-- qui
est une chose qui peut JavaScript faire, ce qui peut avoir des avantages,
mais il est also-- si vous faites une faute de frappe, il peut en résulter des erreurs étranges.
Donc, il va juste essayer de trouver tout ce que vous lui demandez de trouver
et il ne va pas se plaindre si ne le trouve pas.
Il va juste dire, je ne l'ai pas trouver, et de passer ensuite.
Donc, il serait undefined, plus le blanc, plus le nom.
Oui.
Et puis, nous pouvons voir que si nous pourrait alors descendre et access--
et nous appelons tf.print () avec des parenthèses.
Il va appeler que l'imprimé fonction sans aucun argument, non?
Mais si nous venons de dire tf.print () virgule, sans les parenthèses,
tout ce qui aurait fait est de tirer la fonction de la valeur,
mais pas réellement appelé.
Cool.
HUGH ZABRISKIE: Si nous faisons un objet?
Sam Green: Bien sûr, nous allons le faire.
Donc, je peux déplacer cette par exemple à la console.
Nous pouvons imaginer que je dois un objet.
Alors ceci est un simple objet.
Ceci est un objet qui contient deux valeurs avec deux touches, deux valeur de clé
paires.
Donc, je peux alors accéder à la valeur stockée à l'intérieur de cet objet en faisant x.x1,
par exemple, et je reçois 1 arrière.
De même, x.x2, obtenir que la valeur de retour.
>> Et maintenant, la chose est vraiment cool, je peux effectivement ajouter quelque chose à cet objet
après que je l'ai créé.
Alors vous pouvez imaginer, de laisser Je dois dire une fonction.
>> HUGH ZABRISKIE: Vous avoir à faire Maj-Entrée.
>> Sam Green: Oh, qui est ennuyeux.
Qu'a-t-il pas aimé?
Oh.
Et c'est parti.
Cool.
>> Donc, je viens de créer cette fonction, f, que
va aller au courant objet et imprimer this.x1.
Donc, si je viens de l'appeler par f elle-même, rien ne va
de se produire, à droite, car il n'y a pas x1 champ de l'objet, il fait référence à.
Mais, si je dis, x.f = f, et puis je appeler x.f (), je vais revenir 1.
Cette fonction de f est maintenant associé à l'objet x,
qui a une clé appelée x1 associée à la valeur 1,
Alors, quand nous appelons this.x1, il est va trouver ce qu'il cherche
et être en mesure d'imprimer sur une valeur.
Voilà donc un exemple du genre des choses folles
vous pouvez faire avec des objets en JavaScript.
>> Alors que la version était version générique, sens
que nous avons créé un objet en utilisant cette parenthèses notation accolade notation--,
rather-- et voilà pratique si nous voulons juste
une instance d'un objet particulier, mais si nous voulons avoir plus d'un
du même genre?
Et la réponse à cette question est, il ya des choses
appelé classes ainsi JavaScript.
Nous pouvons créer une fonction qui fait une sorte de initialisation
pour un objet étranger, et nous dirions, comme,
mon class-- sorte que le nom du object-- réutilisable
est égal à la fonction qui définit le haut.
Alors qu'est-ce que ce serait l'équivalent à crée un objet qui
serait comme juste, accolade, str, du côlon,
ceci est une chaîne, virgule, accolade.
Ce serait le générique objet on initialise,
avec la seule différence étant le prochaines lignes, nous créons un prototype, qui
signifie qu'il est une clé par défaut nous ajoutons à notre objet qui
a la valeur indiquée ici.
Ce qui signifie que, lorsque je crée un nouveau instance de cet objet MyClass,
il va avoir pré-construit à l'intérieur du une valeur appelée str et une autre valeur
myPrint appelé, qui est va être une fonction.
Impressionnant.
>> Formidable.
Donc la dernière chose à dire sur JavaScript
est qu'il est vraiment utile pour ce sont appelés opérations asynchrones.
Des moyens asynchrone est que nous peut attendre pour une opération
pour terminer avant de passer , mais passer alors que nous attendons
puis quelque chose se passe plus tard.
Et ce que je veux dire par là, vous peut imaginer une situation où
vous envoyez une demande à un serveur Web, quelque part,
et il va vous renvoyer certains gros morceau de données, non?
Et votre utilisateur pourrait attendre dans la Entre-temps pour que cela se produise,
et rien ne pouvait être passait à ce moment-là.
Mais cela ne un grand dessein, non?
Vous ne voulez pas la page Web de geler.
Que faire si l'utilisateur veut cliquer sur un menu déroulant?
Il est pas un grand motif de conception.
Au lieu de cela, fondamentalement ce que JavaScript ne se dit,
OK, effectuer cette opération de façon asynchrone.
Donc, comme, attendre dans le fond, et puis quand l'opération est effectuée,
appeler le rappel function-- appeler une fonction,
Faites quelques action-- signaler que le opération que nous attendions pour mettre fin à
est fini.
Et la raison qui est super puissant est, nous pouvons faire quelque chose, passer un argument,
faire quelque chose, et puis attendre pour que quelque chose arrive.
Puis, une fois que quelque chose Complètes, nous pouvons appeler une fonction de rappel.
Cela est vraiment utile, car elle permet de nous faisons les choses avec Web Audio API,
par exemple, comme la charge d'un fichier audio à partir d'un serveur distant
sans avoir à attendre pour la tout le fichier audio à charger,
ce qui serait vraiment mauvais pour l'expérience utilisateur.
Cool.
>> Dernière quelques notes sur débogage, puisque ce
est une chose que vous allez avoir à faire dans le cadre de votre projet, garanti.
Je l'ai mentionné la console JavaScript.
Il est une fonctionnalité super utile de tous les navigateurs modernes,
Et nous vous encourageons vraiment obtenir à l'aise avec votre console,
si vous voulez obtenir de bons à JavaScript.
Il est super pratique pour débogage, mais il est aussi
vraiment utile pour comprendre comment utiliser une API.
Il permet de vraiment l'expérimentation facile
sans avoir à taper un peu code, puis compiler.
Vous ne devez pas faire toutes ces étapes.
Vous pouvez simplement écrire du code dans une ligne,
puis obtenir une rétroaction immédiate sur si cette ligne de code ou non
worked-- très pratique.
>> Et aussi, juste un note-- technique la console JavaScript est un exemple
d'un REPL-- sorte que ce R-E-P-L, REPL, qui se tient pour la lecture, d'évaluer,
boucle d'impression.
Vous allez taper des trucs dans, il va lire ce que vous avez tapé dans,
il va l'évaluer, et il va imprimer le sortie, puis il va recommencer.
Cela vous permet d'aller rapidement dans cercles itération, ce qui est vraiment cool.
>> Je suppose que ce réel dernière note-- est la réelle dernière note, oui.
Comment pouvons-nous réellement utiliser JavaScript?
Alors d'abord, nous pouvons importer à l'aide d'une balise script
en haut ou en bas d'une HTML file-- partout à l'intérieur d'un fichier HTML,
vraiment.
Et dans une balise de script, il ya deux sous-manières d'importer JavaScript.
Le premier est en ayant une fichier JavaScript distinct
que nous importons dans son intégralité, ou en ayant une superficie de code comme le script
pour commencer, et ensuite script de barre oblique inverse à la fin.
Et puis nous écrivons simplement JavaScript dans le fichier HTML.
Ce sont les deux façons.
Vous ne pouvez pas avoir à l'intérieur du HTML.
Public: Est-ce mieux que l'autre?
Sam Green: La question était, Est-ce que l'un est meilleur que l'autre.
Donc, oui, comme une pratique de style de codage, et aussi il est comme une pratique de conception.
Il ya deux raisons pourquoi il pourrait être mieux.
Le premier est, il rend votre code une beaucoup plus lisible si l'ensemble de votre HTML
est en un seul endroit, l'ensemble de votre CSS est dans un autre endroit, l'ensemble de votre JavaScript
est dans une troisième place.
Droit?
Je pense que nous aurions déjà parlé à ce sujet dans sections-- comme ce CSS--
et que cela va est-- souvent dans un autre fichier.
Donc, même genre de concept ici.
Vous pouvez aussi imaginer que JavaScript seraient réutilisés sur plusieurs
Page HTML, ou peut-être un grand nombre de pages HTML,
et ayant que JavaScript remaniée en une seule
fichier que vous pouvez importer en plus d'un endroit
permet au code d'être de façon plus maintenable.
Vous pouvez imaginer faire un changer le JavaScript
et d'avoir à changer dans 100 fichiers différents.
Et à la place, nous pouvons simplement changer en un seul, ce qui est beaucoup plus puissant.
Ai-je répondu à votre question?
Cool.
>> Nous pouvons également taper dans la console, comme nous l'avons mentionné précédemment.
Et encore une fois, une dernière note-- Web Audio est intégré,
vous ne devez charger quoi que ce soit.
Cool.
Y at-il des questions, avez-vous d'autres questions sur JavaScript,
avant de passer?
>> AUDIENCE: [inaudible]
Sam Green: Très bien, cool.
Alors maintenant, il va parler de l'API.
>> HUGH ZABRISKIE: Cool.
Merci, Sam.
>> Sam Green: Bien sûr.
HUGH ZABRISKIE: Awesome, donc nous allons passer à partir de JavaScript.
Donc, nous avons parlé de certains l'essentiel de JavaScript,
et ceux qui sont les variables, fonctions, objets, fonctions en tant que variables,
chargement asynchrone.
Ce sont toutes les choses que vous aurez voir que vous utilisez le Web Audio.
Donc, nous allons juste parler à ce sujet d'abord à un niveau élevé.
>> Il est une API, il est donc quelque chose de qui est construit, comme l'a dit Sam,
à droite dans le code JavaScript que vous utilisez dans la console.
Et il est effectivement tout comme le code C ++ qui est vraiment construite dans Chrome
et Firefox, et l'ensemble de ces navigateurs.
Donc, l'idée principale avec Web Audio est que vous avez
ce genre de pipeline de l'audio, pas vrai?
Donc, vos données audio vient dans une certaine forme.
>> Il ya trois type de forms-- principale vous avez l'oscillateur, qui
crée une onde sinusoïdale, cosinus, nous allons voir comment cela fonctionne.
Un autre très commun, bien sûr, est un MP3.
Alors peut-être vous commencez avec une chanson, et puis vous
veulent faire du filtrage à cette sortie et
that-- qui pourrait être une source possible.
Et puis un vraiment cool l'une est le microphone.
Ainsi, vous pouvez utiliser certains très appels de base en JavaScript
pour obtenir l'accès au microphone, et si vous
voulu faire une application comme un détecteur de hauteur,
par exemple, qui prend en votre voix et chiffres sur
l'pitch-- moyen très facile de cela.
Vous pouvez juste sorte de lire dans, comprendre la fréquence,
puis un certain nombre de sortie.
Donc, nous allons voir comment ça fonctionne, aussi bien.
>> La destination est fondamentalement dans lequel les données audio est émis.
Donc, en général, ça ressemble vos haut-parleurs portables.
Autres options sont comme un ScriptProcessorNode--
nous y reviendrons nœuds dans un second-- mais fondamentalement,
soit vous mettez sur son grâce à votre ordinateur via haut-parleurs,
ou que vous sorte de l'enregistrement, de sorte vous stocker sous forme de données audio.
Alors peut-être si quelqu'un crée la musique dans votre application, puis
vous voulez enregistrer cela et peut-être comme exporter vers SoundCloud, pour example--
ce serait une façon de le faire.
Tous les trucs fun, dont nous allons parler,
qui se produit entre ces deux points, où nous chargeons de la musique
puis sortie il.
>> Donc, je vais parler de cinq étapes de la production audio en une seconde.
Nous avons cette chose appelée un AudioContext, qui
est ce petit wrapper que nous voyons ici.
Fondamentalement, ce que AudioContext est-- si nous aller à la console JavaScript à l'heure actuelle,
nous pouvons créer un dès maintenant.
Juste un exemple de REPL, non?
Lisaient, l'évaluation, et il imprime.
>> AudioContext est un état global.
Il a une structure, il est un objet ici, et il conserve les informations
à propos de choses se passent que sur l'écran pour les réglages audio.
Un exemple est l'heure actuelle.
Cela vous indique le nombre des secondes, de façon très précise,
depuis la page web chargée.
Alors ceci est un vraiment utile peu de bien que vous pouvez utiliser.
Il a lu terre que: Je pense effectivement vous pouvez tenter de régler une valeur.
Il vous dira le définissez, et puis si vous l'imprimez
again-- il n'a pas fait assez de travail.
Donc, il sont en lecture seule propriétés en JavaScript.
Ceci est vraiment utile si vous sorte de la synchronisation
beaucoup de différent informations, lorsque vous êtes
sorte de jouer des sons différents.
>> Un autre vraiment utile est la destination de contexte.
Certainement, si vous êtes intéressé, être essayer ceci à votre propre droit de la console
en ce moment.
Alors ceci est un AudioDestinationNode.
Fondamentalement, ce que cela dit est, où est la sortie va?
Donc, il ya deux options réelles ici.
Habituellement, la valeur par défaut est seulement vos haut-parleurs,
afin AudioDestinationNode essentiellement dit juste
il ya zéro sorties au son venant, envoyé au haut-parleur.
Donc, en général, vous ne faites pas avoir à jouer avec cela.
Si vous êtes intéressé à utiliser effectivement l'ScriptProcessorNode pour l'enregistrement,
certainement tirez-moi un e-mail plus tard, parce que ce
un peu plus compliqué.
Mais en général, vous êtes juste un peu de délivrer son dans une certaine forme.
So cool, nous allons retourner à cette page.
AUDIENCE: Je suis désolé.
HUGH ZABRISKIE: Ouais.
AUDIENCE: Je sais que vous avez dit de parler à vous plus tard à propos de l'enregistrement.
Pouvez-vous interface avec Pro Tools?
>> HUGH ZABRISKIE: Avec Pro Tools?
Voyons voir.
Je ne le pense pas.
Donc aller entre le client, qui est le JavaScript
console, et votre réelle ordinateur, est généralement
quelque chose qui est un peu de hors limites, si vous
sera, genre par la nature des the-- il est une sorte de chose de la conception,
mais vous essayez de garder le navigateur séparée à partir de l'ordinateur réel de l'utilisateur.
Généralement, la seule chose que vous êtes en mesure de l'accès est le microphone ou la caméra.
Vous n'êtes pas en mesure de, je ne pense pas, utilisez Pro Tools.
Cependant, si vous avez créé une piste dans Pro Tools,
exporté que vous pouvez charger que ici, le filtrer, par exemple,
processus qui, et enregistrer que dans un Audio destination-- ou, no-- une Sphère
Noeud de processeur.
Et puis à partir de là, vous pouviez exporter que de SoundCloud, vous
pourrait l'envoyer dans un e-mail, ou ce que vous voulez à partir de là.
>> Mais il est une sorte de barrière légère entre faire de la musique sur votre ordinateur
et faire de la musique en ligne.
>> Sam Green: Et voilà pas unique à cette API.
Il est une caractéristique de sécurité de Chrome, et Je pense que tous les autres navigateurs modernes.
Le navigateur est autonome.
Ainsi, par exemple, une page Web ne peut pas utiliser JavaScript pour couper le son
sur vos haut-parleurs, par exemple.
Ou il ne peut pas éteindre votre ordinateur.
Et il n'y a pas de point intermédiaire entre ces deux choses, à droite,
donc soit vous avez une abstraction complète,
ou vous ouvrez le faille de sécurité de laisser
un programmeur avec de mauvaises intentions faire ce qu'ils veulent avec votre ordinateur portable.
Et voilà pourquoi Chrome est autonome.
>> HUGH ZABRISKIE: Ouais.
Cela a-t-il du sens?
Cool cool.
Je voulais simplement montrer un exemple d'un.
Ceci est à peu près aussi autant que vous obtenez, en termes
d'accéder à l'ordinateur de l'utilisateur.
Si vous avez un clavier USB branché, vous pouvez utiliser ce qu'on appelle le Web
API MIDI, que nous ne vraiment parler ici,
mais ceci est une autre API qui est construite en au moins Chrome-- nouveau,
voilà pourquoi nous aimons Chrome-- Je pense que Firefox ou Safari,
cela est une chose facile à différents navigateurs ont google--
support différent pour ce qui API qu'ils ont mis en œuvre.
Mais si vous voulez brancher un clavier et de travailler avec cette information,
genre d'envoyer le clavier informations sur l'ordinateur
et ensuite l'utiliser en ligne, cette API est l'endroit où vous souhaitez travailler cela.
>> Cool.
D'ACCORD.
Donc, se déplaçant rapidement ici.
Comment faisons-nous à temps?
>> ENCEINTE 1: Environ 15.
>> HUGH ZABRISKIE: 15 minutes?
OK cool.
Donc, nous allons course devant ici.
>> Donc, fondamentalement, le principal point de penser à cela comme un pipeline
est que chaque étape dans le pipeline est une série de noeuds de audio.
Notre source, disons, est un oscillateur.
Nous devons créer un nœud de l'oscillateur.
Et cela est juste genre de la petite function--
et ils sont tous basés sur du contexte audio ici.
>> PUBLIC: Quand il dit oscillateur, ce que cela signifie
il est effectivement littéralement allant de deux pôles différents allers et retours?
>> HUGH ZABRISKIE: Non, il est comme une représentation numérique.
Il est effectivement mis en œuvre en C ++.
En fait, je ne sais pas les spécifications de la façon dont il est effectivement mis en œuvre,
mais tout cela fonctionne comme données binaires.
En fait, oui.
Cela reviendrait à dire, je pouvais en fait, si vous êtes intéressé,
Je pourrais vous envoyer un peu plus informations sur la façon dont les formes d'onde
sont maintenus ayant un format numérique.
OK cool.
>> Nous sommes donc générer un ton comme une condition sine WAVE ou quelque chose comme ça, peut-être
440 Hertz.
Nous créons un oscillateur.
Si nous voulons régler le volume, nous rien connecter à un GainNode,
que nous pourrions faire avec .creategain.
Qui fixe le volume.
Vous pouvez passer que sur tout de l'autre ainsi dire les options,
si une source de la mémoire tampon audio noeud est où vous pourriez
stocker un fichier MP3 que vous avez chargé.
>> Biquad filtre pour le filtrage est si vous voulez prendre toute la base sur
d'une chanson, ou quelque chose comme ça.
A Dieu ne plaise que vous voulez prendre la base sur une chanson.
Et le noeud de AudioDestination est, encore une fois, comme l'endroit où notre finalisation est.
Si jamais vous êtes intéressé à voir toutes les différentes options possibles,
juste aller à l'onglet et laisser l'auto-complétion venir.
Et si vous ne créez, vous verrez tous les choses différentes que vous pouvez créer.
Vous pouvez créer dynamique processeurs de script,
Je ne sais même pas ce que cela est, pour mélanger les fusions de canal
et répartiteurs de canal et tout ça.
Cool.
>> Donc, ceci est juste un exemple d'un pipeline.
Nous avons donc trois sources venant.
Peut-être que ce sont des formes d'onde, Peut-être ceux-ci sont en format MP3.
Un qui se passe dans un filtres, les uns des autres
se déformée autre son panoramique gauche et à droite.
Vous pouvez faire toutes sortes de choses et ils ont tous se mélangent autour ensemble,
puis sort de l'audio à la fin, en tant que destination.
Ceci est un exemple de ce que plus compliquée code Web Audio ressemble.
Vous créez toutes ces différents objets droite ici--
Je ne suis pas sûr de cela.
Non, il n'a pas de zoomer.
D'ACCORD.
>> Sam Green: vous ne contrôlez, défilement vers le haut.
HUGH ZABRISKIE: Contrôle Scroll--
Sam Green: Non, non.
Contrôle--
>> HUGH ZABRISKIE: Oh, de commande, faites?
Oh, Gotcha.
Oui.
Wow, Non, Non.
D'ACCORD.
Je ne ferai pas ça.
>> Donc oui, dans cette première section ici, vous voyez
nous créons tous ces différents nœuds sur le contexte.
Nous sommes en train de les reconstituer ensemble dans la seconde partie
par cette fonction appelée Connect.
Voilà vraiment une clé fonction dans Web Audio.
Cela signifie qu'une fois que vous avez fait quelque chose avec le bruit dans un noeud,
transmettre à la prochaine noeud.
Nous avons donc la source, il en communication avec l'analyseur,
l'analyseur fait quelque chose avec elle, il va de déformation, et ainsi de suite,
et à la destination en bas à droite ici.
Cool.
OK, donc nous allons continuer à avancer.
>> Le pipeline-- nouveau, ces sont conduites les plus courants,
si nous parlons de toutes ces choses comme distorsion, panoramique, tous ces trucs.
Si vous êtes vraiment intéressé en utilisant des choses Pro Tools,
ceux qui vous intéressent sans doute.
Si non, peut-être que vous venez vouloir jouer le son,
ou peut-être vous voulez juste régler le volume sur le son.
Ce sont les deux plus courante Trier des pipelines dans la production audio.
>> Encore une fois, les façons dont vous pouvez prendre en tant oscillator-- Donc, nous allons
faire la démonstration de ce droit ici.
Donc, nous allons créer un contexte audio simple, ici,
et de ce que nous allons de créer notre oscillateur.
Voilà donc, encore une fois, nous sommes juste va appeler Créer Oscillateur.
Nous allons définir une fréquence sur que, 440 Hertz, le favori de tout le monde.
Alors que nous nous connectons à la destination point-- qui est le haut-parleur, de sorte
la destination de contexte.
Enfin, nous disons simplement, commencer à zéro secondes à partir de maintenant, et ne nous avons le son?
>> [SONNERIE]
>> HUGH ZABRISKIE: Ici nous allons.
Il est juste une onde sinusoïdale.
OK cool.
Et puis nous nous arrêterons que.
>> AUDIENCE: Où avez- que la rétroaction vient-il?
>> HUGH ZABRISKIE: Le retour?
Oh, sans doute nos micros.
Donc oui, voilà comment vous le faites.
Et en fait, si je devais gardé courir, vous
pourrait avoir la fréquence valeur car il est en cours d'exécution,
de sorte que est une chose amusante à jouer.
Cool.
Ce est toujours une belle un à présenter.
>> Sam Green: Nous ne sommes pas pensons à ce sujet, avons-nous?
HUGH ZABRISKIE: Ouais, qui est méchante.
Ainsi, le tampon loading-- je vais vous montrer une exemple de ce que tout à la fin.
Cela chargement d'un MP3.
Et un microphone, vous suffit d'utiliser une fonction Navigator.getUserMedia appelé ()
de demander l'accès à l'utilisateur de microphone pour cette information.
>> Ici se filtrage, je vais juste continuer à avancer de cette situation.
Cette est assez haut niveau, mais filtres vous permettent juste
>> [BIP]
Filtrage vous permet également de créer des choses comme le rose
le bruit, le bruit brun, bruit blanc.
Si vous voulez créer un bruit pur, qui certaines personnes aiment à déranger,
vous pouvez utiliser Web Audio filtrage de le faire.
>> Audio Panning-- alors imaginez si vous écrivez un jeu
et que vous voulez le son sonner comme ça vient, comme,
tir à travers l'écran, vous peut utiliser le panoramique de l'audio
pour créer ce genre de cône, qui like-- il est assez Mathy,
mais il est en fait vraiment cool si vous obtenez ça marche,
et il ya quelque chose de bon tutoriels sur ce je peux vous envoyer.
Fondamentalement, vous pouvez genre de créer le son
de quelque chose qui passe d'une manière 3D.
Et si vous avez un intérêt de DJ, vous pouvez commencer à mélanger et traverser chansons décoloration.
>> Ceci est juste un peu très basique code, essentiellement ce que je faisais avant.
Ceci définit le volume de la oscillateur, de sorte que nous créons notre oscillateur
ce qui crée la forme d'onde.
Nous créons notre GainNode, définir notre fréquence,
puis connectez l'oscillateur à la GainNode, qui change alors essentiellement
la quantité de signal est autorisé à traverser.
Mais vraiment, il est un numérique chose, il est donc plus just-- ouais.
Cela ne veut pas ce qui se passe réellement, mais qui est ce qui arrive dans la vie réelle
avec un gain.
>> AUDIENCE: --quantization du paramètre de volume?
HUGH ZABRISKIE: Désolé?
Public: Est-ce une paramètre de volume quantifié?
HUGH ZABRISKIE: Ouais.
Et cela est une chose que je suis vraiment déficient dans ma connaissance,
comment le gain fonctionne à un niveau numérique.
Je sais avec réelle signaux, il est fondamentalement
contrôler combien vous êtes amplifier le signal.
Donc voilà.
Je vous enverrai plus d'informations sur que, parce que je serais curieux effectivement
pour en savoir plus à ce sujet.
Mais fondamentalement les paramètres sont, l'un est le fold--
l'signal-- plus fort et zéro est pas Signal, ou vous ne serez pas entendre aucun son.
Nous passerons le temps de démonstration pour cette raison il est fondamentalement ce que je faisais avant.
Et encore, le Context.Destination est le noeud de destination audio.
Impressionnant, OK.
>> Donc, je vais faire un rapide deux démos.
Comment faisons-nous à temps?
>> ENCEINTE 1: Environ 10 minutes.
>> HUGH ZABRISKIE: 10 minutes?
Formidable!
Impressionnant.
>> Donc, le premier que je vais ne, il a appelé ma chanson préférée.
Donc, ceci est juste un peu JavaScript HTML.
Nous allons avoir deux boutons sur la page de jouer ma chanson préférée
et arrêter ma chanson préférée.
Je vais changer cette situation.
>> AUDIENCE: Couvrez votre microphone.
>> HUGH ZABRISKIE: Ouais.
Et je l'ai chargé ici un script qui basically--
et cela est vraiment utile pour charger un fichier MP3,
donc cela fait juste chargement MP3 façon plus rapide.
Il est fondamentalement juste un wrapper.
Il est tout simplement le processus de charger dans MP3s beaucoup plus rapide,
sinon vous utilisez requête HTTP, un peu comme ce que nous faisions
sur la pièce courante définie par serveur.
Il est vraiment moche, vous ne veulent pas le faire.
>> Donc ce gars, Boris PME, a écrit un très utile petit outil appelé BufferLoader.
Tout ce que vous faites est tout simplement le passer le contexte, vous lui passez un films--
ou, oui, est-il une liste en JavaScript?
Sam Green: Un tableau.
HUGH ZABRISKIE: Oh, il est un tableau, qui est à droite.
Il est un tableau de chemins à différents fichiers.
Et puis vous passez une fonction.
Ceci est le rappel que nous parlions environ avec un chargement asynchrone.
Qui sera appelée Une fois les fichiers chargés.
Et cette fonction qui est appelée quand le fichier est chargé prend comme un périmètre
un tableau de tampons chargés.
Alors que se produit ici.
Fondamentalement, est BufferList va être un value--
ou ça va être un tableau de longueur, qui a en elle de l'indice
zéro l'ensemble du fichier chargé du MP3.
Donc ce que je fais quand je finis Chargement en cours est, je tout simplement
créer une source de tampon, qui est un noeud de source du tampon audio.
La prochaine étape est que je charge dans le source.buffer que le tampon chargé complète
à partir de la BufferList-- il ya beaucoup de buffers--
puis vous vous connectez que l'audio un tampon pour la destination.
Alors qu'est-ce qu'il va faire est tout simplement mettre le MP3
tout droit à la sortie, et commencer immédiatement
En obtenant cet appel.
>> Cool, alors voyons cela se produise dans l'action.
Mon [inaudible] ici, nous allons voir.
Donc je vais juste démarrer un serveur de base.
Voilà quelque chose qui vous devez faire si vous êtes
faire des demandes pour les fichiers de chargement.
Je vais démarrer un serveur de base.
Ceci est fondamentalement votre entière PSET en ce moment dans une ligne,
mais il ne fait que commencer un serveur sur le port 80/80.
Donc, nous allons ici, nous va charger 80/80,
nous allons aller à ma chanson préférée.
Donc, si je frappe "Play my chanson préférée "en ce moment,
il va charger mon chanson préférée et jouer it--
[MUSIQUE - les Eagles, "LA VIE DANS LE FAST VOIE"]
--which arrive à être "Life in le Fast Lane »par les Eagles.
Maintenant, je pourrais frapper "Arrêtez mon chanson préférée "et rejouer.
>> [MUSIQUE - les Eagles, "LA VIE DANS LE FAST VOIE"]
>> Et si je vais plus à consoler, parce Je ai utilisé une variable globale sur ici
de garder une trace de cette valeur, il fait seront dorénavant comptabilisés dans la console.
Donc, il crée automatiquement pour moi.
Voilà donc ce qui se joue en ce moment, et je ne peux tout simplement appeler source.stop ()
sur ça.
Eh bien, vous savez quoi?
Juste pour que vous les gars ont entendu cette song-- vous pourriez reconnaître cette chanson.
>> [MUSIQUE - Rick Astley, "Never Gonna DONNER You Up "]
[MUSIQUE - les Eagles, "LA VIE DANS LE FAST VOIE"]
Nous avons maintenant tous été Rickrolled.
Bon, d'accord, de passer.
Cool.
Donc, cela est essentiellement un exemple de juste comment vous pouvez charger un fichier MP3 file--
[MUSIQUE - les Eagles, "LA VIE DANS LE FAST VOIE"]
--et jouer, et arrêter et démarrer.
Je aurais pu faire beaucoup plus de [inaudible]
>> La dernière que je vais faire est, Je vais vous montrer un [inaudible].
>> [Jouer de la musique]
>> Il est comme, ogg.wave.mp3.
Je pense que, si je me souviens bien, Je ai rencontré quelques problèmes avec .m4a,
mais je ne suis pas sûr à ce sujet.
Je pense mp3.wave--
>> [MUSIQUE - Rick Astley, "Never Gonna DONNER You Up "]
>> D'accord, super.
Je ne l'aurais pas dit cela.
Quoi qu'il en soit, bonjour.
Nous avons donc cette ouverture.
Alors maintenant, tout ce que je fais est, je essentiellement créé une syntaxe de base pour créer de la musique.
Donc, si je fais quelque chose comme, ajouter g4 1 sur 2, ce que cela signifie est que,
ajouter la note de piano, G4, qui est la quatrième G
sur le piano à partir du bas.
Donc, ce genre de MIDI est la parole, Donc, pour ceux qui sont axés sur la musique,
cela est juste notes MIDI.
>> AUDIENCE: Voilà le G du Moyen-C, non?
>> HUGH ZABRISKIE: Ceci est la G ci-dessus Moyen-C, qui est juste.
>> AUDIENCE: au dessus du milieu C.
>> HUGH ZABRISKIE: Ouais.
En fait, oui.
Je pense que je réellement fait l'un [inaudible],
alors ce pourrait être une octave au-dessus.
Voyons donc.
Si je frappe Play--
[PIANO NOTE RÉPÉTITIVE]
--we're allez entendre cela.
L'idée est qu'il fonctionne tout comme une ligne de commande serait,
donc si je vais monter et descendre sur mon clavier, vous
peut revenir à précédente commandes, ce qui est très utile.
Et ci-dessous est ma liste de pistes, qui sont tous en cours d'exécution sur la boucle.
>> AUDIENCE: Vous étiez en supposant que le 88-clavier sur ça, non?
>> HUGH ZABRISKIE: La question était, suis-je suppose un clavier de 88 touches,
et oui, je suis.
Qu'est-ce que je l'ai fait est que je 88 échantillons pris au fond
du piano, une pour chaque note.
Et chaque fois que vous entendre une note à partir de maintenant,
qui est en fait une boucle qui ressemble like-- cela se joue sur la boucle,
Donc, pour chaque note, cela est en cours d'exécution.
Ce qui se passe est, je créer à nouveau un tampon,
Je crée un nœud de gain pour régler le volume.
Cette juste un vraiment façon compliquée de dire que je
stocker le tampon dans un source.buffer.
Je lui donne le gain, je le connecter au gain,
le gain est reliée à la sortie, puis je le joue.
Alors qui est genre de processus de la prise dans une source de tampon.
>> AUDIENCE: Pouvez-vous réellement prendre cette bruit sec et le rendre humide [inaudible]?
>> HUGH ZABRISKIE: Vous pouvez, oui.
Il est re-verbe, il ya délai, distorsion.
Vous pouvez pratiquement rien mettre dans entre dans ce sandwich de-- bien,
pipeline est une meilleure métaphore, mais vous pouvez ajouter quelque chose à cela.
Cool.
>> Donc, je vais finir la démo ici pour vous donner une idée
de tout le grand nombre de fois que vous peut exécuter cette fonction tout à la fois.
Donc, je vais supprimer ce.
Je vais créer un générateur that-- essentiellement ce que cela est vraiment does--
une sorte de syntax-- compliqué, mais il est va générer des notes à la volée,
et juste commencer à jouer comme il les évalue.
[PIANO interposition]
>> Ainsi, nous pouvons juste faire un peu de musique ici.
[PIANO interposition]
>> Alors, que cette commande le fait, par exemple, est
il prend ces trois notes pour le piano et les met ensuite B3.
Cette syntaxe pourrait faire un peu plus de sens
à ceux qui ont un musique de fond ici.
>> Je peux ajouter une grosse caisse.
Je peux--
>> [Interposition INSTRUMENTS]
>> --just jouer avec cela.
>> Ainsi, vous pouvez make--
[Interposition INSTRUMENTS]
Celui-là est un peu plus ennuyeux.
[Interposition INSTRUMENTS]
>> Donc, cela ajoute au hasard une cymbale sec sur chaque note 16, avec un 16%
[INAUDIBLE].
>> [Interposition INSTRUMENTS]
>> Ouais, donc la façon dont cette works-- il est toujours en 4: 4.
[Interposition INSTRUMENTS]
>> Ouais, donc les quatre trimestres, et 16/8.
[Interposition INSTRUMENTS]
>> Donc, en moyenne, vous obtenez 60% de hits sur les notes 16e.
>> Quoi qu'il en soit, ce fut tout simplement sorte de montrer
quelques-unes des choses que vous pourriez construire avec le Web Audio API.
Il est très puissant, il est très rapide, et vous pouvez faire beaucoup de choses cool
Avec ça.
Encore une fois, toutes les questions que vous avez, email myself-- Hugh-- ou Sam,
et honnêtement, Google a une tonne de bonnes ressources.
Tous les dernières questions?
Oui.
>> Auditoire: Alors, vous pouvez accéder le microphone intégré.
Que faire si vous vouliez utiliser un meilleur microphone?
HUGH ZABRISKIE: Si vous vouliez à utiliser une meilleure micro?
Encore une fois, cela fait partie de la abstraction entre Chrome
et le reste de votre ordinateur.
Sauf si elle est disponible par le biais une API, comme API Web MIDI,
vous pourriez probablement trouver quelques hacks, mais généralement pas que possible.
>> Sam Green: Vous pouvez also-- tout le Chrome sait
est ce que votre microphone par défaut est, et qu'il accède à ce.
Donc, si vous aviez un microphone vous pouviez défini comme le microphone par défaut de l'ordinateur,
vous pouvez accéder de cette façon et il serait probablement travailler.
HUGH ZABRISKIE: Voilà un bon point.
Je ne l'ai jamais essayé, mais vous pourriez être en mesure de type
de-- si vous redirigez le haut-parleur d'entrée, vous pourriez être en mesure de le faire, oui.
>> Tous les dernières questions?
Cool.
Eh bien merci les gars tant pour regarder.
Je suis Hugh.
Sam Green: Je suis Sam.
HUGH ZABRISKIE: Et cela est CS50.