>> SAM GREEN: Hi, semua orang.
Selamat datang di seminar kami.
Namaku Sam.
Hugh Zabriskie: Saya Hugh.
SAM GREEN: Dan kita akan berbicara hari ini tentang JavaScript dan API Web Audio.
Hanya untuk memulai, ini adalah garis besar dari agenda kami untuk seminar.
Kita akan mulai dengan berbicara tentang mengapa Anda harus tertarik di Web
Audio API, mengapa JavaScript bahasa yang Anda butuhkan untuk itu,
dan kemudian berbicara tentang JavaScript essentials-- jadi seperti,
memandu Anda melalui beberapa dasar-dasar bahasa,
dan kemudian berbicara tentang API audio yang pada tingkat tinggi.
Kemudian, Hugh akan berbicara tentang beberapa tahapan produksi audio
dan kemudian demo sequencer ini mengagumkan Proyek ia membangun dan menunjukkan kode.
Dan kemudian, kita akan punya waktu untuk pertanyaan di akhir bagi orang-orang
yang ada di sini hidup.
>> Hugh Zabriskie: Cool.
>> SAM GREEN: Cool.
>> Hugh Zabriskie: Cool.
Saya akan back up.
>> SAM GREEN: Jadi, hal pertama yang pertama.
Jadi salah satu hal besar tentang Web Audio API
adalah bahwa tidak ada set up yang diperlukan.
Muncul built-in untuk sebagian besar browser modern,
termasuk Chrome, Edge, keseluruhan sekelompok others-- semua yang
porsi yang besar orang yang menggunakan hari ini.
Jadi ada yang tidak diatur, selain dari hanya mendapatkan
server web akan, untuk Anda untuk memulai bekerja
pada proyek Anda, yang besar.
>> Kami merekomendasikan cukup berat yang Anda anggap
menggunakan Chrome untuk JavaScript pengembangan web,
hanya karena pengembang alat-alat yang benar-benar kuat.
Sebagai contoh hanya apa yang kita maksud dengan mengatakan membuka Anda JavaScript
console-- jika Anda pergi ke Chrome dan Anda melihat halaman web,
dan Anda klik kiri Inspect Element, dan kemudian
Anda pergi ke ini sedikit drop-down di sini dan Anda mengklik Console,
Anda akan melihat apa yang membuka tampak banyak seperti command prompt yang Anda
mungkin melihat pada Mac Anda, atau ID.
Dan hanya seperti itu, kita bisa Jenis perintah di sini, seperti Clear,
dan perintah lain seperti itu.
Kita dapat membuat variabel, seperti kita akan lihat nanti dalam JavaScript.
Dan sebagainya yang bisa kita lakukan di JavaScript, kita bisa lakukan dengan konsol,
dan itulah cara yang super berguna untuk mulai bermain-main dengan API
dan mendapatkan nyaman dengan JavaScript langsung dari kelelawar.
Tidak ada set up yang diperlukan, yang benar-benar baik.
Keren.
Mengagumkan.
>> Jadi hanya satu hal lagi untuk menambahkan.
Jika Anda memiliki questions-- ada banyak dari Anda yang tidak di sini hidup,
ragu untuk email us-- ini adalah alamat email kami.
Jika Anda memiliki pertanyaan Anda tidak ingin untuk meminta kami,
seperti, oh saya memiliki bug dalam kode saya, atau sesuatu
itu sedikit lebih spesifik, mungkin Google itu pertama.
Ada banyak sumber daya yang besar tentang Web Audio API di luar sana.
Ini benar-benar baik didokumentasikan dan itu menjadi
digunakan oleh satu ton orang di industri, dan orang-orang yang hanya
membangun hal-hal menyenangkan untuk diri mereka sendiri.
Jadi harus ada banyak sumber daya di luar sana.
Mengagumkan.
>> Keren, jadi mengapa Web Audio API?
Diagram ini adalah sedikit dari evolusi dari jalan
suara di web telah berkembang dari waktu ke waktu.
Bgsound seperti tag HTML asli bahwa Internet Explorer digunakan untuk mendukung.
Ini hanya diperbolehkan untuk suara cukup mendasar, fungsi tersebut tidak sangat kuat,
dan Anda tidak bisa melakukan sequencing rumit,
atau mengontrol kapan suara mulai dan berhenti sangat kokoh.
Jadi, itu tidak terlalu berkembang dengan baik.
Kemudian setelah itu, Flash datang along-- yang,
Saya yakin bahwa kalian semua akrab dengan Flash-- mungkin bukan cara kerjanya,
tapi kau pasti melihatnya.
Anda harus memperbarui Flash Anda Plug-in, semua hal semacam itu,
dan yang pasti diperpanjang rentang fungsi yang tersedia.
Tetapi membuat pengguna menginstal plug-in pasti
kelemahan untuk termasuk flash dalam aplikasi Anda, kan?
Karena maka Anda tergantung pada pengguna akan menemukan dan plug-in ini,
dan mungkin menjadi berbalik off dengan langkah ekstra ini
mereka harus mengambil untuk menggunakan aplikasi Anda.
Dan kemudian mungkin ada update yang akan mematahkan seluruh aplikasi Anda,
dan akhirnya menjadi mimpi buruk untuk pengembang, juga.
Jadi itu barikade.
>> Dan kemudian setelah itu datang, tag audio yang HTML, yang
adalah fitur yang lebih modern yang HTML-- tentu memungkinkan untuk lebih banyak hal,
tapi bahkan hal-hal yang dapat Anda lakukan ada yang sedikit terbatas hanya
sebagai akibat dari hal-hal HTML yang mampu.
Jadi ketika JavaScript API, Web Audio API,
menjadi standar berlatih di browser,
yang benar-benar memperluas set peluang bagi pengembang
untuk benar-benar masuk ke dalam gedung keren untuk web.
Untuk waktu yang lama ada memiliki pernah benar-benar kuat alat
untuk aplikasi audio asli, like-- semua orang tahu GarageBand,
dan kemudian jelas ada lebih audio mixing aplikasi profesional,
dan hal semacam itu.
Tapi tidak ada Cloud-- benar-benar baik tidak
Cloud, yeah, saya kira Platform berbasis web Cloud--
yang akan memungkinkan para pengembang untuk membangun aplikasi untuk orang
untuk melakukan pencampuran audio.
Dan karena ia akan menunjukkan kemudian, Web Audio API
memungkinkan untuk benar-benar kuat hal terjadi benar-benar sederhana,
yang cukup keren.
Jadi itulah instruksi mengapa Anda harus menonton sisa seminar,
dasarnya.
>> Dan sekarang, aku akan berbicara tentang beberapa elemen hanya dasar JavaScript--
bahasa, sehingga kita bisa berada di halaman yang sama
ketika kita berbicara tentang API sedikit kemudian.
Keren.
>> Jadi, ini adalah ringkasan.
Saya lupa ini ada di sini.
Ya.
>> Hugh Zabriskie: Ada dua slide di sini.
>> SAM GREEN: Ini adalah ringkasan dari beberapa keterbatasan
dari mengikat, metode lama lainnya.
Dan kemudian sekarang, kita memiliki hal-hal ini.
Keren.
Mengagumkan.
>> Jadi, JavaScript penting.
Hal pertama yang pertama, ada Perbedaan yang cukup signifikan
dalam JavaScript dibandingkan dalam bahasa seperti C, di jalan
bahwa variabel diciptakan.
Jadi dalam C, kita digunakan untuk memiliki mengetik variabel kita, kan?
Dan saya tidak bermaksud tipe seperti ketik mereka dalam, maksudku jenis
seperti menetapkan mereka arti type-- seperti, int, float, char.
Dalam C, kami benar-benar digunakan untuk harus membuat variabel
dan kemudian menempel jenis untuk seluruh waktu yang kita gunakan variabel itu.
Dan yang belum tentu buruk, tapi mungkin lebih sulit untuk digunakan.
Salah satu fitur keren JavaScript adalah
bahwa variabel yang apa yang disebut "dinamis mengetik," yang
berarti bahwa saya dapat membuat variabel dengan sintaks itu,
varX sama dengan 5, misalnya.
Yang awalnya menciptakan integer variable--
tepat di bawah hood somewhere-- tapi aku
dapat mengubah variabel yang untuk merujuk ke string
tanpa melakukan sesuatu seperti menciptakan variabel baru.
Saya tidak perlu khawatir tentang jenis perubahan.
JavaScript tahu bahwa jenis ini berubah, dan itu terjadi secara dinamis.
>> Jadi, ada manfaat dan kelemahan itu,
sebagai orang yang bekerja di JavaScript untuk sementara waktu mungkin tahu.
Ada kalanya Anda mungkin tidak sengaja
mengubah jenis variabel dan tidak menangani jenis perubahan,
dan kemudian Anda JavaScript dapat crash-- atau pengecualian
dibuang, karena Anda akan memiliki Jenis yang salah ketika Anda mengharapkan satu jenis.
Keren.
>> Jadi, scoping-- yang seperti, jika kita ingat minggu di awal kursus,
mengacu pada bagaimana terlihat variabel adalah dan di daerah apa kode.
Semua itu terlihat sangat mirip dengan cara yang terlihat dalam C.
Jadi variabel scoped umumnya dalam kurung kurawal dalam fungsi,
dan kemudian ada juga variabel global-scoped yang
are-- jika Anda menulis sebuah variabel di luar fungsi,
itu akan terlihat di seluruh teks.
>> Satu perbedaan antara JavaScript dan C pada khususnya,
adalah bahwa jika Anda menyatakan global di mana saja variabel dalam sebuah file teks
itu terlihat dalam fungsi apapun dalam file teks.
Itu benar, kan?
>> Hugh Zabriskie: Yep.
>> SAM GREEN: Jadi itu juga sedikit bit yang funky dibandingkan dengan C,
di mana kami selalu harus memiliki kita definisi variabel di atas tempat
mereka digunakan.
Itu bukan aturan yang ditegakkan lagi, jadi, sedikit berbeda.
Dan lagi hanya untuk menekankan kembali, global yang dibandingkan variables-- lokal
sangat mirip dengan C. Anda bisa memiliki dua variabel dengan nama yang sama,
dan memiliki salah satu dari nama-nama mereka akan dibayangi oleh variabel lokal jika salah satu dari mereka
adalah global.
Jenis Jadi, sama masalah yang beberapa dari Anda
mungkin telah mengalami dalam beberapa masalah Anda set sejauh ini.
Keren, jadi itu variabel.
>> Aliran kontrol, yang berarti seperti, jika-else-- stuff-- logis dan loop.
Jadi untuk memulai dengan, ini adalah apa jika-lain pernyataan seperti di JavaScript.
Penempatan berbagai hal di garis tidak penting.
Ini hanyalah salah satu konvensi untuk cara kode struktur kita.
Sama seperti di C, kita memiliki "jika," sebuah pernyataan kurung.
Bukan itu yang saya maksud untuk melakukan.
Saya melakukannya lagi.
>> Hugh Zabriskie: Mencoba untuk keluar?
SAM GREEN: Tidak, aku hanya mencoba untuk memperbesar.
Tidak peduli.
>> Jadi, kita memiliki "jika" pernyataan dan kita memiliki kondisi di dalamnya
yang mengevaluasi untuk benar atau salah, dan yang menentukan apakah atau tidak
kita memasuki blok kode.
Dan juga, kita memiliki yang lain-jika, dan sebuah lain, seperti kita terbiasa di C.
>> Anda juga harus cukup nyaman langsung dari kelelawar dengan loop,
karena mereka juga melihat banyak seperti C terlihat.
Tetapi Anda akan melihat lagi bahwa kita memiliki, bukannya int inisialisasi,
kami memiliki inisialisasi var.
Dan saya kira Anda memiliki berhati-hati untuk membuat
Pastikan Anda tidak mengubah nilai I dari int ke string,
misalnya, karena itu akan menyebabkan perilaku aneh Anda mungkin tidak
mengharapkan.
Tapi ini harus melihat cukup akrab, juga.
>> Jadi ini adalah di mana hal-hal mulai mendapatkan sedikit gila di JavaScript
untuk seseorang yang pergi dari latar belakang C. Ada fungsi
dalam JavaScript, dan ada satu cara untuk menyatakan fungsi yang terlihat
semacam mirip dengan C, dan maka ada satu lagi yang
terlihat agak berbeda.
>> Versi pertama, yang kita bisa lihat di sini,
adalah jenis C-seperti, di mana kita katakan, ini adalah fungsi,
memberikan nama, memberikan jumlah argumen,
dan kemudian isi fungsi masuk ke dalam orang-orang kurung kurawal.
Kita akan melihat contoh argumen hanya dalam satu detik.
>> Sedangkan pada baris berikutnya, kita melihat, oh, inilah sebuah variabel yang disebut "myFunction,"
dan kami sama ke ini generik function-- thing-- yang
tampaknya tidak memiliki apa pun yang terjadi.
Alasan yang berbeda dari C adalah bahwa JavaScript
adalah apa yang disebut bahasa fungsional, atau memiliki elemen fungsional, yang berarti
yang berfungsi sebenarnya nilai-nilai.
Dan itu berarti bahwa kita dapat mengatur variabel untuk sama fungsi
dan kemudian memindahkan fungsi yang sekitar, lulus sebagai argumen,
melakukan segala macam hal seperti itu dengan fungsi.
>> Satu hal lain untuk note-- fungsi yang ditulis
dengan sejumlah argumen.
Kita akan melihat contoh dari fungsi dengan argumen pada slide berikutnya.
Tapi JavaScript tidak akan berteriak pada Anda jika Anda mencoba
menggunakan fungsi dengan nomor yang salah dari argumen.
Itu hanya akan melakukan yang terbaik untuk membuat melakukan, yang berarti bahwa jika Anda lulus,
Anda memanggil fungsi yang mengharapkan Argumen tanpa argumen, semua yang
akan terjadi adalah ia akan melakukan yang terbaik untuk mencoba dan mengeksekusi kode itu,
dan jika akhirnya berjalan menjadi pengecualian atau kesalahan,
itu akan membuang pengecualian itu dan hanya terus going-- yang hanya salah satu cara
bahwa JavaScript bekerja.
Ya.
>> AUDIENCE: Apa yang terjadi jika ada terlalu banyak argumen?
SAM GREEN: Jadi pertanyaan adalah, apa yang terjadi
jika ada terlalu banyak argumen?
Dan jawabannya adalah bahwa JavaScript hanya akan
mengabaikan orang-orang yang setelah yang mengharapkan.
Ini akan mencoba untuk menjalankan fungsi sebut seolah-olah itu hanya dua yang pertama.
Kanan?
>> Hugh Zabriskie: Itu benar, ya.
Demikian pula, jika ada terlalu sedikit argumen,
itu hanya semacam memberi nol untuk semua argumen itu tidak memiliki nilai-nilai
untuk.
>> SAM GREEN: Yang bisa benar-benar menjadi berguna, jika Anda
ingin menulis fungsi yang mengambil sejumlah variabel argumen.
Anda dapat mengatur nilai default di definisi fungsi,
dan dapat mengabaikan fakta bahwa input tidak ada.
Jadi saya ingin berbicara sedikit lebih lanjut tentang peluru terakhir ini
titik, yang merupakan fungsi adalah nilai-nilai.
Ini adalah contoh yang sedikit sedikit pikiran-bertiup
jika Anda hanya membacanya, dan tidak berpikir tentang apa yang terjadi untuk kedua.
Jadi, mari kita lihat hanya pada baris pertama di sini.
Kami memiliki variabel ini, f1, yang kita katakan adalah fungsi yang melakukan hal ini.
Dan isi dari fungsi yang console.log ('hello').
Anda dapat menganggap console.log sebagai JavaScript setara dengan printf.
Jadi apa yang akan terjadi adalah, jika kita menjalankan kode ini di browser kita,
itu akan mencetak string.
Saya bisa menunjukkan bahwa.
AUDIENCE: Dengan log, meskipun, apakah itu berarti itu sedang direkam di suatu tempat?
SAM GREEN: Ya.
Jadi saya akan menunjukkan kepada Anda apa yang akan terjadi.
Jadi pertanyaannya adalah, apakah log artinya?
>> Hugh Zabriskie: Jadi console.log seperti printf untuk C.
SAM GREEN: Jadi console.log seperti printf,
jadi jika saya memiliki console.log ini ('halo'), dan saya sebut itu, string "hello"
akan dicetak ke konsol.
Ini adalah konsol.
Ini seperti printf, di mana mencetak untuk keluar standar.
Dan kita akan melihat dalam satu menit, tapi ini benar-benar
mengacu pada objek konsol, dan memanggil metode pada objek itu.
Itu akan lebih masuk akal dalam satu menit ketika kita
bisa berbicara tentang objek dalam JavaScript,
tapi saya pikir saya hanya akan menyebutkan bahwa.
Hugh Zabriskie: Kami digunakan untuk di C, right--
kita biasanya menulis program besar di utama untuk melakukan sesuatu.
Tapi apa yang keren dalam JavaScript adalah Anda memiliki jenis interpreter yang
berjalan secara real time, sehingga Dibutuhkan hanya baris demi baris,
itu hanya bisa menafsirkan bahwa di tempat.
Dan melacak hal-hal yang telah dijalankan sebelumnya,
jadi alat yang cukup berguna untuk menggunakan console.log, atau konsol,
umumnya, hanya bermain main dengan JavaScript.
>> SAM GREEN: Jadi akan kembali ke ini example-- baris kedua kode
di sini cukup mencengangkan di kepala saya.
Pertama kali saya membaca ini, itu seperti, apa yang terjadi?
Jadi apa yang terjadi adalah, ini deklarasi fungsi mengatakan,
Saya memiliki fungsi yang disebut f2 yang mengharapkan satu argumen, f,
dan kemudian panggilan yang fungsi, f, yang
disahkan untuk itu sebagai argumen tanpa argumen itu sendiri.
Jadi, yang mungkin telah membingungkan.
Jika kita memahami ini sebagai f2 f1 mengambil sebagai argumen, dan kemudian dalam f2,
f mendapat called-- yang berarti bahwa baris kode ini,
setelah dua baris kode, hasil dalam "halo"
yang dicetak ke konsol.
>> Fakta bahwa kita dapat melewati fungsi sekitar sebagai nilai-nilai
akhirnya menjadi salah satu yang paling fitur canggih dari JavaScript
sebagai bahasa pemrograman.
Di luar semua hal mengagumkan yang dapat dilakukan,
hanya sebagai fitur dari bahasa dalam hal cara
bahwa itu membuat hal-hal mudah program dan memungkinkan
untuk hal-hal yang tidak terlalu cocok untuk web,
pemrograman fungsional dan fungsional aspek pemrograman JavaScript
adalah salah satu yang paling konsep yang kuat yang
ada di JavaScript-- jika kau bertanya padaku.
Keren.
>> Jadi, hal berikutnya.
Selain menjadi fungsional, ada juga unsur JavaScript
yang berorientasi objek, yang merupakan salah satu yang sangat
kata buzz populer dalam ilmu komputer.
Pemrograman berorientasi objek adalah hal yang benar-benar populer.
JavaScript memiliki versi itu, di mana saya percaya setiap nilai juga
obyek, yang berarti bahwa setiap objek membungkus bersama beberapa jumlah nilai.
Jadi untuk nilai-nilai yang sederhana, seperti integer, seperti varX sama dengan 5,
objek yang hanya membungkus bahwa salah satu nilai.
>> Tapi kita juga bisa membayangkan situasi where-- kita bisa memikirkan situasi di C
di mana kita ingin lakukan sesuatu dengan struct,
misalnya, yang membungkus beberapa nilai-nilai bersama dan merek
itu benar-benar mudah untuk lulus hal di sekitar.
Saat itulah suatu objek dalam JavaScript.
>> Sangat penting untuk diingat ketika saya mengatakan bahwa benda dibungkus
beberapa jumlah nilai bersama-sama, yang berfungsi juga
nilai-nilai, yang berarti bahwa fungsi dapat juga berada di dalam objek JavaScript.
Dan alasan itu penting adalah bahwa, sementara kita sering
memikirkan memanggil metode pada objek yang
dari istilah populer dari yang lain bahasa berorientasi objek yang populer,
salah satu perbedaan di sini adalah bahwa semua bahwa metode adalah dalam JavaScript
adalah nilai disimpan dalam sebuah objek yang melakukan beberapa action-- mungkin
menggunakan nilai-nilai lain yang berada di dalam obyek itu, tapi belum tentu.
Jadi bisa dibayangkan situasi, saya kira dalam sedikit cara gila,
di mana Anda disebut metode satu objek pada objek lain, misalnya.
Jadi, itu sedikit yang funky dengan cara itu.
>> Dan Anda juga dapat mengubah metode yang berkaitan dengan obyek
dengan menetapkan bahwa metode fungsi baru, yang juga
cukup berbeda dari lainnya bahasa berorientasi objek, di mana
setelah kami mendeklarasikan sebuah objek dan instantiate,
kita tidak bisa mengubah metode yang terkait dengan objek itu lagi.
Jadi itu cukup berbeda.
Keren.
>> Jadi, inilah contoh, pertama, suatu objek dalam tindakan.
Ini adalah apa yang disebut objek generik, yang
berarti bahwa itu tidak memiliki nama tertentu, tidak memiliki kelas,
itu hanya beberapa pembungkus nilai.
Dan cara yang terlihat adalah, kita memiliki ini pasangan luar keriting kawat gigi sini
yang menunjukkan ke JavaScript dan mengatakan, ini adalah sebuah objek.
Nilai-nilai di dalamnya masing-masing nilai dalam
objek yang harus dibungkus bersama-sama.
Dan di dalam objek itu, kami kemudian memiliki pasangan nilai kunci,
di mana kunci mengacu nama dari nilai dalam objek,
dan side-- lainnya sebaliknya sini-usus
adalah nilai aktual yang harus disimpan.
>> Jadi Anda lihat di sini bahwa kita memiliki kunci yang disebut fn dengan nilai sam,
diikuti dengan koma, mengatakan ke entri berikutnya.
Kemudian kunci disebut ln, dengan nilai hijau,
diikuti dengan koma, diikuti dengan "cetak,"
yang akan memiliki nilai fungsi yang akan melakukan baris kode.
Mari mengambil langkah mundur dan membongkar apa yang terjadi di sini.
Jadi ini adalah sedikit rumit, dan kami melihat sesuatu yang baru
untuk pertama kalinya.
"Ini" kata kunci adalah hal baru kita lihat di sini, dan apa yang dilakukan
adalah, mengacu pada saat ini objek dalam lingkup, kan?
Jadi ketika kita mengatakan, ini menunjukkan semua jalan kembali
untuk seluruh object-- ini ketika kita melakukan this.fn,
kita akan pergi semua jalan kembali ke objek ini, pergi ke nilai fn
dan sam, tarik semua jalan kembali, tetap di sini, dan kemudian melanjutkan.
>> AUDIENCE: Jadi dengan pengambilan, adalah yang dilakukan karena parameter
definisi?
SAM GREEN: Jadi pertanyaannya adalah, adalah pengambilan dilakukan karena parameter
definisi?
Ya, benar-benar.
Apa yang akan terjadi di sini adalah, dot ini mengatakan kepada JavaScript,
OK, saya mendapatkan beberapa nilai dari objek ini dari diriku sendiri.
Dan kemudian akan mencari entri disebut fn, dan jika menemukan itu,
itu akan kembali bahwa value-- demikian, itu sam.
Tapi aku bisa juga diketik sesuatu yang tidak didefinisikan di sini,
dan kemudian itu akan hanya kembali undefined-- yang
adalah hal yang dapat JavaScript melakukan, yang dapat memiliki manfaat,
tapi itu also-- jika Anda membuat kesalahan ketik, dapat mengakibatkan kesalahan aneh.
Jadi itu hanya akan mencoba untuk menemukan apa pun yang Anda kirim untuk menemukan
dan itu tidak akan mengeluh jika tidak menemukannya.
Itu hanya akan mengatakan, saya tidak menemukannya, dan kemudian melanjutkan.
Jadi itu akan terdefinisi, ditambah kosong, ditambah nama terakhir.
Ya.
Dan kemudian kita dapat melihat bahwa jika kita kemudian bisa turun dan access--
dan kita sebut tf.print () dengan tanda kurung.
Ini akan memanggil cetak yang Fungsi tanpa argumen, kan?
Tetapi jika kita hanya mengatakan tf.print () koma, tanpa kurung,
semua yang akan dilakukan adalah menarik keluar fungsi dari nilai,
namun tidak benar-benar menyebutnya.
Keren.
Hugh Zabriskie: Haruskah kita membuat sebuah objek?
SAM GREEN: Tentu, mari kita lakukan itu.
Jadi saya bisa bergerak ini contoh ke konsol.
Kita bisa membayangkan bahwa saya memiliki objek.
Jadi ini adalah objek sederhana.
Ini adalah obyek yang berisi dua nilai dengan dua tombol, dua nilai kunci
pasang.
Jadi saya kemudian dapat mengakses nilai yang tersimpan dalam obyek ini dengan melakukan x.x1,
misalnya, dan saya mendapatkan 1 kembali.
Demikian juga, x.x2, mendapatkan nilai yang kembali.
>> Dan sekarang hal yang sangat keren adalah, saya bisa benar-benar menambahkan sesuatu untuk objek ini
setelah saya buat itu.
Jadi bisa dibayangkan, mari kita mengatakan bahwa saya memiliki fungsi.
>> Hugh Zabriskie: Anda harus melakukan Shift-Enter.
>> SAM GREEN: Oh, itu menjengkelkan.
Apa itu tidak suka?
Oh.
Kita mulai.
Keren.
>> Jadi saya baru saja membuat fungsi ini, f, yang
akan pergi ke saat ini objek dan cetak this.x1.
Jadi jika saya hanya memanggil f oleh itu sendiri, tidak ada yang terjadi
terjadi, benar, karena tidak ada x1 lapangan di objek itu mengacu.
Tapi, jika saya katakan, x.f = f, dan kemudian saya sebut x.f (), aku akan kembali 1.
Bahwa fungsi f sekarang terkait dengan objek x,
yang memiliki kunci yang disebut x1 terkait dengan nilai 1,
jadi ketika kita sebut this.x1, itu akan menemukan sedang mencari
dan mampu mencetak nilai keluar.
Jadi itu hanya salah satu contoh dari jenis hal-hal gila
dapat Anda lakukan dengan benda-benda di JavaScript.
>> Jadi versi itu adalah Versi generik, arti
bahwa kami telah menciptakan sebuah objek menggunakan ini kurung notasi brace notation--,
rather-- dan itulah berguna jika kita hanya ingin
satu contoh dari objek tertentu, tetapi bagaimana jika kita ingin memiliki lebih dari satu
dari jenis yang sama?
Dan jawaban yang Pertanyaannya adalah, ada hal-hal
disebut kelas dalam JavaScript juga.
Kita bisa membuat fungsi yang melakukan semacam inisialisasi
untuk benda asing, dan kami akan mengatakan, seperti,
class-- saya sehingga nama dari object-- dapat digunakan kembali
sama fungsi yang menentukan itu.
Jadi apa ini akan setara untuk menciptakan sebuah benda yang
akan seperti, penjepit keriting, str, usus besar,
ini adalah string, koma, penjepit keriting.
Itu akan menjadi generik objek kita menginisialisasi,
dengan satu perbedaan berada di baris berikutnya kita membuat prototipe, yang
berarti itu adalah kunci default yang kami tambahkan ke objek kami yang
memiliki nilai yang tercantum di sini.
Artinya, ketika saya membuat yang baru Misalnya obyek MyClass ini,
itu akan memiliki pra-dibangun dalam itu nilai yang disebut str dan nilai lain
disebut myPrint, yang akan menjadi fungsi.
Mengagumkan.
>> Besar.
Jadi hal terakhir untuk mengatakan tentang JavaScript
adalah bahwa itu benar-benar berguna untuk apa disebut operasi asynchronous.
Asynchronous berarti adalah bahwa kita dapat menunggu beberapa operasi
untuk menyelesaikan sebelum kita bergerak , tapi pindah sementara kita menunggu
dan kemudian memiliki sesuatu terjadi di kemudian hari.
Dan apa yang saya maksud dengan itu adalah, Anda bisa membayangkan situasi di mana
Anda mengirim permintaan ke beberapa server web di suatu tempat,
dan itu akan mengirimkan kembali beberapa sebagian besar dari data, kan?
Dan pengguna Anda bisa menunggu di Sementara untuk itu terjadi,
dan tidak ada yang bisa terjadi pada waktu itu.
Tapi itu bukan desain besar, kan?
Anda tidak ingin halaman web untuk membekukan.
Bagaimana jika pengguna ingin klik pada menu drop-down?
Ini bukan pola desain besar.
Sebaliknya, pada dasarnya apa yang JavaScript tidak akan mengatakan,
OK, melakukan operasi ini asynchronously.
Jadi seperti, menunggu di latar belakang, dan kemudian ketika operasi dilakukan,
memanggil callback function-- memanggil beberapa fungsi,
melakukan beberapa action-- untuk sinyal bahwa operasi kami menunggu untuk mengakhiri
sudah selesai.
Dan alasan yang super kuat adalah, kita bisa melakukan sesuatu, lulus argumen,
melakukan sesuatu, dan kemudian menunggu sesuatu terjadi.
Kemudian, setelah sesuatu yang selesai dengan, kita dapat memanggil callback.
Itu benar-benar berguna karena memungkinkan kita melakukan hal-hal dengan Web Audio API,
misalnya, seperti beban sebuah file audio dari server jauh
tanpa harus menunggu untuk seluruh file audio yang akan diambil,
yang akan benar-benar buruk bagi pengalaman pengguna.
Keren.
>> Beberapa terakhir mencatat sekitar debugging, karena ini
adalah hal yang Anda akan harus melakukan sebagai bagian dari proyek Anda, dijamin.
Saya sebutkan konsol JavaScript.
Ini adalah fitur yang super berguna dari semua browser modern,
Dan kita benar-benar mendorong Anda untuk mendapatkan nyaman menggunakan konsol Anda,
jika Anda ingin mendapatkan baik di JavaScript.
Ini super berguna untuk debugging, tetapi juga
benar-benar berguna untuk mencari bagaimana menggunakan API.
Hal ini memungkinkan untuk benar-benar eksperimen mudah
tanpa harus mengetik beberapa kode, dan kemudian compile.
Anda tidak harus melakukan semua langkah-langkah.
Anda hanya dapat menulis beberapa kode menjadi garis,
dan kemudian mendapatkan umpan balik langsung pada apakah baris kode
worked-- sangat berguna.
>> Dan juga, hanya satu note-- teknis konsol JavaScript adalah contoh
dari REPL-- jadi itu R-E-P-L, REPL, yang merupakan singkatan dari membaca, mengevaluasi,
lingkaran cetak.
Anda akan mengetik beberapa hal di, itu akan membaca apa yang Anda ketik di,
itu akan mengevaluasinya, dan itu akan mencetak output, dan kemudian itu akan mulai lagi.
Yang memungkinkan Anda untuk cepat pergi lingkaran iterasi, yang benar-benar keren.
>> Saya kira terakhir nyata note-- ini adalah catatan terakhir yang sebenarnya, ya.
Bagaimana kita benar-benar menggunakan JavaScript?
Jadi pertama, kita dapat mengimpor menggunakan tag script
di bagian atas atau bawah HTML file-- di mana saja dalam file HTML,
sangat.
Dan dalam tag script, ada dua sub-cara mengimpor JavaScript.
Yang pertama adalah dengan memiliki File JavaScript terpisah
yang kita mengimpor secara keseluruhan, atau dengan memiliki luas kode seperti script
untuk memulai, dan kemudian Script backslash untuk mengakhiri.
Dan kemudian kami hanya menulis JavaScript dalam file HTML.
Mereka adalah dua cara.
Anda tidak dapat memilikinya dalam HTML.
AUDIENCE: Apakah salah satu lebih baik dari yang lain?
SAM GREEN: Pertanyaannya adalah, adalah salah satu lebih baik dari yang lain.
Jadi, ya, sebagai praktek coding gaya, dan juga itu seperti praktek desain.
Ada dua alasan mengapa mungkin lebih baik.
Yang pertama adalah, itu membuat kode Anda banyak lebih mudah dibaca jika semua HTML Anda
adalah di satu tempat, semua CSS Anda dalam tempat lain, semua Anda JavaScript
adalah di tempat ketiga.
Kanan?
Saya pikir kita harus sudah berbicara tentang hal itu di sections-- seperti apa CSS--
bahwa is-- dan kelanjutannya sering di file lain.
Jadi, serupa dari konsep di sini.
Anda juga dapat membayangkan bahwa JavaScript akan digunakan kembali pada lebih dari satu
Halaman HTML, atau mungkin banyak halaman HTML besar,
dan memiliki yang JavaScript refactored menjadi satu
mengajukan bahwa Anda dapat mengimpor menjadi lebih dari satu tempat
memungkinkan kode menjadi cara yang lebih dipertahankan.
Anda bisa membayangkan membuat satu mengubah ke JavaScript
dan harus mengubahnya 100 file yang berbeda.
Dan sebaliknya kita bisa mengubahnya dalam satu, yang merupakan cara yang lebih kuat.
Apakah saya menjawab pertanyaan Anda?
Keren.
>> Kami juga dapat mengetik ke konsol, seperti yang telah kami sebutkan sebelumnya.
Dan lagi, satu note-- lalu Web Audio dibangun di,
Anda tidak perlu memuat apa-apa.
Keren.
Apakah ada pertanyaan, apakah Anda memiliki pertanyaan lagi tentang JavaScript,
sebelum kita melanjutkan?
>> AUDIENCE: [tidak terdengar]
SAM GREEN: Baiklah, keren.
Jadi sekarang dia akan berbicara tentang API.
>> Hugh Zabriskie: Cool.
Terima kasih, Sam.
>> SAM GREEN: Tentu.
Hugh Zabriskie: Awesome, sehingga kita akan bergerak dari JavaScript.
Jadi kita sudah bicara tentang beberapa esensi JavaScript,
dan mereka adalah variabel, fungsi, benda, fungsi sebagai variabel,
pemuatan asynchronous.
Ini semua adalah hal yang Anda akan lihat ketika Anda menggunakan Web Audio.
Jadi kami hanya akan berbicara tentang hal pertama pada tingkat tinggi.
>> Ini adalah API, jadi itu sesuatu yang dibangun, seperti kata Sam,
tepat ke JavaScript yang Anda gunakan di konsol.
Dan itu sebenarnya seperti C ++ kode yang benar-benar dibangun ke Chrome
dan Firefox, dan semua browser ini.
Jadi gagasan utama dengan Web Audio adalah bahwa Anda memiliki
jenis pipa audio, kan?
Jadi data audio Anda datang dalam dalam beberapa bentuk.
>> Ada jenis tiga forms-- utama Anda memiliki osilator, yang
menciptakan gelombang sinus, gelombang kosinus, kita akan melihat bagaimana yang bekerja.
Satu lagi yang sangat umum, tentu saja, adalah MP3.
Jadi mungkin Anda mulai dengan lagu, dan kemudian Anda
ingin melakukan penyaringan untuk itu dan output
itu-- yang bisa menjadi sumber yang mungkin.
Dan kemudian benar-benar keren satu adalah mikrofon.
Sehingga Anda dapat menggunakan beberapa sangat panggilan dasar dalam JavaScript
untuk mendapatkan akses ke mikrofon, dan jadi jika Anda
ingin membuat sebuah aplikasi seperti detektor lapangan,
misalnya, yang mengambil di suara Anda dan angka keluar
yang pitch-- cara yang sangat mudah untuk itu.
Anda dapat hanya jenis membacanya di, mencari tahu frekuensi,
dan kemudian output nomor.
Jadi kita akan melihat bagaimana yang bekerja, juga.
>> Tujuan dasarnya adalah dimana data audio output.
Jadi secara umum, itu seperti speaker laptop Anda.
Pilihan lain adalah seperti a ScriptProcessorNode--
kita akan sampai ke node dalam second-- tetapi pada dasarnya,
baik Anda meletakkan suara keluar melalui komputer Anda melalui speaker,
atau Anda jenis rekaman itu, sehingga Anda menyimpannya sebagai data audio.
Jadi mungkin jika seseorang menciptakan musik di app dan kemudian
Anda ingin merekam itu dan mungkin seperti ekspor ke SoundCloud, untuk example--
yang akan menjadi salah satu cara untuk melakukan itu.
Semua hal menyenangkan, yang akan kita bicarakan,
terjadi antara dua titik tersebut, di mana kita memuat dalam musik
dan kemudian output.
>> Jadi aku akan berbicara tentang lima tahap produksi audio dalam satu detik.
Kami memiliki hal ini disebut sebuah AudioContext, yang
adalah wrapper kecil ini kita lihat di sini.
Pada dasarnya apa yang AudioContext is-- jika kita pergi ke JavaScript konsol sekarang,
kita dapat membuat satu sekarang.
Hanya sebuah contoh dari REPL, kan?
Kami membaca, mengevaluasi, dan mencetak.
>> AudioContext adalah negara global.
Ini struct, itu sebuah objek di sini, dan itu membuat informasi
tentang hal-hal yang terjadi pada layar yang berkaitan dengan audio.
Salah satu contoh adalah waktu saat ini.
Ini memberitahu Anda nomor detik, sangat tepat,
sejak halaman web dimuat.
Jadi ini adalah benar-benar berguna sedikit properti yang dapat Anda gunakan.
Ini baca only-- saya pikir benar-benar Anda dapat mencoba untuk mengatur nilai.
Ini akan memberitahu Anda mengaturnya, dan kemudian jika Anda mencetaknya
again-- itu tidak benar-benar cukup bekerja.
Jadi ada hanya-baca properti di JavaScript.
Ini benar-benar berguna jika Anda jenis sinkronisasi
banyak yang berbeda informasi, ketika Anda
jenis bermain suara yang berbeda.
>> Lain yang benar-benar berguna adalah tujuan konteks.
Jelas, jika Anda tertarik, menjadi mencoba ini di konsol kanan Anda sendiri
sekarang.
Jadi ini adalah AudioDestinationNode.
Pada dasarnya apa ini mengatakan adalah, di mana output akan?
Jadi ada dua pilihan nyata di sini.
Biasanya default hanya speaker Anda,
sehingga AudioDestinationNode pada dasarnya hanya mengatakan
ada nol output untuk suara datang, dikirim ke speaker.
Jadi secara umum, Anda tidak harus bermain dengan itu.
Jika Anda tertarik benar-benar menggunakan yang ScriptProcessorNode untuk merekam,
pasti menembak saya email kemudian karena itu
sedikit lebih rumit.
Namun umumnya, Anda hanya jenis keluaran suara dalam beberapa bentuk.
Jadi keren, kami akan melompat kembali ke sini.
AUDIENCE: Maaf.
Hugh Zabriskie: Ya.
AUDIENCE: Saya tahu Anda mengatakan untuk berbicara untuk nanti tentang rekaman.
Anda dapat antarmuka bahwa dengan Pro Tools?
>> Hugh Zabriskie: Dengan Pro Tools?
Mari kita lihat.
Saya rasa tidak.
Jadi akan antara klien, yang merupakan JavaScript
konsol, dan Anda yang sebenarnya komputer, umumnya
sesuatu yang baik dari terlarang, jika Anda
akan, jenis dengan sifat the-- itu semacam hal desain,
tetapi Anda mencoba untuk menjaga browser terpisah dari komputer yang sebenarnya pengguna.
Umumnya, satu-satunya hal yang Anda dapat Akses adalah mikrofon atau kamera.
Anda tidak dapat, saya tidak berpikir, menggunakan Pro Tools.
Namun, jika Anda buat trek di Pro Tools,
diekspor itu, Anda bisa memuat bahwa di sini, menyaring, misalnya,
proses itu, dan mencatat bahwa menjadi Audio Destination-- atau, no-- sebuah Sphere
Processor Node.
Dan kemudian dari sana, Anda bisa ekspor yang ke SoundCloud, Anda
bisa kirim dalam email, atau apa pun yang Anda suka dari sana.
>> Tapi ada jenis penghalang sedikit antara membuat musik di komputer Anda
dan membuat musik online.
>> SAM GREEN: Dan itu tidak unik untuk API ini.
Ini adalah fitur keamanan Chrome, dan Saya pikir setiap browser modern lainnya.
Browser mandiri.
Jadi misalnya, halaman web tidak bisa menggunakan JavaScript untuk mengubah suara
pada pada speaker Anda, misalnya.
Atau tidak dapat mematikan komputer Anda.
Dan tidak ada titik peralihan antara dua hal, benar,
sehingga baik Anda memiliki abstraksi lengkap,
atau Anda membuka lubang keamanan membiarkan
programmer dengan niat buruk melakukan apapun yang mereka inginkan dengan laptop Anda.
Dan itulah mengapa Chrome adalah mandiri.
>> Hugh Zabriskie: Ya.
Apakah itu masuk akal?
Keren keren.
Aku hanya akan menunjukkan salah satu contoh.
Hal ini cukup banyak seperti sejauh yang Anda bisa, dalam hal
mengakses komputer pengguna.
Jika Anda memiliki keyboard USB terpasang, Anda dapat menggunakan sesuatu yang disebut Web
MIDI API, yang kita tidak akan benar-benar berbicara tentang di sini,
tapi ini adalah API lain yang dibangun ke setidaknya Chrome-- lagi,
ini adalah mengapa kita mencintai Chrome-- Saya pikir Firefox atau Safari,
ini merupakan hal yang mudah untuk browser yang berbeda memiliki google--
dukungan yang berbeda yang API mereka telah menerapkan.
Tetapi jika Anda ingin pasang di keyboard dan bekerja dengan informasi itu,
jenis mengirim keyboard informasi ke komputer
dan kemudian menggunakan online yang, API ini adalah di mana Anda akan bekerja itu.
>> Keren.
OKE.
Jadi, cepat pindah di sini.
Bagaimana kita lakukan pada waktu?
>> SPEAKER 1: Sekitar 15.
>> Hugh Zabriskie: 15 menit lagi?
OK keren.
Jadi kita akan berlomba depan di sini.
>> Jadi pada dasarnya, titik utama berpikir ini sebagai pipa
adalah bahwa setiap langkah dalam pipa adalah serangkaian node audio.
Sumber kami, katakanlah, adalah sebuah osilator.
Kita perlu membuat simpul osilator.
Dan itu hanya jenis dari function-- kecil
dan mereka semua didasarkan keluar dari konteks audio yang di sini.
>> AUDIENCE: Ketika kata osilator, artinya
itu benar-benar harfiah pergi dari dua kutub yang berbeda bolak-balik?
>> Hugh Zabriskie: Tidak, itu seperti representasi digital.
Ini benar-benar dilaksanakan di C ++.
Aku benar-benar tidak tahu spesifikasi bagaimana hal itu benar-benar diterapkan,
tapi semua ini bekerja sebagai data biner.
Sebenarnya, ya.
Yang akan berkata, aku bisa sebenarnya, jika Anda tertarik,
Aku bisa mengirimkan lebih sedikit informasi tentang bagaimana bentuk gelombang
disimpan memiliki format digital.
OK keren.
>> Jadi kita menghasilkan nada seperti sinus gelombang atau sesuatu seperti itu, mungkin
440 Hertz.
Kami menciptakan sebuah osilator.
Jika kita ingin mengatur volume, kita menghubungkan apa pun untuk GainNode sebuah,
yang bisa kita lakukan dengan .creategain.
Yang menetapkan volume Anda.
Anda dapat melewati itu ke setiap yang lain options-- baik,
sehingga sumber penyangga audio yang simpul adalah di mana Anda mungkin
menyimpan MP3 yang telah Anda dimuat di.
>> Biquad filter untuk menyaring jika Anda ingin mengambil semua dasar keluar
dari lagu, atau sesuatu seperti itu.
Allah melarang Anda ingin mengambil dasar dari sebuah lagu.
Dan AudioDestination node, sekali lagi, seperti di mana finalisasi kita.
Jika Anda pernah tertarik melihat semua kemungkinan opsi yang berbeda,
hanya pergi ke tab dan membiarkan auto-lengkap datang.
Dan jika Anda buat, Anda akan melihat semua hal yang berbeda yang dapat Anda buat.
Anda dapat membuat dinamis prosesor naskah,
Saya bahkan tidak tahu apa yang adalah, untuk mencampur saluran merger
dan splitter saluran dan semua itu.
Keren.
>> Jadi ini hanya sebuah contoh pipa.
Jadi kita memiliki tiga sumber datang.
Mungkin ini bentuk gelombang, mungkin ini adalah MP3.
Salah satu yang akan melalui filter, satu sama lain
mendapatkan terdistorsi lain panning seseorang kiri dan kanan.
Anda dapat melakukan segala macam hal dan mereka semua bercampur di sekitar bersama-sama,
dan kemudian keluar datang audio pada akhir, sebagai tujuan.
Ini adalah contoh dari apa yang lebih rumit Web kode Audio terlihat seperti.
Anda sedang menciptakan semua ini objek yang berbeda tepat di sini-
Saya tidak yakin ini.
Tidak, itu tidak memperbesar.
OKE.
>> SAM GREEN: Anda melakukan kontrol, Gulir-Up.
Hugh Zabriskie: Kontrol Scroll--
SAM GREEN: Tidak, tidak.
Kontrol--
>> Hugh Zabriskie: Oh, Control, Gulir?
Oh, Gotcha.
Ya.
Wow, nggak, nggak.
OKE.
Saya tidak akan melakukan itu.
>> Jadi ya, dalam hal ini pertama Bagian di sini, Anda melihat
kita menciptakan semua ini berbeda node dari konteks.
Kami hanya piecing mereka bersama-sama di bagian kedua
oleh fungsi ini disebut Connect.
Itu benar-benar kunci fungsi dalam Web Audio.
Ini hanya berarti setelah Anda melakukan sesuatu dengan suara dalam satu simpul,
menyebarkannya ke node berikutnya.
Jadi kita memiliki sumber, menghubungkan ke analyzer,
analyzer melakukan sesuatu dengan itu, ia pergi ke distorsi, dan sebagainya,
dan untuk tujuan di kanan bawah sini.
Keren.
OK, jadi kami akan terus bergerak pada.
>> Pipeline-- lagi, ini adalah pipa yang paling umum,
jadi kita berbicara tentang semua hal ini seperti distorsi, panning, semua hal ini.
Jika Anda benar-benar tertarik dalam menggunakan hal Pro Tools,
mereka mungkin menarik bagi Anda.
Jika tidak, mungkin Anda hanya ingin memutar suara,
atau mungkin Anda hanya ingin mengatur volume suara.
Mereka adalah dua jenis yang paling umum pipa produksi audio.
>> Sekali lagi, cara Anda dapat mengambil di sebagai oscillator-- begitu, mari kita
melakukan demo itu di sini.
Jadi kita akan membuat konteks audio sederhana di sini,
dan dari bahwa kita akan untuk membuat osilator kami.
Sehingga, sekali lagi, kami hanya akan menelepon Buat Oscillator.
Kita akan mengatur frekuensi pada itu, 440 Hertz, favorit semua orang.
Kemudian kita menghubungkan bahwa untuk tujuan point-- yang pembicara, sehingga
tujuan konteks.
Akhirnya, kami hanya mengatakan, mulai nol detik dari sekarang, dan kita telah terdengar?
>> [Berdering]
>> Hugh Zabriskie: Di sini kita pergi.
Itu hanya gelombang sinus.
OK keren.
Dan kemudian kita akan menghentikan itu.
>> AUDIENCE: Mana umpan balik yang datang dari?
>> Hugh Zabriskie: Umpan balik?
Oh, mungkin mikrofon kami.
Jadi ya, itu bagaimana Anda melakukannya.
Dan sebenarnya, jika aku punya terus berjalan, Anda
bisa memiliki frekuensi nilai seperti itu berjalan,
jadi itu hal yang menyenangkan untuk bermain-main.
Keren.
Itu selalu salah satu yang indah untuk menyajikan.
>> SAM GREEN: Kami tidak berpikir tentang itu, apakah kita?
Hugh Zabriskie: Ya, itu adalah salah satu jahat.
Jadi, penyangga loading-- saya akan menunjukkan contoh yang di akhir.
Itu loading MP3.
Dan mikrofon, Anda menggunakan hanya fungsi disebut Navigator.getUserMedia ()
untuk meminta akses ke pengguna mikrofon untuk informasi tersebut.
>> Berikut ini penyaringan, aku akan terus bergerak dari ini.
Ini adalah tingkat yang cukup tinggi, tapi filter hanya memungkinkan Anda untuk
>> [Bip]
Penyaringan juga memungkinkan Anda untuk membuat hal-hal seperti pink
kebisingan, kebisingan coklat, white noise.
Jika Anda ingin membuat kebisingan murni, yang beberapa orang suka main-main dengan,
Anda dapat menggunakan Web Audio penyaringan untuk melakukan itu.
>> Audio Panning-- jadi bayangkan jika Anda sedang menulis sebuah permainan
dan Anda ingin suara untuk terdengar seperti itu datang, seperti,
menembak di layar, Anda dapat menggunakan panning audio
untuk membuat semacam ini kerucut, yang like-- itu cukup Mathy,
tapi itu sebenarnya benar-benar keren jika Anda mendapatkannya bekerja,
dan ada beberapa yang baik tutorial di atasnya saya dapat mengirimkan.
Pada dasarnya, Anda dapat jenis dari membuat suara
dari sesuatu yang terjadi dengan cara 3D.
Dan jika Anda memiliki minat DJ, Anda bisa mulai pencampuran dan lintas memudar lagu.
>> Ini hanya beberapa yang sangat dasar kode, pada dasarnya apa yang saya lakukan sebelumnya.
Ini menetapkan volume osilator, jadi kami membuat osilator kami
yang menciptakan gelombang.
Kami membuat GainNode kami, mengatur frekuensi kami,
dan kemudian menghubungkan osilator ke GainNode, yang kemudian pada dasarnya berubah
berapa banyak sinyal diizinkan melalui.
Tapi sungguh, itu digital hal, sehingga lebih hanya-- ya.
Itu bukan apa yang sebenarnya terjadi, tapi itulah yang terjadi dalam kehidupan nyata
dengan gain.
>> AUDIENCE: --quantization parameter volume yang?
Hugh Zabriskie: Maaf?
AUDIENCE: Apakah ini parameter volume yang terkuantisasi?
Hugh Zabriskie: Ya.
Dan ini adalah salah satu hal yang saya benar-benar kekurangan pada pengetahuan saya,
bagaimana keuntungan bekerja pada tingkat digital.
Aku tahu dengan sebenarnya sinyal, itu pada dasarnya
mengendalikan berapa banyak Anda memperkuat sinyal.
Jadi, ya.
Saya akan mengirimkan informasi lebih lanjut tentang itu, karena aku akan penasaran sebenarnya
tahu lebih banyak tentang itu.
Tapi pada dasarnya parameter adalah, salah satu adalah fold-- yang
yang signal-- keras dan nol ada sinyal, atau Anda tidak akan mendengar suara apapun.
Kami akan melewatkan waktu demo untuk karena itu pada dasarnya apa yang saya lakukan sebelumnya.
Dan lagi, Context.Destination yang adalah node tujuan audio.
Mengagumkan, OK.
>> Jadi aku akan melakukan cepat dua demo.
Bagaimana kita lakukan pada waktu?
>> SPEAKER 1: Sekitar 10 menit.
>> Hugh Zabriskie: 10 menit?
Besar!
Mengagumkan.
>> Jadi yang pertama aku akan jangan, itu disebut My Song Favorit.
Jadi ini hanya sedikit HTML JavaScript.
Kita akan memiliki dua tombol pada halaman memutar lagu favorit saya
dan menghentikan lagu favorit saya.
Aku akan mengubah ini.
>> AUDIENCE: Tutup mikrofon Anda.
>> Hugh Zabriskie: Ya.
Dan aku sudah dimuat di sini script yang basically--
dan ini benar-benar berguna untuk loading MP3,
jadi ini hanya membuat memuat MP3 cara yang lebih cepat.
Itu pada dasarnya hanya pembungkus.
Itu hanya membuat proses memuat di MP3 jauh lebih cepat,
jika Anda menggunakan permintaan HTTP, jenis seperti apa yang kami lakukan
pada bagian saat ini ditetapkan dengan Server.
Ini benar-benar jelek, Anda tidak ingin melakukannya.
>> Jadi orang ini, Boris Menengah Umum, menulis benar-benar alat kecil yang berguna disebut BufferLoader.
Semua Anda lakukan adalah hanya lulus dengan konteks, Anda lulus list-- sebuah
atau, ya, itu daftar di JavaScript?
SAM GREEN: Sebuah array.
Hugh Zabriskie: Oh, itu adalah array, itu benar.
Ini sebuah array dari jalur untuk file yang berbeda.
Dan kemudian Anda lulus fungsi.
Ini adalah callback kita bicarakan tentang dengan asynchronous memuat.
Yang akan dipanggil sekali file dimuat.
Dan fungsi yang yang disebut ketika file ini dimuat mengambil sebagai perimeter sebuah
array buffer dimuat.
Jadi yang terjadi di sini.
Pada dasarnya, BufferList adalah akan menjadi salah satu value--
atau itu akan menjadi array panjang satu, yang memiliki di dalam indeks
nol seluruh file dimuat dari MP3.
Jadi apa yang saya lakukan ketika saya selesai loading, saya hanya
menciptakan sumber penyangga, yang merupakan sumber penyangga simpul audio.
Langkah berikutnya adalah saya memuat di source.buffer sebagai penyangga dimuat penuh
dari BufferList-- itu banyak buffers--
dan kemudian Anda menghubungkan audio yang penyangga ke tujuan.
Jadi apa yang akan lakukan hanya hanya menempatkan MP3
langsung melalui ke output, dan mulai segera
setelah mendapatkan panggilan ini.
>> Keren, jadi mari kita lihat ini terjadi dalam tindakan.
Saya [tidak terdengar] di sini, mari kita lihat.
Jadi aku hanya akan mulai server dasar.
Itu sesuatu yang Yang perlu Anda lakukan jika Anda
membuat permintaan untuk loading file.
Aku akan memulai server dasar.
Ini pada dasarnya adalah seluruh Anda PSET sekarang dalam satu baris,
tapi itu baru mulai server pada port 80/80.
Jadi kami pergi ke sini, kita akan memuat 80/80,
kita akan pergi ke My Song Favorit.
Jadi jika aku memukul "Bermain saya lagu favorit "sekarang,
itu akan memuat saya lagu favorit dan bermain itu--
[MUSIK - THE EAGLES, "HIDUP DI CEPAT JALUR"]
--kini terjadi menjadi "Life in Fast Lane "oleh The Eagles.
Sekarang, saya bisa memukul "Hentikan saya lagu favorit "dan memutar ulang.
>> [MUSIK - THE EAGLES, "HIDUP DI CEPAT JALUR"]
>> Dan jika saya pergi ke konsol, karena Saya menggunakan variabel global di sini
untuk melacak nilai ini, itu benar-benar sekarang akan diakui di konsol.
Sehingga otomatis menciptakan bagi saya.
Jadi itulah yang bermain sekarang, dan saya hanya bisa memanggil source.stop ()
itu.
Nah, Anda tahu apa?
Hanya begitu kalian telah mendengar ini song-- Anda mungkin mengenali lagu ini.
>> [MUSIK - Rick Astley, "PERNAH AKAN MEMBERIKAN ANDA UP "]
[MUSIK - THE EAGLES, "HIDUP DI CEPAT JALUR"]
Kami sudah sekarang semua telah Rickrolled.
OK, besar, pindah.
Keren.
Jadi pada dasarnya ini adalah contoh dari hanya bagaimana Anda dapat memuat MP3 file--
[MUSIK - THE EAGLES, "HIDUP DI CEPAT JALUR"]
--dan memainkannya, dan berhenti dan mulai itu.
Saya bisa melakukan lebih banyak [tidak terdengar]
>> Yang terakhir saya akan lakukan adalah, Saya akan menunjukkan [tidak terdengar].
>> [MUSIC PLAYING]
>> Ini seperti, ogg.wave.mp3.
Saya pikir, jika saya ingat benar, Aku telah lari ke beberapa masalah dengan .m4a,
tapi aku tidak yakin tentang hal itu.
Saya pikir mp3.wave--
>> [MUSIK - Rick Astley, "PERNAH AKAN MEMBERIKAN ANDA UP "]
>> OK bagus.
Saya seharusnya tidak mengatakan itu.
Pokoknya, halo.
Jadi kita memiliki ini terbuka.
Jadi sekarang semua saya lakukan adalah, saya pada dasarnya diciptakan sintaks dasar untuk menciptakan musik.
Jadi jika saya melakukan sesuatu seperti, menambahkan g4 pada 1 2, apa itu artinya bahwa,
menambahkan catatan piano, G4, yang merupakan keempat G
di atas piano dari bawah.
Jadi ini adalah jenis MIDI berbicara, sehingga bagi mereka yang berbasis musik,
ini catatan hanya MIDI.
>> AUDIENCE: Itulah G dari C Tengah, kan?
>> Hugh Zabriskie: ini adalah G atas Tengah C, itu benar.
>> AUDIENCE: Di atas Tengah C.
>> Hugh Zabriskie: Ya.
Sebenarnya, ya.
Saya pikir saya benar-benar membuat menjadi salah satu [tidak terdengar],
jadi ini mungkin satu oktaf di atas itu.
Jadi mari kita lihat.
Jika saya memukul Play--
[PIANO BERULANG CATATAN]
--we're akan mendengarnya.
Idenya adalah bahwa hal itu beroperasi seperti baris perintah akan,
jadi jika saya naik dan turun pada keyboard, Anda
dapat kembali ke sebelumnya perintah, yang cukup berguna.
Dan di bawah ini adalah daftar lagu, yang semuanya berjalan pada lingkaran.
>> AUDIENCE: Kau dengan asumsi 88-tombol keyboard pada itu, kan?
>> Hugh Zabriskie: Pertanyaannya adalah, saya mengasumsikan keyboard 88-key,
dan ya, saya.
Apa yang saya lakukan adalah saya pada dasarnya mengambil sampel 88
dari piano, satu untuk setiap catatan.
Dan setiap kali Anda mendengar catatan dari sekarang,
yang sebenarnya adalah sebuah lingkaran yang terlihat like-- ini semakin dimainkan pada lingkaran,
jadi untuk setiap catatan, ini berjalan.
Yang terjadi adalah, saya membuat buffer lagi,
Saya membuat simpul keuntungan untuk mengatur volume.
Ini hanya benar-benar cara rumit untuk mengatakan saya
menyimpan buffer di source.buffer a.
Saya memberikan gain, saya menghubungkannya ke gain,
gain terhubung ke output, dan kemudian saya memainkannya.
Jadi itu adalah semacam proses mengambil di sumber penyangga.
>> AUDIENCE: Dapatkah Anda benar-benar mengambil suara kering dan membuatnya basah [tidak terdengar]?
>> Hugh Zabriskie: Anda bisa, ya.
Ada re-kata kerja, ada delay, distorsi.
Anda pada dasarnya dapat memasukkan apa pun di antara di sandwich yang of-- baik,
pipa adalah metafora yang lebih baik, tetapi Anda dapat menambahkan apa-apa dalam hal itu.
Keren.
>> Jadi saya akan menyelesaikan demo di sini untuk memberikan rasa
hanya banyaknya kali Anda dapat menjalankan fungsi yang sekaligus.
Jadi aku akan menghapus ini.
Aku akan membuat generator itu-- pada dasarnya apa yang does-- ini benar-benar
semacam syntax-- rumit tapi itu akan menghasilkan catatan dengan cepat,
dan hanya mulai bermain mereka seperti mengevaluasi mereka.
[Interposing PIANO]
>> Jadi kami hanya bisa membuat musik kecil di sini.
[Interposing PIANO]
>> Jadi apa perintah ini tidak, misalnya, adalah
dibutuhkan tiga catatan untuk piano dan kemudian menempatkan mereka pada B3.
Sintaks ini mungkin membuat rasa sedikit lebih
untuk mereka yang memiliki background musik di sini.
>> Saya dapat menambahkan kick drum.
Aku bisa--
>> [Interposing INSTRUMEN]
>> --Hanya bermain-main dengan itu.
>> Jadi Anda dapat make--
[Interposing INSTRUMEN]
Satu yang sedikit lebih menjengkelkan.
[Interposing INSTRUMEN]
>> Sehingga secara acak menambahkan cymbal kering pada setiap catatan 16, dengan 16%
[Tidak terdengar].
>> [Interposing INSTRUMEN]
>> Ya, jadi cara ini works-- itu selalu di 4: 4.
[Interposing INSTRUMEN]
>> Ya, jadi empat penjuru, dan 16/8.
[Interposing INSTRUMEN]
>> Jadi rata-rata, Anda mendapatkan 60% dari hits di catatan 16.
>> Anyways, ini hanya jenis untuk memamerkan
beberapa hal yang Anda bisa membangun dengan Web Audio API.
Ini benar-benar kuat, itu benar-benar cepat, dan Anda dapat membuat banyak hal keren
dengan itu.
Jadi sekali lagi, setiap pertanyaan yang Anda miliki, email myself-- Hugh-- atau Sam,
dan jujur, Google memiliki satu ton sumber daya yang baik.
Pertanyaan terakhir?
Ya.
>> AUDIENCE: Jadi Anda dapat mengakses mikrofon built-in.
Bagaimana jika Anda ingin menggunakan mikrofon yang lebih baik?
Hugh Zabriskie: Jika Anda ingin menggunakan mikrofon yang lebih baik?
Jadi sekali lagi, ini adalah bagian dari abstraksi antara Chrome
dan sisanya dari komputer Anda.
Kecuali itu tersedia melalui API, seperti Web MIDI API,
Anda mungkin bisa menemukan beberapa hacks, tetapi umumnya tidak layak.
>> SAM GREEN: Anda dapat also-- semua Chrome tahu
adalah apa mikrofon bawaan Anda adalah, dan ia mengakses itu.
Jadi jika Anda memiliki mikrofon Anda bisa ditetapkan sebagai mikrofon bawaan komputer,
Anda bisa mengaksesnya dengan cara itu dan itu mungkin akan bekerja.
Hugh Zabriskie: Itu titik yang baik.
Aku belum pernah mencoba itu, tapi Anda mungkin bisa baik
of-- jika Anda mengarahkan speaker input, Anda mungkin bisa melakukan itu, ya.
>> Pertanyaan terakhir?
Keren.
Nah terima kasih guys begitu banyak untuk menonton.
Aku Hugh.
SAM GREEN: Saya Sam.
Hugh Zabriskie: Dan ini adalah CS50.