>> SAM YEŞİL: Merhaba, herkes.
Bizim seminer hoşgeldiniz.
Benim adım Sam.
HUGH Zabriskie: Ben Hugh değilim.
SAM YEŞİL: Ve bugün konuşacağız JavaScript ve Web Ses API hakkında.
Sadece işe başlamak, bu bir taslak Seminerin için gündem.
Biz bahsediyoruz başlamak için gidiyoruz Neden Web ilgi olmalıdır
Ses API, neden JavaScript Bunun için ihtiyacınız olan dil,
ve sonra JavaScript hakkında konuşmak , gibi pek essentials--
Bazı size yol Dilin temelleri,
ve daha sonra hakkında konuşmak yüksek düzeyde ses API.
Ardından, Hugh bazı bahsedeceğiz Ses üretim aşamaları
ve sonra bu müthiş sequencer demo Proje kurdu ve size kodu gösterir.
Ve sonra, biz zaman olacak insanlar için sonunda sorular
burada yaşayan.
>> HUGH Zabriskie: Serin.
>> SAM YEŞİL: Serin.
>> HUGH Zabriskie: Serin.
Ben yedeklemek olacak.
>> SAM YEŞİL: Yani, ilk ilk şeyler.
Büyük şeylerden biri So Web Audio API hakkında
Gerekli hiçbir set orada olmasıdır.
Bu yerleşik olarak geliyor en modern tarayıcılar,
Chrome, Edge, bir bütün olmak üzere diğerlerini bütün olanları demet
bu büyük bölümlerini insanlar bugün kullanıyor.
Yani hayır, orada ayarlanır kenara sadece dan getting
Bir web sunucusu için, gidiş Eğer çalışmaya başlamak için
büyük projeniz üzerinde.
>> Biz güzel tavsiye ağır sen düşünün
Chrome kullanarak JavaScript web geliştirme,
sadece kendi geliştirici çünkü araçları gerçekten güçlü.
Ne demek sadece ne bir örnek olarak diyerek senin JavaScript açılır
Chrome'da giderseniz konsolunda, ve herhangi bir web sayfasında bakmak,
ve sol tıklayın Daha sonra Elemanı kontrol edin ve
Bu küçük açılan gitmek Burada ve Konsolu tıklayın
Eğer yukarı göründüğünü açar görürsünüz Komut isteminde gibi çok size
Mac bakın veya kimliği olabilir.
Sadece böyle, biz can tipi, Temizle gibi, burada komutları
ve bunun gibi diğer komutlar.
Biz, değişkenler oluşturabilirsiniz Biz JavaScript sonra görürsünüz.
Ve böylece her şey biz yapabiliriz JavaScript, biz konsolda yapabilirsiniz
ve bir süper kullanışlı bir yoldur API ile etrafında oynamaya başlayın
ve rahat alıyorum Yarasa kapalı JavaScript.
Hiçbir kurulum gereklidir, hangi gerçekten güzel.
Güzel.
Başar.
>> Yani sadece bir şey daha eklemek için.
Eğer herhangi vardır questions-- Burada değil yaşayan bir çoğunuz
us-- bu e-posta çekinmeyin Bizim e-posta adresleri bulunmaktadır.
Sorularınız varsa Bize sormak istemiyorum,
gibi oh bir hata var benim kod falan
Bu, biraz daha özel olduğunu Belki ilk Google'dan.
Büyük kaynakların bir yeri vardır Orada Web Audio API hakkında.
Gerçekten de var belgelenmiş ve davranıyor
insanların bir ton tarafından kullanılan Sadece olan sanayi ve insanlar
kendileri için eğlenceli şeyler inşa.
Yani bir sürü olmalı Orada kaynakların.
Başar.
>> Serin, neden Web Audio API?
Bu diyagram küçük bir parçasıdır Bu arada bir evrim
Web'de ses zamanla büyüdü.
Bgsound orijinal HTML etiketi gibi oldu Internet Explorer desteklemek için kullanılan söyledi.
Sadece, oldukça basit sesler için izin işlevselliği, çok sağlam değildi,
ve yapamadık karmaşık sıralama,
Ses başladığında ya da kontrol ve çok sağlam durdu.
Bu nedenle, özellikle değildi gelişmiş.
Ondan sonra Flaş , along-- hangi geldi
Ben hepiniz bildiğiniz eminim Flash-- belki çalıştığını değil nasıl,
ama kesinlikle gördüm.
Sen Flash'ı güncellemek lazım Plug-in, şeyler her bu tür,
ve kesinlikle yelpazesini genişletmiştir işlevselliğin mevcut olduğunu.
Ama kullanıcı yapma yüklemek bir plug-in kesinlikle
dahil olmak üzere Flash bir dezavantajı uygulamanızda, değil mi?
O Çünkü bağımlı konum Kullanıcı gidiyor ve bu plug-in bulma,
ve muhtemelen kapatılmasını Bu ekstra adım uzakta
onlar uygulamasını kullanmak için almak zorunda.
Ve sonra bir güncelleme olabilir senin bütün uygulama kırarım,
ve bir kabus olmak biter Çok geliştirici için.
Yani bir barikat oldu.
>> Ve o, gelip sonra HTML ses etiketi, hangi
Daha modern HTML-- bir özelliği olan kesinlikle çok daha fazla şeyler için izin
ancak bu bile şeyler yapabileceğini biraz sadece orada sınırlı
şeylerin bir sonucu olarak HTML yeteneğine sahip oldu.
Peki ne zaman JavaScript API, Web Audio API
Bir standart oldu tarayıcılar arasında pratik,
Bu gerçekten set genişletti Geliştiriciler için fırsat
Gerçekten bina içine almak için web için güzel şeyler.
Uzun bir süre orada vardı hiç gerçekten sağlam araçlar
Yerli ses uygulamaları için, Herkesin bildiği GarageBand da--,
ve o zaman tabii ki daha vardır profesyonel ses karıştırma uygulamaları,
ve bu tür şeyler.
Ama orada değildi bir Gerçekten iyi Cloud-- değil
Bulut, evet, sanırım Cloud-- web tabanlı bir platform
Bu geliştiriciler için izin verecek insanlar için uygulamalar oluşturmak
Ses karıştırma yapmak.
Ve seni göstereceğim gibi Daha sonra, Web Audio API
gerçekten güçlü sağlar şeyler, gerçekten sadece gerçekleşmesi
hangi oldukça serin.
Böylece sana neden talimat var Seminerin geri kalanını izlemek gerekir,
temelde.
>> Ve şimdi, ben hakkında konuşmak için gidiyorum Bazı JavaScript-- sadece temel unsurları
dil, böylece biz aynı sayfada olabilir
biz hakkında konuşmak zaman API biraz sonra.
Güzel.
>> Yani, bu bir özetidir.
Ben bu burada unutmuşum.
Evet.
>> HUGH Zabriskie: Burada iki slaytlar var.
>> SAM YEŞİL: Bu özetidir sınırlamaları bazı
Diğer bağlayıcı, eski yöntemler.
Ve sonra şimdi biz bu şeyleri var.
Güzel.
Başar.
>> Yani, JavaScript şartları.
İlk şeyler ilk, orada bir Oldukça anlamlı bir fark
JavaScript karşı bir şekilde C gibi dil,
Bu değişkenler oluşturulur.
C Yani, biz sahip alıştığınız Bizim değişkenleri yazmak için, değil mi?
Ve ben böyle türünü kastetmiyorum Onları yazın, ben tipini demek
gibi onlara type-- anlam atamak gibi, bir int, float, char.
C, biz gerçekten kullanıldı bir değişken oluşturmak zorunda
ve daha sonra da bu tür sopa biz bu değişkeni kullanın süre boyunca.
Ve bu, mutlaka kötü değil ancak kullanmak için muhtemelen zor.
Serin özelliklerinden biri JavaScript ve
değişkenler denen olduğunu "dinamik, yazdığınız" hangi
Ben oluşturmak anlamına gelir Bu sözdizimi ile değişken,
varX örneğin 5 eşittir.
Bu aslında oluşturur bir tamsayıdır variable--
Sağ altında Kaput somewhere-- ama ben
bu değişken değiştirebilirsiniz bir dize başvurmak için
Böyle bir şey yapmadan yeni bir değişken yaratır.
Ben endişelenmenize gerek yok tipi değiştirme hakkında.
JavaScript bu tür en bilir değişti ve bu dinamik olur.
>> Yani, faydaları vardır ve mahzurlar
çalışmış oluyor da herkes Bir süre JavaScript biliyor olabilir.
Zaman zaman vardır Yanlışlıkla olabilir
Bir değişkenin türünü değiştirmek ve Bu tip değişen işlemez,
ve sonra JavaScript crash-- veya bir istisna olabilir
Eğer gerekecek çünkü atılır Yanlış türü bir tür beklediğiniz.
Güzel.
>> Bu nedenle, burada scoping-- eğer gibi biz Tabii erken hafta hatırlıyorum,
nasıl görünür bir değişkene ifade eder ve kod hangi alanda.
Tüm bu çok benzer o C görünüyor şekilde
Yani değişkenler genellikle kapsamına eklenir Bir işlev içinde küme parantezi içinde,
ve daha sonra da vardır küresel Scoped değişkenler olduğunu
Bir değişken yazarsanız mudur Bir fonksiyon dışında,
o tüm metin görünür olacaktır.
>> Arasında bir fark Özellikle JavaScript ve C,
Eğer küresel bildirirseniz olduğunu bir metin dosyasında değişken her yerde
herhangi bir işlev görebilir var: Bu metin dosyası içinde.
Doğru, doğru değil mi?
>> HUGH Zabriskie: Evet.
>> SAM YEŞİL: Yani bu da biraz var C ile karşılaştırmalı olarak funky bit
biz her zaman olması gerekiyordu nerede bizim yerlerde yukarıda değişken tanımları
için kullanılmıştır.
Yani zorunlu oluyor bir kural değil, Artık, bu yüzden, biraz farklı.
Ve yine sadece bir kez daha vurgulamak, Yerel variables-- karşı küresel
-C'ye çok benzer Eğer olabilir Aynı isimde iki değişken,
ve bunların isimlerinden biri gölgeli var Yerel bir değişken tarafından onlardan biri varsa
Global oldu.
Yani, benzer bir tür sorunlar bazılarınız o
Bazı çalıştırmak olabilir senin sorunun şimdiye kadar ayarlar.
Serin, böylece değişkenleri var.
>> Kontrol akış gibi yani if-else-- mantıksal stuff-- ve döngüler.
Yani başlamak, bu ne if-else ifadeleri JavaScript benziyor.
Çeşitli şeyler yerleştirme hatlarda önemli değildir.
Bu sadece sözleşmelerin biridir yolu, yapı kodu.
Sadece C gibi, biz var Bir parantez ifadesi ", eğer".
Ben de bunu yapmaya demek istemedim.
Bunu tekrar yaptım.
>> HUGH Zabriskie: Çıkmak için çalışıyorsunuz?
SAM YEŞİL: Hayır, ben Sadece yakınlaştırmak için çalışıyor.
It does not matter.
>> Yani, biz bir "eğer" bir bildirimde bulunmamış ve biz bunun içinde bir şartım var
Bu, doğru veya yanlış olarak değerlendirir ve bu olup olmadığını belirler
Biz o kod bloğunu girin.
Ve aynı şekilde, biz bir else-if ve Biz C. alıştığınız gibi bir else,
>> Sen de oldukça rahat olmalıdır Doğru döngüler ile yarasa kapalı,
onlar da bakmak çünkü C gibi bir sürü görünüyor.
Ama yine dikkat edin edeceksiniz biz yerine başlatımlar int bölgesinin sahip
Biz var baþlatma var.
Ve ben var sanırım yapmak için dikkatli olmak
emin değerini değiştirmek yok I int bir dizeye,
Örneğin, çünkü gidiyor garip davranışlara neden sen olmayabilir
bekliyoruz.
Ama bu görünmelidir Oldukça tanıdık, hem de.
>> Şeyler başlar nerede Yani bu JavaScript biraz deli olsun
birisi için kim den gidiyor C. arka plan fonksiyonları vardır
JavaScript ve tek yolu var görünen bir işlev bildirmek için
C benzer tür ve Sonra bir tane daha var ki
Biraz farklı görünüyor.
>> İlk sürümü, Burada görebileceğiniz,
nerede tür C-gibi Biz bu bir fonksiyondur, demek
bir ad verin, verin argüman sayısı,
fonksiyon ve daha sonra içeriğinin Bu küme parantezi içinde gitmek.
Biz bir örnek göreceksiniz Bir saniye içinde argümanlar.
>> Bir sonraki satırda Oysa, biz oh, bak, Burada adı verilen bir değişken "myFunction," var:
ve biz bu onu eşit genel thing-- function-- bu
bir şey oluyor olması görünmüyor.
Farklı nedeni daha Cı olmasıdır JavaScript
işlevsel bir dil olarak adlandırılan şeydir, ya da bunun anlamı, fonksiyonel elemanları vardır
işlevleri aslında değerler söyledi.
Ve biz ayarlayabilirsiniz anlamına gelir Değişken bir işlev eşit
ve o işlevi taşımak etrafında, bir argüman olarak geçmek,
şeyler her türlü yapmak fonksiyonları ile böyle.
>> Bir şey note-- için işlevleri yazılır
argümanların belirli sayıda.
Biz bir işlev bir örnek göreceksiniz Bir sonraki slaytta bir argüman.
Ama JavaScript olmaz Eğer çalışırsanız sen bağırma
bir fonksiyonu kullanmak için argümanların yanlış numara.
Sadece yapmak için elinden geleni yapacağım eğer geçerseniz, yani do,
Bir bekler bir işlevi çağırmak hiçbir argüman, tüm argüman olduğunu
onun geleni yapacağız olduğunu olacak denemek ve bu kod yürütmesine,
ve sonunda çalışıyorsa Bir istisna veya bir hata içine
o istisna sadece tutacağız going-- gibi yollardan biri olan
JavaScript çalışır.
Evet.
>> HEDEF KİTLE: Ne olur Çok fazla argüman var?
SAM YEŞİL: So Soru ne olur, oldu
Çok sayıda argüman varsa?
Ve cevap olduğunu JavaScript sadece olacak
olanları görmezden o beklediğini olanlar sonra.
Bu işlevi yürütmek için çalışacağım Sadece ilk iki sanki diyoruz.
Sağ?
>> HUGH Zabriskie: Bu doğru, evet.
Benzer şekilde, eğer orada Çok az argümanlar vardır,
sadece tür tüm null verir argümanlar herhangi bir değeri yoktur
için.
>> SAM YEŞİL: can Aslında, kullanışlı olabilir eğer
fonksiyon yazmak istiyorum Değişken sayı argüman alır.
Siz varsayılan değerler ayarlayabilirsiniz Fonksiyonun tanımı,
ve gerçeğini göz ardı edebilirsiniz Bu girdi yok.
Yani biraz konuşmak istiyorum bu son mermi hakkında daha fazla bilgi
fonksiyonları nokta değerlerdir.
Bu bir örnektir Biraz üfleme
Sadece okumak ve düşünmek istemiyorsanız Bir saniye ne oluyor hakkında.
Yani, sadece bakalım Burada ilk satırı.
Biz demek, bu değişken, f1 var Bu şeyi yapan bir işlevdir.
Ve fonksiyonun içeriği ('merhaba') console.log vardır.
Sen console.log düşünebilirsiniz Printf JavaScript eşdeğer.
Peki ne olacak, eğer, biz Bizim tarayıcıda bu kodu çalıştırın,
Bir dize yazdırmak olacak.
Bunu göstermek olabilir.
HEDEF KİTLE: log olarak, olsa da, bunu yapar bir yerde kaydedilen ediliyor demek?
SAM YEŞİL: Evet.
Yani ne olacak size göstereceğim.
Yani soru ne anlama geliyor günlüğü oldu?
>> HUGH Zabriskie: So console.log C için printf gibi
SAM YEŞİL: So console.log , printf gibi
bu yüzden ('Merhaba') bu console.log varsa, ve ben diyoruz, string "merhaba"
konsola yazdırılır alır.
Bu konsoludur.
Bu sadece printf, gibi standart dışı yazdırır.
Ve biz bir dakika içinde göreceksiniz, ama bu aslında
Konsol nesnesine atıfta bulunarak, ve o nesne üzerinde bir yöntemi çağırmak.
Bu daha mantıklı olacak ne zaman bir dakika içinde biz
bahsediyoruz olsun JavaScript nesneleri,
ama ben sadece söz düşündüm.
HUGH Zabriskie: Bizler C için kullanılan haklıydın--
Biz genellikle büyük bir program yazmak Ana şey yapmak.
Ama ne JavaScript serin sensin tercümanın bu tür var
ishal gerçek zamanlı olarak, o yüzden satır satır sadece alır,
sadece yerinde olduğunu yorumlayabiliriz.
Ve bu izler daha önce çalıştırmak şeyler
bu yüzden bir oldukça yararlı bir araçtır , console.log veya konsol kullanmak
Genellikle, sadece oynamak için etrafında JavaScript ile.
>> SAM YEŞİL: Yani bu kadar geri gidiyor İkinci kod satırı example--
Burada kafamda oldukça boggling olduğunu.
İlk kez bu okudum, o gibi ne oluyor ki?
Peki ne oluyor bu, bir fonksiyon beyanı diyor
Ben bir işlevi çağrılır f2 var Bu, f bir argüman bekliyor,
ve daha sonra bu çağrıları fonksiyonu, f, hangi
argüman olarak kendisine geçildi hiçbir argüman kendisi.
Yani, bu kafa karıştırıcı olabilirdi.
F2 f1 alır gibi biz bu anlamak bir argüman olarak ve daha sonra f2 içinde,
f called-- bu araç alır Bu kod satırı olduğu,
Bu iki satır sonra Kod, "merhaba" sonuçları
konsola basılıyor.
>> Biz geçebilir gerçeği etrafında işlevler değerler olarak
En biri olmak biter JavaScript güçlü özellikleri
Bir programlama dili olarak.
Her dışında yapabilirim müthiş şeyler,
Sadece bir özelliği olarak şekilde açısından dili
bu işler kolay hale getirdiğini programlamak ve izin verir
özellikle olmayan şeyler için Web'de için çok uygundur,
Fonksiyonel programlama ve fonksiyonel JavaScript programlama yönleri
En biridir Güçlü kavramlar olduğunu
Bana sorarsanız JavaScript-- bulunmaktadır.
Güzel.
>> Yani, bir sonraki şey.
Fonksiyonel olmasının yanı sıra, JavaScript unsurları vardır
nesne yönelimli olduğu, olduğu çok biridir
bilgisayar bilimi popüler vızıltı kelime.
Nesne yönelimli programlama gerçekten popüler bir şeydir.
JavaScript bunun bir sürümü var, Ben her değeri de olduğuna inanıyorum nerede
Her nesne anlamına gelir bir nesne, değerlerin bazılarını dizi araya sarar.
Basit değerler gibi Yani , varX gibi bir tam sayıdır, = 5
bu nesne sadece tek bir değer sarar.
>> Ama biz de bir durum hayal edebiliyorum Biz C durumlara düşünebilirsiniz Nere
biz yapmak istedim yapılar ile bir şey,
Örneğin, bu birkaç sarar Birlikte değerler ve yapar
gerçekten kolay şeyler etrafında geçmek.
Bir nesne JavaScript olduğunda budur.
>> Bu hatırlamak önemlidir Ben nesnelerin sarılı olduğunu söylerken
Birlikte bazı değerlerin sayısı, işlevleri de olduğu
fonksiyonları olabilir ki değerler Ayrıca bir JavaScript nesnesinin içinde olması.
Ve önemli sebebi olduğunu, sık sık biz ise
bir yöntemi çağırmak düşünüyorum var bir nesne üzerinde
Diğer bir popüler terim Popüler nesne yönelimli diller,
farklardan biri burada olduğunu Bir yöntem, JavaScript içinde tüm bu
değeri bir nesne içinde saklanır bu muhtemelen bazı action-- gerçekleştirir
içinde diğer değerleri kullanarak o nesnenin, ama mutlaka.
Yani ben, bir durum hayal edebiliyorum çılgın bir şekilde biraz sanırım,
Eğer biri bir yöntem denilen yerde Örneğin, başka bir nesne üzerinde nesne.
Yani, bu şekilde korkak biraz öyle.
>> Ve ayrıca yöntemleri değiştirebilirsiniz Bir nesne ile ilişkili olduğu
bu yöntem a atayarak aynı zamanda, yeni fonksiyon,
diğerinden oldukça farklı nesne yönelimli diller,
Biz bir nesne bildirmek kez ve örneğini,
biz yöntemleri değiştiremezsiniz artık o nesne ile ilişkili.
Yani oldukça farklı.
Güzel.
>> Yani burada ilk olarak, bir örnek, eylem bir nesnenin.
Bu ne denir olduğunu Bir genel nesne, hangi
herhangi bir yok demektir Özellikle isim, bir sınıf yok
bu değerlerin sadece bazı sarma var.
Ve görünen şekilde biz var olan Kıvırcık bu dış çifti burada parantez
JavaScript göstermektedir ki ve bu bir nesne olduğunu söylüyorlar.
Bunun içinde değerleri Her değerler içerde
nesnesinin gerektiği Birlikte sarılır.
Ve o nesnenin içinde, biz o zaman, anahtar değer çiftleri var
Anahtar adını gösterir nerede nesnesinin iç değer,
ve diğer için-- Kolon burada-- karşısında
Gerçek değer Bu muhafaza edilmelidir.
>> Yani biz var burada göremiyor anahtar değeri sam ile fn denilen,
Ardından bir virgül, sonraki giriş üzerine söyleyerek.
Daha sonra ln adı verilen bir anahtar Yeşil bir değeri olan,
Ardından bir virgül, "baskı" ve ardından
Bir fonksiyon değerine sahip olacak olan Bu kod satırını yapacak.
En bir adım geri atalım ve Burada neler oluyor açmak.
Yani bu, biraz karmaşık ve biz yeni bir şey görüyorsanız
ilk kez.
"Bu" anahtar kelime yeni bir şey Burada görme ve bu ne konum
olduğu akımı anlamına gelmektedir Doğru, kapsamı itiraz?
Bu yüzden, bu derken tüm yolu geri işaret
Tüm bu object-- için Biz this.fn ne zaman,
biz geri tüm yol gitmek için gidiyoruz Bu nesneye, fn değerine gitmek
ve sam olsun, o tüm yol çekme Geri buraya sopa ve sonra hareket.
>> HEDEF KİTLE: alma Yani, bir çünkü parametrenin yapılan
tanım?
SAM YEŞİL: soru Yani olduğunu alma nedeniyle parametrenin yapılan
tanım?
Evet, kesinlikle.
Ne isimli burada ne olacak Bu nokta, JavaScript diyor
Tamam, bazı değer alıyorum Kendimden bu nesneden.
Ve sonra bir giriş için bakacağız fn denir ve onu bulursa,
o sam var, böylece value-- dönersiniz.
Ama aynı zamanda yazdığınız olabilirdi Burada tanımlanan değildi bir şey,
ve sonra sadece olurdu undefined-- geri dönme
Bir şey JavaScript yapabilirsiniz olduğunu faydaları, hangi do,
Eğer bir yazım hatası yaparsanız ama, also-- var garip hatalara neden olabilir.
Yani sadece bulmaya çalışacağım Bulmak için bunu söylemek ne
ve gitmiyor Onu bulmak yoksa şikayetçi.
Sadece ben yapmadım, söyleyeceğim Onu bulmak ve sonra hareket.
Bu yüzden, tanımsız olur artı boş artı soyadı.
Evet.
Ve sonra biz görebilirsiniz eğer Daha sonra aşağı inip access-- olabilir
ve biz parantez ile tf.print () diyoruz.
O baskı arayacak hiçbir argüman ile fonksiyon, değil mi?
Ama eğer biz sadece söz konusu tf.print () noktalı virgül, parantez olmadan,
yapardı tüm çekme olduğunu değerden fonksiyonu dışında,
ama aslında adı değil.
Güzel.
HUGH Zabriskie: Should Biz bir nesne yapmak?
SAM YEŞİL: Elbette, öyle yapalım.
Yani bu taşıyabilirsiniz konsola örneğin.
Biz bir nesne olduğunu hayal edebiliyorum.
Yani bu basit bir nesnedir.
Bu iki içeren bir nesnedir İki tuşları ile değerleri iki anahtar değeri
çiftleri.
Yani o zaman saklanan değere erişebilirsiniz x.x1 yaparak bu nesnenin içinde,
Örneğin, ben 1 geri almak.
Aynı şekilde, x.x2, bu değeri geri almak.
>> Ve şimdi gerçekten harika bir şey yapabilirim olduğunu Aslında bu nesneye şeyler eklemek
Bunu oluşturduktan sonra.
Yani diyelim, hayal edebiliyorum Ben bir işlevi var ki.
>> HUGH Zabriskie: Sen -Enter Shift yapmak zorundayız.
>> SAM YEŞİL: Oh, bu sinir bozucu.
Ne gibi değil mi?
Ah.
İşte başlıyoruz.
Güzel.
>> Yani sadece yarattım Bu fonksiyon, f, o
akım gidecek Nesne ve baskı this.x1.
Yani sadece tarafından f ararsanız kendisi, hiçbir şey gidiyor
Hiçbir x1 olmadığından, doğru, ne o atıfta bulunuyor nesne alan.
Ama, ben o zaman, x.f = f ve derseniz ben x.f () çağrısı, geri 1 alacağım.
Bu f fonksiyonu artık Nesne x ile ilişkili
anahtar olarak adlandırılan x1 olan değeri 1 ile ilişkili
Biz this.x1 çağırdığınızda bu nedenle, bu kadar o aradığını bulmak için gidiyor
ve bir değer yazdırmak mümkün.
Yani bu sadece bir örnek çılgın şeyler tür
Eğer JavaScript nesneleri ile yapabilirsiniz.
>> Yani versiyonu oldu genel sürümü, anlamı
Bu kullanarak nesneyi oluşturduk olduğunu , olarak göstermek kaşlı notasyonu parantez
rather-- ve bu Kullanışlı biz sadece isterseniz
Belirli bir nesnenin bir örneği, ancak ne Birden fazla olmasını istiyorsanız
Aynı türden?
Ve bu cevabı soru, şeyler vardır
hem de JavaScript dersleri çağırdı.
Biz bir işlev yaratabilir başlatma çeşit yapar
yabancı bir nesne için, ve biz gibi derdim
isim yüzden benim class-- yeniden kullanılabilir object-- arasında
Onu kurar fonksiyonu eşittir.
Yani bu eşdeğer olacağını Bir nesneyi yaratıyor ki
tıpkı olurdu, kaşlı ayraç, str, kolon,
Bu bir dizedir, noktalı virgül, kaşlı ayraç.
Bu jenerik olurdu Biz başlatmak nesne,
tek fark olmak ile Bir sonraki satırlar biz bir prototip oluşturmak hangi
bir varsayılan anahtar anlamına gelir Bizim nesneye eklemek
Burada listelenen değeri vardır.
Anlamı, ben yeni bir oluşturduğunuzda Bu Sınıfım nesne örneği,
bunun içinde önceden inşa gidiyor Bir değer str olarak adlandırılır ve başka bir değer
adı verilen MyPrint, gidiş bir işlev olması.
Başar.
>> Büyük.
Yani son şey için JavaScript hakkında ne söylüyor
Ne için gerçekten yararlı olmasıdır asenkron işlemleri denir.
Asenkron araçtır biz o Bazı işlem için bekleyebilir
Biz taşınmadan önce tamamlamak için Biz beklerken, aynı hareket
ve sonra bir şey daha sonra gerçekleşmesi.
Ve ne o demek sen olduğunu bir durum nerede hayal edebiliyorum
Eğer bir istek göndermek bir yerde bazı web sunucusu,
ve geri göndermek için gidiyor verilerin bazıları büyük bir yığın, değil mi?
Ve kullanıcı beklemek olabilir Bu arada bunun gerçekleşmesi için,
ve hiçbir şey olabilir o zaman oluyor.
Ama bu büyük bir tasarım hakkı, değil mi?
Eğer web sayfası dondurmak istemiyorum.
Ne kullanıcı istiyorsa Bir açılır menüden üzerine tıklayarak?
Bu büyük bir tasarım modeli değil.
Bunun yerine, temelde ne JavaScript diyor does
Tamam, zaman uyumsuz bu işlemi yapmak.
Yani böyle, arka planda bekleyin ve daha sonra işlem yapılır, ne zaman
Geri arama çağrı function-- Bazı işlev çağrısı,
Bazı action-- sinyal yok Biz bitmesini bekliyorlardı operasyon
bitti.
Ve süper güçlü nedeni, biz bir şeyler yapmak bir tartışma geçebilir
bir şeyler yapmak, ve sonra bekle Bir şey için.
Sonra, bir şeye kez Biz bir geri arama çağırabilirsiniz tamamlandıktan.
O sağlar, çünkü bu gerçekten kullanışlı Bize, Web Audio API ile şeyler
Örneğin, yük An gibi Uzak bir sunucudan ses dosyası
için beklemek zorunda kalmadan Tüm ses dosyası yüklenecek,
Gerçekten olurdu bir kullanıcı deneyimi için kötü.
Güzel.
>> Son birkaç hakkında notlar hata ayıklama, bu yana
Yapmanız gereken gidiyoruz bir şeydir senin projenin bir parçası olarak, garantili.
JavaScript konsolunu bahsetti.
Bu süper yararlı bir özellik var tüm modern tarayıcılar,
Ve biz gerçekten almak için teşvik konsolu kullanarak rahat,
JavaScript iyi olsun istiyorum.
Bu süper kullanışlı ayıklama, ama aynı zamanda bu
endam için gerçekten yararlı dışarı nasıl bir API kullanmak için.
Gerçekten sağlar Kolay deney
Bazı yazmak zorunda kalmadan Kod ve sonra derleyin.
Bütün bu adımları yapmak zorunda değilsiniz.
Sadece yazabilirsiniz bir çizgi içine bazı kod,
ve sonra anında geri bildirim almak kod bu hat olsun veya olmasın
çok kullanışlı worked--.
>> Ve ayrıca, sadece bir teknik note-- JavaScript konsolu bir örnektir
Bu, Çoğaltma R-E-P-L yüzden bir REPL-- bölgesinin okuma açılımı, değerlendirmek
Baskı döngü.
Bazı şeyler yazın gidiyoruz olarak, bu yazdığınız Ne okuyacağım,
onu değerlendirecek, ve basalım Çıktı ve sonra tekrar başlayacağız.
Yani hızla gitmek için izin verir çevreler gerçekten iyidir, hangi yineleme.
>> Ben bu note-- real son tahmin evet, gerçek son nottur.
Nasıl biz aslında JavaScript kullanabilirim?
Yani ilk, biz alabilirsiniz Bir komut dosyası etiketini kullanarak
Bir HTML üst veya alt kısmında file-- herhangi bir yerde bir HTML dosyası içinde,
gerçekten.
Ve bir betik etiketi içinde vardır JavaScript ithal iki alt yolu.
Ilk sahip olmasıyla Ayrı JavaScript dosyası
Biz bütünüyle içe ya da bu komut gibi kod bir alana sahip olarak
Daha sonra başlatmak ve ters eğik çizgi komut bitirmek için.
Ve sonra biz sadece yazmak HTML dosyası içinde JavaScript.
Bu iki yolu vardır.
Sen HTML içine olamaz.
HEDEF KİTLE: biri diğerinden daha iyi midir?
SAM YEŞİL: soruydu, biri diğerinden daha iyidir.
Yani, evet, bir kodlama stili uygulama olarak, ve aynı zamanda bir tasarım uygulaması gibi.
Bunun iki sebebi vardır Neden daha iyi olabilir.
İlk sizin kod a yapar, bir çok daha okunabilir HTML eğer tüm
tek bir yerde, CSS tüm olan Başka bir yerde, senin JavaScript tüm
Üçüncü sırada yer alıyor.
Sağ?
Ben zaten konuştum gerektiğini düşünüyorum sections-- benzeri bu konuda CSS-- Ne
Bu o-- ve gider genellikle başka bir dosyada.
Yani, burada kavramın benzer bir tür.
Ayrıca hayal edebiliyorum JavaScript birden fazla üzerine yeniden olurdu
HTML sayfası, ya da belki bir pek çok HTML sayfaları,
ve JavaScript sahip içine tekrar elden
içe olduğunu dosyası birden fazla yere
Kod olmaya sağlar yol daha rahat.
Sen bir yapım hayal edebiliyorum JavaScript değiştirmek
ve sahip değiştirmek için 100 farklı dosyalarda.
Ve bunun yerine sadece değiştirebilirsiniz yol daha güçlü birinde.
Ben sorunuza cevap vermedi?
Güzel.
>> Biz de, konsolun içine yazabilirsiniz Daha önce söz ettik olarak.
Ve yine, son bir note-- Ses inşa Web,
Eğer bir şey yüklemek gerekmez.
Güzel.
Herhangi bir sorunuz var mı sen var JavaScript hakkında daha fazla soru,
Biz geçmeden önce?
>> HEDEF KİTLE: [duyulamaz]
SAM YEŞİL: Pekala, serin.
Yani şimdi o API hakkında konuşmak için gidiyor.
>> HUGH Zabriskie: Serin.
Teşekkürler, Sam.
>> SAM YEŞİL: Elbette.
Hugh Zabriskie: Korku, yani Biz JavaScript itibaren hareket edeceğiz.
Bu yüzden bazıları hakkında konuştuk JavaScript şartları,
ve bu değişkenler, fonksiyonlar, nesneler, değişkenler olarak fonksiyonlar,
asenkron yükleme.
Bunlar, o sen olacak her şey vardır Web'de Ses kullanmanız olarak görüyorum.
Yani biz sadece konuşmak için gidiyoruz yüksek bir düzeyde ilk olarak bu konuda.
>> Bu bir API, bu yüzden bir şey Sam dediği gibi bu, yerleşik,
Sağ JavaScript içine Eğer konsolda kullandığınız.
Ve bu sadece C ++ kod gibi aslında Bu gerçekten Chrome'da yerleşik olarak
Firefox ve bu tarayıcıların tüm.
Web ile ana fikir Yani Audio olması
ses boru hattının bu tür, değil mi?
Yani ses verileri bazı şeklinde gelir.
>> Üç ana forms-- tür vardır Eğer osilatör, sahip olduğu
Bir sinüs dalga oluşturur kosinüs dalga, biz nasıl çalıştığını görmek için gidiyoruz.
Başka bir çok yaygın olanı, Elbette, bir MP3 olduğunu.
Böylece belki başlamak Bir şarkı, ve sonra
Bazı filtreleme yapmak istiyorum Bu ve çıkış
Bu ki- olası bir kaynağı olabilir.
Ve sonra çok güzel bir tek mikrofon.
Yani bazı çok kullanabilirsiniz JavaScript temel aramalar
erişmek için Mikrofon ve eğer öyleyse sen
Bir uygulamayı yapmak istedim pitch dedektörü gibi,
Örneğin, bu alır Sesli ve dışarı rakamlar
Buna pitch-- çok kolay bir yol.
Sadece biraz okuyabilirsiniz olarak, frekans anlamaya,
ve ardından çıkış bir sayı.
Yani biz o nasıl çalıştığını görmek, hem de edeceğiz.
>> Hedef temelde Nerede ses veri çıkışıdır.
Yani genel olarak, bu gibi dizüstü hoparlörleri.
Diğer seçenekler gibi Bir ScriptProcessorNode--
Biz düğümleri alırsınız saniyedir-- ancak temelde,
Ya ses çıkışı koyuyorlar bilgisayarınız aracılığıyla hoparlörler aracılığıyla,
veya ne tür, o yüzden kayıt konum ses veri olarak saklayarak ediyoruz.
Yani belki birisi oluşturursa müzik app ve sonra
sen ve belki gibi bu kaydetmek istediğiniz example-- için SoundCloud için dışa
o yapmanın bir yolu olacaktır.
Tüm eğlenceli şeyler, biz bahsedeceğiz hangi
Bu iki nokta arasında olur, Biz müzik yüklemek nerede
ve ardından çıkış.
>> Yani beş hakkında konuşmak için gidiyorum Bir saniye içinde ses üretim aşamaları.
Biz denen şeyi var Bir AudioContext, burada
Burada gördüğümüz bu küçük sarıcı.
Biz eğer Temelde ne o-- AudioContext Şu anda Javascript konsoluna gidin
şu anda bir tane yaratabilirsiniz.
Çoğaltma sadece bir örnektir, değil mi?
Biz okuyorlar, değerlendirmek ve yazdırır.
>> AudioContext küresel bir devlettir.
Bu, bir nesne bir yapı olduğunu var Burada, bu ve bilgi tutar
şeyleri devam etmektedir Ses ile ilgili ekranda.
Bir örnek, geçerli zamanı.
Bu size numarayı söyler saniye, çok hassas,
web sayfası beri yüklendi.
Yani bu gerçekten yararlı kullanabileceğiniz küçük mülk.
Bu Sadece-- okumuş Aslında düşünüyorum bunu bir değeri ayarlamak için deneyebilirsiniz.
Bu ayarlayın söyleyeceğim, ve sonra onu yazdırmak
vasıtasıyla yine aslında oldukça işe vermedi.
Yani orada salt okunur JavaScript özellikleri.
Bu eğer gerçekten yararlı olduğunu ne tür senkronize ediyoruz
Farklı bir sürü bilgi, ne zaman sen
tür farklı sesler oynuyor.
>> Başka gerçekten faydalı bir Bağlam yeridir.
Eğer ilgileniyorsanız kesinlikle olmak Kendi konsol sağda bu çalışıyor
şimdi.
Yani bu bir AudioDestinationNode olduğunu.
Temelde bu ne diyor, Çıktı nereye gidiyor?
Yani burada iki gerçek seçenek vardır.
Genellikle varsayılan sadece hoparlör olduğunu
Böylece AudioDestinationNode temelde sadece diyor
ses sıfır çıkış vardır geliyor, hoparlör gönderildi.
Yani genel olarak, değil mi Bununla oynamak zorunda.
Aslında kullanarak ilgileniyorsanız kayıt ScriptProcessorNode,
Kesinlikle beni bir ateş E-posta işte sonradan çünkü
Biraz daha karmaşık.
Ama genelde, sadece naziksiniz bazı şeklinde ses çıktısı.
So cool, biz buraya atlamak olacak.
İZLEYİCİ: Üzgünüm.
HUGH Zabriskie: Evet.
İZLEYİCİ: Ben konuşmak söyledi biliyorum Size daha sonra kayıt konusunda.
O Pro Tools ile arayüz miyim?
>> HUGH Zabriskie: Pro Tools mı?
Görelim.
Sanmıyorum.
Yani müşteri arasında gidiş, Hangi JavaScript
Konsol ve gerçek Bilgisayar, genellikle
tür şeyler sınırları kapalı, eğer
tür Şeyin doğası gereği, olacak o, bir tasarım çeşitşey
ancak ayrı bir tarayıcı tutmaya çalışın kullanıcının gerçek bilgisayardan çıkarın.
Genellikle tek şey mümkün olacaktır erişim mikrofon ya da kamera.
Sen mümkün değil, ben sanmıyorum, Pro Tools kullanın.
Ancak, oluşturduğunuz takdirde Pro Tools bir parça,
Bunu yük olabilir, bu ihraç Burada, örneğin, bu filtre,
süreç olduğunu ve bir içine kayıt Ses Destination-- veya bir Sphere hayır--
İşlemci Düğüm.
Oradan Ve sonra, sen-ebil , SoundCloud sizi o ihracat
bir e-posta gönderebilir, ya da olabilir ne oradan gibi.
>> Ama hafif bir bariyer tür var Bilgisayarınızdaki müzik yapma arasında
ve çevrimiçi müzik yapma.
>> SAM YEŞİL: Ve bu Bu API özgü değildir.
Bu Chrome'un bir güvenlik özelliğidir, ve Her diğer modern tarayıcı düşünüyorum.
Tarayıcı kendi kendine yeten olduğunu.
Yani, örneğin, bir web sayfası yapamaz Sesi açmak için JavaScript kullanmak
Örneğin sizin hoparlörler, üzerine.
Yoksa bilgisayarınızı kapatmak olamaz.
Ve hiçbir ara nokta yoktur Bu iki şey arasındaki, sağ,
Peki ya sen var tam soyutlama,
veya açmak icar güvenlik kusur
Kötü niyetli bir programcı yapmak ne olursa olsun onlar senin laptop ile istediğiniz.
Krom kendi kendine yeten Ve bu yüzden.
>> HUGH Zabriskie: Evet.
bu mantıklı mı?
Vay canına.
Ben sadece gidiyordu birinin bir örneğini gösterir.
Bu durum oldukça fazla kadarıyla açısından, olsun
kullanıcının bilgisayarınıza erişmesini.
Eğer varsa bir USB klavye, takılı Web denen şey kullanabilirsiniz
MIDI API, hangi biz olmaz Gerçekten burada hakkında konuşmak,
ama bu var başka API Yine, en azından Chrome-- yerleşik,
Biz Chrome-- seviyorum bu yüzden Ben, Firefox veya Safari düşünüyorum
Bu kolay bir şey google-- farklı tarayıcılar var
için farklı destek API'ler onlar hayata geçirdik.
Eğer isteseydi Ama klavyeye takmak için ve bu bilgilerle çalışmak,
tür klavyeyi göndermek Bilgisayara üzerinden bilgi
ve daha sonra, bu API bu çevrimiçi kullanın Bunu çalışıyor olurdum yerdir.
>> Güzel.
TAMAM.
Yani, hızlı bir şekilde burada hareketli.
Nasıl zamanında yapıyoruz?
>> KONUŞMACI 1: Yaklaşık 15.
>> HUGH Zabriskie: 15 dakika kaldı?
Tamam iyi.
Yani biz burada önde yarış olacak.
>> Yani temelde, ana noktası bir boru hattı olarak düşünme
olduğu boru hattı her adımı Ses düğüm dizisidir.
Bizim kaynak, diyelim ki, bir osilatör olduğunu.
Biz bir osilatör düğümü oluşturmanız gerekir.
Ve bu sadece türüdür Küçük function-- arasında
ve hepsi dışarı tabanlı konum Burada ses bağlamda.
>> HEDEF KİTLE: Bu dediğim zaman osilatör, demek
Aslında tam anlamıyla gelen gidiyor ileri geri iki farklı kutup?
>> HUGH Zabriskie: Hayır, gibi Dijital gösterimi.
Aslında C ++ uygulanacağı.
Aslında gözlük bilmiyorum aslında hayata nasıl bölgesinin
ama tüm bu ikili veri olarak çalışmaktadır.
Aslında, evet.
Yani I could diyerek olurdu Aslında, eğer ilgilenirseniz,
Ben biraz daha gönderebilir nasıl dalga formları hakkında bilgiler
Bir dijital formatta olması tutulur.
Tamam iyi.
>> Yani biz bir sinüs gibi bir ton üreten ediyoruz belki dalga ya da böyle bir şey
440 Hertz.
Biz bir osilatör oluşturmak.
Biz seviyesini ayarlamak istiyorsanız, biz Bir GainNode şey bağlamak,
hangi biz .creategain ile yapabilirdi.
Bu senin seviyesini ayarlar.
Herhangi üzerine bu iletebilirsiniz options-- iyi diğer,
yani bir ses tampon kaynağı düğüm nereye belki olduğunu
Eğer yüklü ettik bir MP3 saklayın.
>> Süzgecinin filtre filtreleme eğer içindir Eğer bütün baz almak istiyorum
Böyle bir şarkı, ya da bir şey.
Tanrı almak istiyorum korusun Bir şarkının dışında tabanı.
Ve AudioDestination düğümü, yine, gibi bizim sonuçlandırılması olduğu.
Gördüğünüz hiç ilgileniyorsanız Tüm farklı olası seçenekler,
Sadece sekmesine gidin ve izin Otomatik tamamlama buluyor.
Oluşturduğunuz yoksa Ve, tüm görürsünüz oluşturabilirsiniz farklı şeyler.
Sen dinamiğini oluşturmak komut işlemciler,
Ben bile ne bilmiyorum Kanal birleşme karıştırma için, bir
ve kanal yarma ve hepsi bu.
Güzel.
>> Yani bu sadece bir olduğunu Bir boru hattının, örneğin.
Yani biz üç kaynaktan geliyor olması.
Belki bu dalga vardır, Belki bu MP3 vardır.
Biri geçiyor Filtre, başka kimse
çarpık alıyorum başka Kişinin kaydırma sol ve sağ.
Siz her türlü şeyi yapabilirsiniz ve hepsi birlikte etrafında karışık olsun
ve sonra dışarı ses geliyor Hedef olarak sonunda.
Bu daha ne bir örnektir karmaşık Web Audio kodu gibi görünüyor.
Tüm bu yaratıyorsun farklı nesneler sağ burada--
Ben bu emin değilim.
Hayır, bu yakınlaştırmak değil.
TAMAM.
>> SAM YEŞİL: Sen Kontrolü, gelin-up yapmak.
HUGH Zabriskie: Denetim Scroll--
SAM YEŞİL: Hayır, hayır.
Kontrol--
>> HUGH Zabriskie: Oh, Kontrol, gidin?
Yakaladım, evet.
Evet.
Hayır, hayır, Wow.
TAMAM.
Ben bunu yapmayacağım.
>> Yani evet, bu ilk Burada bölüm, gördüğünüz
Biz bütün bu farklı yaratıyoruz bağlam dışında düğümler.
Biz sadece onları ekleme ediyoruz Birlikte ikinci bölümde
Bağlan denilen bu fonksiyon ile.
Bu gerçekten çok önemli olduğunu Web Audio işlevi.
Yaptığın bir kez sadece anlamına gelir tek düğüm ses ile bir şey,
sonraki düğüme onu geçmek.
Bu yüzden kaynak var, o analizörü bağlanır,
analizörü, onunla bir şey yapar o, böylece bozulma gider ve
ve hedefe Burada altta.
Güzel.
Tamam, bu yüzden biz ilerlemeye devam edeceğiz.
>> Pipeline-- yine bu En yaygın boru hatları,
bu yüzden gibi bütün bu şeyler hakkında konuşmak bozulma, kaydırma, tüm bu şeyler.
Eğer gerçekten ilgileniyorsanız şeyler Pro Tools kullanarak,
Bu muhtemelen size ilgi.
Değilse, belki sadece Sesi oynamak istiyorum,
ya da belki sadece istediğiniz Sesi seviyesini ayarlamak.
Bu en yaygın iki tür vardır Ses üretimi boru hatlarının.
>> Yine, yollar bunu alabilir Bir oscillator-- yüzden, haydi olarak
sağ burada demo yapmak.
Yani biz bir oluşturmak için gidiyoruz Burada basit ses bağlam,
ve biz gidiyoruz Bizim osilatör oluşturmak için.
Bu yüzden, yine, biz sadece konum Osilatör oluştur arayacak.
Biz bir frekansı ayarlamak için gidiyoruz 440 Hertz, herkesin favori ki.
Sonra hedefe o bağlamak point-- hoparlör yani hangi
Bağlam hedef.
Son olarak, biz sadece söylemek, sıfır başlangıç Bundan saniye ve biz ses var mı?
>> [Çınlayan]
>> HUGH Zabriskie: İşte başlıyoruz.
Bu sadece bir sinüs dalgası var.
Tamam iyi.
Ve sonra biz durdurmak olacak.
>> İZLEYİCİ: yaptım Bu geribildirim geliyor?
>> HUGH Zabriskie: geribildirim?
Ah, muhtemelen bizim mikrofonlar.
Bunu nasıl Yani evet, bu.
Ve aslında, olsaydı Seni tuttu çalışan
frekansa sahip olabilir o çalışıyor gibi değer,
böylece oynamak için eğlenceli bir şey.
Güzel.
Bu her zaman sunmak için güzel bir biri.
>> SAM YEŞİL: Biz vermedi Biz bu konuda mi düşünüyorsun?
HUGH Zabriskie: Evet, Bu kötü bir biri.
Yani, tampon loading-- ben göstereceğim en sonunda bu örneği.
Bu bir MP3 yüklüyor.
Ve mikrofon, sadece bir fonksiyonu kullanmak () Navigator.getUserMedia adı
kullanıcının erişim istemek için Bu bilgi için mikrofon.
>> İşte filtreleme var, ben olacak Sadece bu hareket edin.
Bu, oldukça yüksek seviyede ama filtreler sadece size izin
>> [Bipliyor]
Filtreleme de yapmanıza olanak sağlar pembe gibi şeyler oluşturmak için
gürültü, kahverengi gürültü, beyaz gürültü.
Saf gürültü oluşturmak istiyorsanız, hangi Bazı insanlar, etrafında karışıklık aşk
Web Audio kullanabilirsiniz filtreleme yapmak.
>> Ses Panning-- yüzden hayal Bir oyun yazıyorsanız
ve sesi istediğiniz o gibi geliyor gibi ses,
ekran boyunca çekim, sen ses kaydırma kullanabilir
koni bu tür oluşturmak için, hangi oldukça Mathy var da--,
ama gerçekten aslında Serin o iş olsun,
ve bazı iyi var Bunun üzerine öğreticiler Seni gönderebilirsiniz.
Temelde, ne tür can sesi oluşturmak
3D şekilde giderek bir şey.
Eğer bir DJ ilgi varsa, you can Karıştırma başlar ve solmaya şarkıları çapraz.
>> Bu sadece bazı çok temel Kod, daha önce yaptım temelde neyi.
Bu hacmini ayarlar osilatör, bu yüzden bizim osilatör oluşturmak
bu dalga biçimini oluşturur.
Bizim GainNode oluşturmak, Bizim frekansı ayarlamak,
ve ardından osilatör bağlamak Daha sonra temel değişiklikler GainNode,
ne kadar sinyal aracılığıyla izin verilir.
Ama gerçekten, bu bir dijital bulunuyor şey, evet sadece-- fazlası var yani.
Bu aslında ne oluyor değil, ama bu gerçek hayatta ne olur
Bir kazanç.
>> İZLEYİCİ: --quantization hacim parametresinin?
HUGH Zabriskie: Üzgünüm?
HEDEF KİTLE: Bunu bir mi nicelenmiş hacim parametresi?
HUGH Zabriskie: Evet.
Ve bu gerçekten ben bir şey Benim bilgi üzerinde yoksun,
nasıl kazanç dijital düzeyde çalışır.
Ben gerçek ile biliyorum sinyalleri, temelde var
kontrol ne kadar sen sinyali amplifiye edilmesi.
Yani evet.
Sana hakkında daha fazla bilgi göndereceğiz Aslında merak olurdu, çünkü, o
Bu konuda daha fazla bilgi için.
Ama temelde parametreler Bir fold-- olan vardır
yüksek sesle signal-- ve sıfır hiçbir sinyal, ya da herhangi bir ses duymayacaksınız.
Biz çünkü demo süresi atlamak ben daha önce yaptım temelde budur.
Ve yine, Context.Destination Ses hedef düğümdür.
Başar, tamam.
>> Yani hızlı bir iki demo yapmak için gidiyorum.
Nasıl zamanında yapıyoruz?
>> KONUŞMACI 1: Yaklaşık 10 dakika.
>> HUGH Zabriskie: 10 dakika?
Büyük!
Başar.
>> Yani gidiyorum ilki bu Favori Şarkısı deniyor yoktur.
Yani bu sadece bir olduğunu Küçük bir HTML JavaScript.
Biz iki düğme var gidiyoruz sayfadaki sevdiğim şarkıyı çalmak
ve benim en sevdiğim şarkıyı durdurmak.
Ben bunu değiştirmek gerekir.
>> HEDEF KİTLE: mikrofon örtün.
>> HUGH Zabriskie: Evet.
Ve ben buraya yükledim basically-- bir komut dosyası
ve bu gerçekten yararlı Bir MP3 yüklemek için,
Bu yüzden sadece yapar Daha hızlı MP3 şekilde yükleniyor.
Bu temelde sadece bir sarıcı var.
Sadece işlemi yapar çok daha hızlı MP3 yükleniyor,
aksi takdirde, HTTP isteği kullanıyorsanız tür ne yaptığımızı gibi
Server ile belirlenen cari parçası üzerinde.
O, gerçekten çirkin sen Bunu yapmak istemiyorum.
>> Yani bu adam, Boris Smus, gerçekten yazdı BufferLoader denilen kullanışlı küçük araç.
Tüm yapmanız gereken, geçmek basitçe Bağlam, bunu bir list-- geçmesi
ya da, evet, JavaScript listesidir?
SAM YEŞİL: bir dizi.
HUGH Zabriskie: Ah, öyle bir dizi, bu doğru.
Bu yolları bir dizi var Farklı dosyalara.
Ve o zaman bir işlev geçmektedir.
Bu, konuşuyorduk geri olduğunu asenkron yükleme ile ilgili.
Yani adı verilecek Yüklenen dosyalar bir kez.
Ve bu fonksiyon zaman denir dosyanın yüklü bir çevre olarak alır
Yüklenen tamponların bir dizi.
Yani burada meydana gelir.
Temel olarak, bir BufferList tek value-- olacak
ya da bir dizi olacak endeksinde içinde yer alır uzunluğu on,
MP3 bütün yüklenen dosya sıfır.
Yani bitirmek ne yaparım Yükleme Ben sadece, bir
bir tampon kaynağı oluşturmak hangi Bir ses bir tampon kaynağı düğümdür.
Bir sonraki adım Ben yüklemek olduğunu Tam yüklü tampon olarak source.buffer
BufferList-- adlı bu buffers-- bir sürü var
ve sonra o ses bağlamak hedefe tampon.
Peki bunu yapmak için gidiyor sadece basit MP3 koymak
Düz çıkışı kadar, ve hemen başlayın
Bu aramayı alma üzerine.
>> Serin, bu yüzden görelim Bu eylem oluyor.
Benim [duyulamaz] burada, görelim.
Ben sadece gidiyorum Temel sunucusunu başlatmak.
O bir şey olduğunu Eğer iseniz yapmanız gereken
Yükleme dosyaları için istekte bulunmak.
Ben bir temel sunucusunu başlatmak için gidiyorum.
Bu temelde tüm olan Şu anda tek bir satırda PSET
ama sadece başlıyor port 80/80 tarihinde bir sunucu.
Yani biz buraya gitmek, biz 80/80 yüklemek için gidiyoruz,
Biz Favori Şarkısı gitmek için gidiyoruz.
Ben isabet Yani eğer "Play benim Şu anda en sevdiğiniz şarkı ",
bu yükü gidiyor benim sevdiğim şarkı ve Durdur-- oynamak
HIZLI IN EAGLES, "YAŞAM - [MÜZİK LANE"]
--which in "Hayat olur Eagles Fast Lane ".
Şimdi, ben Dur "vurabilecek benim sevdiğim şarkı "ve tekrar.
>> HIZLI IN EAGLES, "YAŞAM - [MÜZİK LANE"]
>> Ve ben, çünkü teselli etmeye üzerinde giderseniz Buraya bir küresel değişkeni kullanılır
Aslında, bu değerin onu takip etmek Şimdi konsolunda kabul edilecektir.
Bu yüzden benim için otomatik olarak oluşturur.
Yani şu anda oynuyor ne, ve ben sadece) (source.stop çağırabilir
Bu konuda.
Peki, biliyor musun?
Sadece bu yüzden siz duymuş bu song-- Bu şarkıyı tanıyabilir.
>> [MÜZİK - Rick Astley, "Asla bırakmayacağım SİZ UP "]
HIZLI IN EAGLES, "YAŞAM - [MÜZİK LANE"]
Biz şimdi tüm Rickrolled oldum.
Tamam, harika, hareketli.
Güzel.
Yani bu temelde bir örnektir sadece bir MP3 yüklemek nasıl file--
HIZLI IN EAGLES, "YAŞAM - [MÜZİK LANE"]
--ve oynamak ve durdurmak ve başlatın.
Ben çok daha fazla yapmış olabilir [duyulamaz]
>> Ben yapacağım sonuncusu olan Ben [duyulamaz] size göstereceğim.
>> [MÜZİK OYUN]
>> Bu gibi ogg.wave.mp3 var.
Yanlış hatırlamıyorsam ben, bence, Ben, .m4a bazı sorunları çalıştırmak
ama bu konuda emin değilim.
Ben mp3.wave-- düşünüyorum
>> [MÜZİK - Rick Astley, "Asla bırakmayacağım SİZ UP "]
>> Tamam harika.
Bunu söylememem gerekirdi.
Merhaba, neyse.
Yani biz bu açık var.
Yani şimdi ben yaptığım Ben temelde oluşturulan bir müzik oluşturmak için temel bir sözdizimi.
Ben böyle bir şey yapmak eğer öyleyse, g4'ü eklemek 1 2, bu ne demektir olduğunu,
piyano notu G4 ekleyin bu dördüncü G
alttan piyano üzerinde.
Yani bu MIDI tür konuşuyoruz olduğunu böylece müzik tabanlı olanlar için,
Bu sadece MIDI notlar.
>> HEDEF KİTLE: Bu G bulunuyor Orta C, değil mi?
>> Hugh Zabriskie Bu G Orta C'nin üzerinde, bu doğru.
>> HEDEF KİTLE: Yukarıda Middle C.
>> HUGH Zabriskie: Evet.
Aslında evet.
Ben aslında yaptığımı düşünüyorum o tek [duyulamaz],
bu nedenle bu yukarıda bir oktav olabilir.
Yani görelim.
Ben Play-- vurursanız
[TEKRARLI PIANO NOT]
Bu duyacak --we're.
Fikir faaliyet olduğunu Sadece, bir komut satırı yaptığınız gibi
bu yüzden yukarı ve aşağı giderseniz Benim klavyede, sen
Önceki geri dönebilirsiniz Oldukça kullanışlı olan komutları.
Ve aşağıda parça benim listesi, hangi tüm döngü üzerinde çalışıyor.
>> HEDEF KİTLE: Sen varsayarak edildi Bu klavye 88 tuşlu, değil mi?
>> HUGH Zabriskie: soruydu, Ben bir 88 tuşlu klavye varsayarak yaşıyorum,
ve evet, öyleyim.
Ne yaptım ben ise temelde 88 numune aldı
piyano, her not için biri.
Ve böylece her zaman size Şu andan itibaren bir not duymak,
aslında görünen bir döngü Bu döngü üzerinde oynanan oluyor da--
yani her not için, bu çalışıyor.
Ne olur ki, ben Yine bir tampon oluşturmak,
Ben seviyesini ayarlamak için bir kazanç düğümü oluşturmak.
Bu sadece gerçekten I söyleyerek karmaşık yolu
Bir source.buffer arabelleği saklayın.
Ben o kazanç vermek, ben kazanç bağlayın,
kazancı bağlı Çıktı, sonra ben onu çalmak.
Yani bu sürecin tür bir tampon kaynağı alarak.
>> HEDEF KİTLE: aslında o alabilir miyim Kuru ses ve ıslak [duyulamaz] yapmak?
>> HUGH Zabriskie: You can, evet.
Yeniden fiil var, var gecikme, bozulma.
Temelde bir şey koyabilirsiniz of-- de bu sandviç arasında,
Boru hattı, daha iyi bir metafordur ama bunu bir şey ekleyebilirsiniz.
Güzel.
>> Yani demo bitireceğim Burada size bir fikir vermek için
kez sadece sayısının çokluğu seni tek seferde bu işlevi çalıştırabilirsiniz.
Yani bu kaldırmak için gidiyorum.
Ben bir jeneratör oluşturmak için gidiyorum ki- Temelde bu gerçekten does-- nedir
Karmaşık bir syntax-- tür ama var anında notlar oluşturmak için gidiyor,
ve sadece oynamaya başlayın Onları onları değerlendirir olarak.
[Interposing PİYANO]
>> Yani biz sadece burada biraz müzik yapabilirsiniz.
[Interposing PİYANO]
>> Peki bu komut örneğin, yapar
onun için bu üç notlar alır Piyano ve ardından B3 koyar.
Bu sözdizimi neden olabilir Biraz daha mantıklı
Bir olanlara Burada müzik arka plan.
>> Ben bir tekme davul ekleyebilirsiniz.
Yapabilirim--
>> [Interposing ARAÇLAR]
>> --just o ile oynamak.
>> Yani make-- edebilirsiniz
[Interposing ARAÇLAR]
Bu bir biraz daha sinir bozucu.
[Interposing ARAÇLAR]
>> Bu rastgele bir kuru zil ekler Yani 16 ile% 16 her nota üzerinde
[Duyulamaz].
>> [Interposing ARAÇLAR]
>> Evet, bu yüzden yol bu o 4'te hep works--: 4.
[Interposing ARAÇLAR]
>> Evet, dört çeyrek ve 16/8 yani.
[Interposing ARAÇLAR]
>> Yani ortalama olarak 60% indirim 16. notları vurur.
>> Neyse, bu sadece oldu tür göstermek için
yapabildin bazı şeyler Web Audio API ile inşa.
O, gerçekten hızlı, gerçekten güçlü ve serin bir çok şey yapabilirsiniz
Bununla.
Yani yine, herhangi bir soru, E-posta myself-- Hugh-- veya Sam,
ve dürüstçe, Google var İyi kaynakların bir ton.
Herhangi bir son soru?
Evet.
>> HEDEF KİTLE: Yani erişebilirsiniz Dahili mikrofon.
Eğer istedim ne Daha iyi bir mikrofon kullanın?
HUGH Zabriskie: Eğer isteseydim Daha iyi mikrofonu kullanmak için?
Yani yine, bu parçasıdır Chrome arasındaki soyutlama
ve bilgisayarınıza geri kalanı.
Içinden kullanılabilir olmadığı sürece bir API, Web MIDI API gibi,
muhtemelen bazı kesmek bulabiliriz, ancak genel olarak mümkün değildir.
>> SAM YEŞİL: Sen also-- edebilirsiniz Tüm Chrome bilir
ne Varsayılan mikrofon ve bu erişir.
Eğer bir mikrofon olsaydı yapabildin yüzden bilgisayarınızın varsayılan mikrofonu olarak ayarlanır,
Eğer bu şekilde erişebilir ve muhtemelen çalışmaya devam eder.
HUGH Zabriskie: Bu iyi bir nokta.
Ben denedim, ama hiç Eğer tür mümkün olabilir
of-- giriş hoparlör yönlendirmek durumunda, evet, bunu mümkün olabilir.
>> Herhangi bir son soru?
Güzel.
Peki teşekkür ederim çocuklar izlemek için çok.
Ben Hugh değilim.
SAM YEŞİL: Ben Sam.
Hugh Zabriskie: ve bu CS50 olup.