SAM格林：你好，大家好。 歡迎來到我們的研討會。 我叫山姆。 休·扎布里斯基：我休。 SAM格林：我們今天要談 關於JavaScript和Web音頻API。 剛開始出來，這是一個大綱 我們的研討會議程。 我們將先來談談 為什麼你應該有興趣的網站 音頻API，這是為什麼的JavaScript 你需要它的語言， 再談談的JavaScript essentials--這麼喜歡， 指導您完成一些 語言的基本知識， 再談談 在較高水平的音頻的API。 然後，休將談論一些 音頻製作的階段 然後演示該真棒序 項目他建立並顯示你的代碼。 然後，我們將有時間 在最後的人的問題 誰在這裡居住。 休·扎布里斯基：酷。 SAM格林：酷。 休·扎布里斯基：酷。 我將備份。 SAM格林：那麼，首先第一件事情。 所以，偉大的事情之一 關於網絡音頻API 是，有不需要的設置。 它配備內置在 大部分現代瀏覽器， 包括Chrome瀏覽器，封邊，整體 一堆others--所有的人 那大部分 人們今天使用。 所以沒有成立， 除了剛開 Web服務器去，為 你就可以開始工作 您的項目，這是偉大的。 我們建議漂亮 巨資您考慮 使用Chrome瀏覽器 JavaScript的Web開發， 只是因為它的開發者 工具是真正的強者。 由於正是我們所說的一個例子 說打開你的JavaScript console--如果你去到Chrome瀏覽器 而且你看任何網頁， 你左擊 檢查元素，然後 你去這個小下拉 在這裡，你點擊控制台， 你會看到打開了看起來 很多喜歡在命令提示符下，你 在你的Mac可能會看到，或者在標識。 就這樣，我們就可以 輸入命令在這裡，就像清除， 和其它命令那樣。 我們可以創建變量，如 我們將在JavaScript中看到。 所以什麼我們可以做的 JavaScript中，我們可以通過控制台執行， 這就是一個超級方便的方法 開始的API玩弄 並獲得舒適 JavaScript的了蝙蝠的權利。 無需成立， 這是非常好的。 涼。 真棒。 所以，只是一件事的補充。 如果您有任何questions--有 你們中許多人誰不住在這裡， 隨時以電子郵件us--這些 是我們的電子郵件地址。 如果您有問題 你不想問我們， 就像，哦，我有一個bug 在我的代碼，或東西 這是一個更具體一點， 也許首款谷歌它。 有很多偉大的資源 關於網絡音頻API在那裡。 這是真的很好 記錄和它的存在 使用一噸的人 工業和人誰是剛剛 建立有趣的東西留給自己。 所以應該有很多 資源在那裡。 真棒。 酷，那麼，為什麼網絡音頻API？ 此圖是一點點 的使用方法的演變 聲音在網絡上在持續增長。 BGSOUND像原始的HTML標籤 Internet Explorer使用的支持。 它只能用於非常基本的聲音， 功能不是很強大的， 你不能這樣做 複雜的排序， 或控制時，聲音開始 停了下來非常強勁。 所以，這不是特別 發達。 那之後，閃存 來到along--其中， 我敢肯定，你們都熟悉 與Flash--也許不是它是如何工作的， 但你肯定看到了。 你必須更新您的Flash 插件，所有的那種東西， 那肯定擴大了範圍 功能是可用。 但是，讓用戶安裝 插件是肯定 一個缺點，包括Flash 在應用程序中，對不對？ 因為那時你依賴 用戶會並發現這個插件， 而且很可能被打開 關閉的這個額外的步驟 他們要好好利用您的應用程序。 然後可能有一個更新 那會破壞你的整個應用程序， 並且它最終是一個夢魘 對於開發者也。 所以這是一個路障。 並在那之後走過來， 在HTML音頻標籤， 是更現代的HTML--一種特性，它 當然允許有更多的東西， 但即使是事情可以做 有一點點有限的剛 作為事情的結果 該HTML是可以勝任的。 所以當JavaScript的 API時，網絡音頻的API， 成為標準 跨瀏覽器的做法， 真正擴大了集 對開發者的機會 真正進入建設 很酷的東西的網頁。 很長一段時間曾有 一直很強大的工具 原生音頻應用， like--殊不知GarageBand中， 然後明明有更 專業音頻混合應用， 而這樣的東西。 但是，沒有一個 真正的好Cloud--不 雲計算，是啊，我猜 Cloud--基於網絡的平台 這將讓開發者 構建人申請 做混音。 當他會告訴你 後，網絡音頻API 允許真厲害 東西發生真正簡單， 這是很酷。 所以這是該指令，你為什麼 應該注意研討會的休息， 基本上。 而現在，我要談談 一些JavaScript--只是基本要素 的語言，以便 我們可以將在同一頁上 當我們談論的 API有點晚。 涼。 所以，這是一個概要。 我忘了這是在這裡。 是啊。 休·扎布里斯基：有兩個幻燈片在這裡。 SAM格林：這是匯總 的一些限制 其他具有約束力，老辦法。 然後現在，我們有這些東西。 涼。 真棒。 因此，JavaScript的要領。 首先第一件事情，有一個 漂亮顯著差異 在JavaScript與在 像C語言，在路上 該變量的創建。 因此，在C，我們已經習慣了有 輸入我們的變量，對不對？ 我的意思不是喜歡的類型 鍵入這些，我的意思是類型 就像給它們分配一個類型 - 意思 就像，一個int，一個float，一個char。 在C語言中，我們真的用 不必創建一個變量 然後堅持這種類型的 我們使用該變量整個時間。 並且不一定是差， 但它可能很難使用。 其中一個很酷的功能 JavaScript的是 該變量是什麼所謂 “動態類型”，這 意味著我可以創建一個 與語法的變量， VARx前提等於5，例如。 這種獨創 一個整數變量 - 正下方 引擎蓋somewhere--但我 可以改變的變量 指一個串 沒有做任何事情一樣 創建一個新的變量。 我不需要擔心 有關類型變化。 JavaScript的人都知道類型的 改變，並且動態地發生這種情況。 所以，有優惠 而缺點是， 誰在擔任人 JavaScript的一段時間可能知道。 有些時候， 你可能會意外地 改變一個變量的類型和 不處理這種類型的變化， 然後你的JavaScript 可以crash--或異常 被拋出，因為你將有 錯誤的類型，當你想到一種類型。 涼。 因此，scoping--這就好比，如果我們 記得最初幾週在使用過程中， 指的是如何看見一個變量 是和在代碼的什麼區域。 所有這一切看起來非常相似， 它看起來C.方式 所以變量一般範圍 在一個函數中大括號內， 然後還有 全球範圍的變量 are--如果你寫一個變量 一個功能以外， 這將是在整個文本中可見。 之間的一個區別 的JavaScript和C，特別是 是，如果你聲明一個全局 在文本文件中變量的任何地方 它在任何函數可見 內的文​​本文件。 這是正確的，對不對？ 休·扎布里斯基：是的。 SAM格林：所以這也是一個小 位時髦相比，C， 我們一直有我們的 上述地方變量定義 他們使用。 這不是真實強制一條規則 了，所以，有一點點不同。 而且目的也只是再次強調， 全局與局部variables-- 非常類似於C.你可以有 兩個變量具有相同名稱， 並有他們的一個名字被隱藏 由一個局部變量，如果其中一 是全球性的。 因此，類似那種 的問題，你們中的一些 可能已在一些碰上 您的問題至今集。 酷，所以這是變量。 控制流程，意思一樣， 如果-else--邏輯stuff--和循環。 所以下手，這就是的if-else 聲明看起來像在JavaScript中。 的各種事物的位置 上的線並不重要。 這只是其中一項公約 為方式，我們的結構代碼。 就像在C，我們有一個 “的話，”一個括號聲明。 這不是我的意思做。 我再次做到了。 休·扎布里斯基：試圖退出？ SAM格林：不，我 只是想進行放大。 不要緊 因此，我們有一個“如果”語句，並 我們有一個條件在它的內部 計算結果為真或假， 並且確定是否 我們進入代碼塊。 同樣地，我們有一個else-if和 一個else，就像我們在C.使用 你也應該很舒服 馬上與循環蝙蝠， 因為他們也期待 很像C相。 但是，你會再次發現，我們 有不是int初始化， 我們有變種的初始化。 我猜你有 要小心，使 確保您不會更改值 我從一個int為字符串， 例如，因為那將 導致怪異的行為，你可能不 期望。 但是，這應該是 很熟悉，也是如此。 因此，這就是事情開始 得到一點點瘋狂的JavaScript 人誰是從去 C的背景有功能 在JavaScript中，並有一個辦法 聲明函數，看起來 排序的類似於C，和 然後還有另外一個， 看起來種不同。 第一個版本， 我們可以在這裡看到， 是一種類似C，其中， 我們說，這是一個函數， 給它一個名字，給 參數的數量， 的功能，然後將內容 去那些大括號內。 我們將看到的一個例子 在短短的第二個參數。 而在下一行，我們看到，哦， 這裡有一個變量叫“myFunction的，” 我們等於給這 通用件事 - function--的 似乎沒有有什麼事情。 之所以說是不同的 比C是JavaScript的 是所謂功能性語言， 或具有功能元件，這意味著 其功能實際上是價值觀。 這意味著，我們可以設置 一個變量等於一個功能 然後移動的功能 各地，把它作為一個參數， 做各種東西， 像與功能。 另一件事note-- 函數都寫 具有一定數目的參數。 我們將看到一個函數的例子 對下一張幻燈片的參數。 但是，JavaScript就無法 罵你，如果你嘗試 使用帶有一個功能 錯誤的參數數目。 它只會盡力讓 這樣做，這意味著如果你通過了， 你調用一個函數需要一個 不帶參數，所有的說法， 會發生的事情是，它會盡力 嘗試並執行該代碼， 並且如果最終運行 到一個異常或錯誤， 它會拋出異常，只是不停 going--這只是的方法之一 該JavaScript的工作。 是啊。 聽眾：如果發生了什麼 有太多的爭論？ SAM格林：所以 問題是，會發生什麼 如果有太多的爭論？ 得到的答复是， JavaScript的只是 忽略那些是 之後，那些預計。 它會嘗試執行功能 稱，如果它只是前兩個。 對？ 休·扎布里斯基：是的，是的。 同樣地，如果有 太少的參數， 正中下懷它給空所有 參數它不具有任何值 對於。 SAM格林：可 其實很方便，如果你 想要寫一個函數， 採用可變數量的參數。 您可以設置默認值 的函數的定義， 而且它也可以忽略的事實 該輸入的不存在。 所以，我想談一點點 更多關於這最後一顆子彈 點，這是功能值。 這是一個例子，是 有點令人興奮 如果你只是讀它，不要以為 這是怎麼回事就一秒鐘。 那麼，讓我們來看看剛剛在 這裡的第一行。 我們有這個變量，F1，我們說 是一個函數，做這件事情。 和功能的內容 被CONSOLE.LOG（'你好'）。 你能想到的console.log作為中 JavaScript的等效printf函數。 所以會發生什麼，如果我們 在我們的瀏覽器運行這段代碼， 它會打印出一個字符串。 我可以證明這一點。 聽眾：通過日誌，但是，這是否 意味著它是被記錄的地方？ SAM格林：是的。 所以，我會告訴你發生了什麼事情要發生。 所以現在的問題是，是什麼日誌是什麼意思？ 休·扎布里斯基：所以的console.log 就像printf進行C. SAM格林：那麼的console.log 是如printf， 所以，如果我有這樣的console.log（'你好'）， 我稱之為，字符串“hello” 被打印到控制台。 這是控制台。 這就像printf的，在這裡 它打印到標準輸出。 我們會在一分鐘內看到， 但其實這是 參照控制台對象， 並調用對象的方法。 這會更有意義 在一分鐘的時候，我們 去談論 在JavaScript對象， 但我想我只想提及。 休·扎布里斯基：我們 在C中使用，right-- 我們平時寫一個大的程序 在主做任何事情。 但是，什麼是很酷的JavaScript是你 有這樣的解釋說 運行在實時，所以它 通過線僅需線， 它可以只解釋了當場。 它跟踪 之前已經運行的東西， 所以這是一個非常有用的工具 使用的console.log，或控制台， 通常，對於剛剛打 周圍的JavaScript。 SAM格林：那麼回到這個 example--代碼的第二線 這裡是非常令人難以置信的在我的腦海。 我第一次讀到這一點， 這就像，這是怎麼回事？ 那麼是什麼發生的事情是，這 函數聲明說， 我有一個功能叫做F2 該公司預計，有一個參數，女， 然後調用 函數f，其 傳遞給它作為參數 不帶參數本身。 所以，這可能是令人困惑的。 如果我們了解這是F2採用F1 作為參數，然後F2內， ˚F得到called--此裝置 這行代碼， 這兩條線後， 碼，結果在“你好” 被打印到控制台。 我們可以通過這一事實 圍繞功能作為值 最終被一個最 JavaScript的強大功能 作為一種編程語言。 所有的外 真棒的事情可以做， 正如的一個特徵 在的方式而言語言 它使事情變得簡單 編程，並允許 對於事情是不是特別 非常適合的網絡， 函數式編程和功能 的JavaScript編程方面 是一個最 強大的概念， 在JavaScript--存在，如果你問我。 涼。 所以，接下來的事情。 除了是功能性的， 還有的JavaScript元素 這是面向對象的， 這是的極一 流行的時髦詞在計算機科學。 面向對象編程 是一個非常流行的東西。 JavaScript有一個版本是， 在那裡我相信每一個價值也 一個對象，這意味著每個對象 包裝在一起值的一些數字。 因此，對於值是簡單的，像 的整數，像VARx前提等於5， 該對象只是包裝的一個值。 但是，我們也可以設想一種情況 where--我們可以想想C中的情況下， 我們想要做的 一些與結構， 例如，一個包裝數 值加在一起，使 它很容易通過周圍的事物。 這時候，一個對象是在JavaScript中。 重要的是要記住很重要 當我說的物體包裹 一些值的數量一起， 該功能也 值，這意味著函數可以 也可以是JavaScript對象的內部。 這是很重要的原因 是這樣的，而我們常 想調用的方法 一個對象，它是在 從其他一個流行術語 流行的面向對象的語言， 的區別之一在這裡的是， 所有的方法是在JavaScript 被存儲的對象的內部的值 這可能執行一些action-- 使用其他值是內 該對象的，但不一定。 所以你可以想像一個情況，我 猜在一個瘋狂的方式一點點， 在那裡你叫了一個方法 對象在另一對象，例如。 所以，這是一個有點古怪的那樣。 而且你還可以改變方法 了與某個對象相關聯 通過分配的方法 新功能，這也是 從其他相當不同 面向對象的語言，在這裡 一旦我們聲明一個對象 並創建實例， 我們不能改變的是方法 與該對象不再相關聯。 所以，這是相當不同的。 涼。 因此，這裡有一個例子，首先， 在動作中的對象。 這就是被稱為 一個通用的對象， 意味著它不具有任何 具體名稱，不具有類， 它的價值只是一些包裝。 這看起來是這樣，我們有 此外對花的牙套這裡 指示給JavaScript 說，這是一個目的。 它裡面的值 在裡面的每個值 對象應 被包裹起來。 與該對象的內部， 然後，我們有鍵值對， 其中的關鍵是指名稱 物體內的值的， 另side-- 結腸這裡 - 相反 是實際值 應當被存儲。 所以，你在這裡看到，我們有一個 關鍵稱為FN與價值SAM， 其次是一個逗號， 話說到下一個條目。 然後，一個叫LN關鍵， 有一個綠色的價值， 其次是一個逗號， 其次是“印” 這將有一個函數值 那會做這行的代碼。 讓我們退後一步， 解開什麼是怎麼回事。 所以這是一個有點複雜， 和我們看到新的東西 首次。 而“這個”關鍵字是新事物 我們看到在這裡，這是什麼呢 是，是指當前 對象範圍，對不對？ 所以，當我們說，這 點回來的路上 這整個object-- 當我們做this.fn， 我們將一路回去 這個對象，到FN值 並獲得SAM，把它所有的方式 回來了，把它貼在這裡，然後繼續前進。 聽眾：因此，與檢索，是 因為參數的做完 定義？ SAM格林：所以現在的問題是，是 因為參數的檢索完成 定義？ 是的，絕對。 這是怎麼回事在這裡發生的是， 這點說給JavaScript， 好吧，我得到一些價值 從我自己這個對象。 然後它會尋找一個條目 所謂的FN，如果它發現它， 它會返回value--是這樣，它的SAM。 但是，我也可以鍵入 這是不是在這裡定義的東西， 然後它只是 返回undefined--這 是一個東西，JavaScript可以 這樣做，它也有一些好處， 但它的also--如果你犯了一個錯字， 它會導致奇怪的錯誤。 因此，它會只是試圖找到 不管你告訴它找到 而且它不會 抱怨，如果沒有找到它。 它只想說，我沒有 找到它，然後繼續前進。 因此，這將是不確定的， 加空白，再加上姓氏。 是啊。 然後我們可以看到，如果我們 可以再下去access-- 我們呼籲tf.print（）括號。 這將調用打印 不帶參數的功能，對不對？ 但是，如果我們剛才說tf.print（） 分號，沒有括號， 所有可能做的就是拉 從該值的功能， 但實際上沒有把它稱為。 涼。 休·扎布里斯基：宜 我們做一個對象？ SAM格林：是的，讓我們做到這一點。 因此，我可以將這個 例如控制台。 我們可以想像，我有一個對象。 因此，這是一個簡單的對象。 這是一個對象，包含兩個 有兩個鍵的值，兩個關鍵的價值 對。 所以，我就可以訪問存儲的價值 這個對象做x.x1內， 例如，我也得到1回。 同樣，x.x2，拿到值回。 而現在的很酷的事情是，我可以 實際上添加的東西到該對象 我已經創造了它之後。 所以你可以想像，讓我們 說我有一個功能。 休·扎布里斯基：你 要做按住Shift-Enter鍵。 SAM格林：哦，這很煩人。 那有什麼不一樣？ 哦。 開始了。 涼。 所以，我剛才創建 這個函數f，即 是要去到目前 對象和打印this.x1。 所以，如果我只是調用F通過 本身，沒有什麼是怎麼回事 發生的，正確的，因為沒有X1 場中它指的是對象。 但是，如果我說，x.f = F，然後我 調用x.f（），我要拿回1。 也就是說f函數是現在 與對象x關聯， 其中有一個關鍵稱為X1 用值1相關聯的， 所以當我們調用this.x1，它的 要查找的尋找 和能夠打印的值出去。 所以，這只是一個例子 那種瘋狂的事情 您可以在JavaScript對象做。 因此，該版本是 通用版，意義 我們已經創建了使用該對象 括號notation--括號符號， rather--這就是 如果我們只是想方便 特定對象的一個實例，但 如果我們希望有一個以上的是什麼 的同一種？ 和這個問題的答案 問題是，有事情 所謂的類在JavaScript中也是如此。 我們可以創建一個函數， 做某種形式的初始化 為異物， 我們會說，喜歡， 我的分類 - 這樣的名字 可重複使用的object--的 等於功能設置起來。 那麼，這將是等同 要創造一個對象， 將只是喜歡， 大括號，STR，結腸， 這是一個字符串， 分號，大括號。 這將是通用 我們初始化對象， 與一個區別在於對 下一行，我們創建了一個原型，這 意味著它是一個默認的鍵 我們加入到我們的對象， 在這裡有列出的值。 意思是說，當我創建一個新的 此MyClass的實例對象， 這將有預建的內 它的值稱為海峽和另一個值 叫myPrint，這是 將是一個函數。 真棒。 大。 因此，最後一件事 說關於JavaScript 是，它是什麼真正有用的 被稱為異步操作。 異步意味著我們 可以等待一些操作 完成之前，我們將 ，但在我們等待繼續前進 再有事情發生以後。 而我的意思是，你 可以想像的情況下 你發送一個請求 某些網絡服務器的地方， 並且它會送你回 一些數據大塊，對不對？ 並且用戶可以等待在 同時要做到這一點， 並沒有什麼可以 事情在那個時候。 但是，這不是一個偉大的設計，對吧？ 你不想在網頁凍結。 如果什麼用戶想要 點擊下拉菜單？ 這是不是一個偉大的設計模式。 相反，基本上是什麼 JavaScript本身是說， OK，異步執行此操作。 於是想，等的背景下， 然後當操作完成後， 調用回調function-- 調用一些功能， 做一些action--信號的 操作我們在等待結束 結束了。 這就是超級強大的理由是， 我們可以做一些事情，傳遞參數， 做一些事情，然後等待 事情發生。 然後，一旦某事 完成後，我們可以調用一個回調。 這是非常方便的，因為它可以讓 我們做的事情與網絡音頻API， 例如，像負載的 從遠程服務器的音頻文件 而不必等待 整個音頻文件被加載， 這將是真的 糟糕的用戶體驗。 涼。 最後夫婦注意到有關 調試，因為這 是你不得不做的事 作為項目的一部分，有保證。 我提到的JavaScript控制台。 這是一個非常有用的功能 所有現代瀏覽器， 我們真的希望您積極地 舒適的使用您的控制台， 如果你想獲得擅長的JavaScript。 這是超級方便的 調試，但它也 為搞清楚真正有用 如何使用API​​。 它允許真 簡單的實驗 無需鍵入一些 代碼，然後編譯它。 你不必做的所有這些步驟。 你可以只寫 一些代碼成一條線， 然後得到即時反饋 不論該行代碼 worked--非常方便。 而且，只是一個技術note-- JavaScript控制台是一個例子 一個REPL--所以這是R-E-P-L，REPL的， 它代表讀，評估， 打印循環。 你要輸入一些東西 在，它會讀取你鍵入的， 它會評估它，它會打印 輸出，然後它會重新開始。 這可以讓你快速進入 圈迭代，這是真的很酷。 我想真正的最後note--這 是實際的最後一個音符，是的。 我們如何真正使用JavaScript？ 因此，首先，我們可以導入 使用腳本標記它 在一個HTML的頂部或底部file-- HTML文件的內的任意位置， 真。 而script標籤內，也有 兩個子方式進口的JavaScript。 第一個是由具有 獨立的JavaScript文件 我們進口的全部內容，或 由具有像腳本代碼的區域 開始，然後 反斜線腳本結束。 然後，我們只是寫 JavaScript的HTML文件中。 這些都是兩種方式。 你不能HTML裡面有它。 聽眾：是其中一個比另一個更好呢？ SAM格林：問題是， 比其它更好。 所以，是的，作為一個編碼風格的做法， 而且它像一個設計實踐。 有兩個原因 為什麼它可能會更好。 第一個是，它使你的代碼 很多更具可讀性，如果所有的HTML的 是在一個地方，所有的CSS是在 另外一個地方，所有的JavaScript 處於第三位。 對？ 我認為，我們應該已經講過 關於它在sections--像CSS--什麼 這is--和它去 常在另一個文件。 因此，相似類型的概念在這裡。 你也可以想像的JavaScript 將在一個以上的重複使用 HTML頁，或者一個 許多HTML頁面， 並具有JavaScript的 重構為一個 文件可以導入 一成多的地方 允許代碼是 這樣更易於維護。 你可以想像使一個 改變給JavaScript 而不必更改它 在100種不同的文件。 相反，我們可以直接改變它 在一個，這是道路更加強大。 難道我回答你的問題？ 涼。 我們還可以輸入到調音台， 正如我們之前提到過。 再次，最後一個note-- 網絡音頻是內置的， 不需要加載任何東西。 涼。 是否有任何問題，你有沒有 關於JavaScript的任何問題， 之前，我們繼續前進？ 聽眾：[聽不清] SAM格林：好吧，冷靜。 所以，現在他要談的API。 休·扎布里斯基：酷。 謝謝，山姆。 SAM格林：當然。 休·扎布里斯基：真棒，所以 我們將通過JavaScript前進。 因此，我們已經談了一些 JavaScript的要領， 而這些都是變量，函數， 對象，函數變量， 異步加載。 這些都是所有的東西，你會 看，所使用的網絡音頻。 因此，我們要好好談談 關於它首先在一個較高的水平。 這是一個API，所以它的東西 這是內置，如山姆說， 對進入的JavaScript 您在控制台中使用。 它實際上就像C ++代碼 這是真的內置Chrome瀏覽器 和Firefox，而所有這些瀏覽器。 因此，與網絡的主要思路 音頻是，你有 這種管道音頻的，對不對？ 所以你的音頻數據 進來以某種形式。 有一種三個主要forms-- 你有振盪器，它 創建一個正弦波，餘弦波， 我們將看到如何工作的。 另一種非常常見的一種， 當然，是一個MP3。 因此，也許你開始 一首歌曲，然後你 想要做一些過濾 該輸出 that--這可能是一個可能來源。 然後一個非常酷 一個是麥克風。 所以，你可以使用一些很 在JavaScript的基本通話費 以訪問的 麥克風，並且因此，如果您 想使一個應用程序 就像一個音調檢測， 例如，取入 你的聲音和數字出 在pitch--非常簡單的方法來表示。 只是一種可以讀取它 在，計算出的頻率， 然後輸出一個數字。 所以我們會看到如何工作的，以及。 目的地是基本上 其中音頻數據被輸出。 因此，總的來說，這是像 您的筆記本音箱。 其他選項都喜歡 一個ScriptProcessorNode-- 我們會在一個節點 second--但基本上， 要么你把聲音了 通過計算機通過揚聲器， 或者你是那種記錄，所以 你存儲為音頻數據。 因此，如果有人創建也許 音樂在你的應用程序，然後 你想記錄這一點，也許像 它出口到SoundCloud，為example-- 這將是做到這一點的方法之一。 所有的有趣的東西， 我們將談論， 這兩個點之間發生， 其中我們在音樂加載 然後輸出它。 所以，我要談的五個 音頻製作的第二階段。 我們有這個東西叫做 一個AudioContext，這 這是我們在這裡看到的小包裝。 基本上什麼AudioContext is--如果我們 去JavaScript控制台現在， 我們可以立即創建一個。 REPL的只是一個例子，對不對？ 我們正在看， 評估和它打印。 AudioContext是一個全球性的狀態。 這是一個結構，它是一個對象 在這裡，它使信息 的事情，是怎麼回事 有關音頻屏幕。 一個例子是當前時間。 這告訴你的號碼 幾秒鐘，非常精確， 由於網頁加載。 所以這是一個非常有用的 小屬性，您可以使用。 它的讀取only--我覺得其實 你可以嘗試設置一個值。 它會告訴你設置它， 然後，如果你打印出來 again--它其實並沒有那麼回事。 所以有只讀 性能在JavaScript中。 這是，如果真的有用 有種你同步 很多不同的 信息，當你 種播放不同的聲音。 另一種真正有用的 是上下文目的地。 肯定地說，如果你有興趣，可以 在你自己的控制台右側嘗試這種 現在。 所以這是一個AudioDestinationNode。 基本上，這是什麼說的是， 哪裡是輸出去？ 因此，這裡有兩個真正的選擇。 通常默認 只是你的音箱， 所以AudioDestinationNode 基本上只是說： 有零輸出到聲音 進來，發送到揚聲器。 所以一般情況下，你不 有與玩。 如果你有興趣在實際使用 的ScriptProcessorNode用於記錄， 肯定拍我的 電子郵件後來因為這是 稍微複雜一點。 但是總體來說，你只是種 的輸出聲音以某種形式。 太酷了，我們跳回到這裡。 聽眾：我很抱歉。 休·扎布里斯基：是的。 聽眾：我知道你說說話 你以後有關記錄。 你能接口與Pro Tools？ 休·扎布里斯基：與Pro Tools？ 讓我們來看看。 我不認為如此。 因此，客戶端之間去， 這是JavaScript 控制台和您的實際 計算機，一般是 東西是一種 的禁區，如果你 會的，實物的the--性質 它是一種設計的東西， 但你盡量保持瀏覽器的獨立 從用戶的實際的計算機。 一般情況下，唯一你能 訪問是麥克風或照相機。 你不能夠，我 不要以為，使用專業工具。 但是，如果您創建 在Pro Tools軌道， 出口，您還可以加載 在這裡，過濾它，例如， 過程，並記錄到一個 音頻Destination--或no--一球 處理器節點。 然後從那裡，你可以 導出到SoundCloud，你 可以通過電子郵件發送，或 無論你想從那裡。 但有一種輕微的障礙 讓音樂在您的計算機上的 ，使在線音樂。 SAM格林：這就是 不是唯一的，以此API。 這是Chrome瀏覽器的安全功能，和 我認為，所有其他現代的瀏覽器。 瀏覽器是自包含的。 因此，例如，一個網頁不能 使用JavaScript把聲音 關於您的揚聲器，例如。 或者無法關閉計算機。 而且沒有中間點 這兩件事情之間，正確的， 所以要么你有一個 完全抽象， 或者你打開 讓安全漏洞 心懷不軌程序員做 任何他們想要與你的筆記本電腦。 這就是為什麼Chrome是自包含的。 休·扎布里斯基：是的。 那有意義嗎？ 冷靜，冷靜。 我正要 示出的一個的例子。 這是相當多的 至於你，無論從 的訪問用戶的計算機。 如果您有一個USB鍵盤插上， 你可以使用一種叫做網絡 MIDI API，我們不會哪 真正談論在這裡， 但是這又是一個API，它是 再建成至少Chrome--， 這就是為什麼我們愛Chrome-- 我認為Firefox或Safari瀏覽器， 這是一件容易的事情 google--不同的瀏覽器有 針對這不同的支持 API的他們已經實施。 但是，如果你想在鍵盤插頭 並與信息化工作， 那種送鍵盤 轉移到計算機的信息 然後使用該網絡，這個API 在這裡你會工作的。 涼。 好。 因此，快速移動就在這裡。 我們如何做的時間呢？ 揚聲器1：約15。 休·扎布里斯基：15分鐘離開？ 嗯不錯。 因此，我們將在這裡跑在前面。 所以基本上，主要點 這一思想作為管道 的是，在管道中的每個步驟 是一系列的音頻節點。 我們的源代碼，讓我們說，是一個振盪器。 我們需要創建一個振盪器節點。 而這僅僅是一種 小function--的 而且它們都基於了 這裡的音頻上下文。 聽眾：當它說 振盪器，意味著什麼 它實際上是從字面上去 兩個不同的磁極來回？ 休·扎布里斯基：不，這就像 的數字表示。 它實際上是用C ++實現的。 我居然不知道規格 它是如何實際上實現的， 但是這一切正在為二進制數據。 事實上，是的。 這將是說，我可以 實際上，如果你有興趣， 我可以給你多一點 有關如何波形信息 被保持具有數字格式。 嗯不錯。 因此，我們產生像正弦波音調 波浪或類似的東西，也許 440赫茲。 我們創建了一個振盪器。 如果我們要設置音量，我們 連接任何一個GainNode， 這是我們可以做.creategain。 這台音量。 您可以傳遞到任何 其他選項 - 好， 所以音頻緩衝器源 節點下，您可能 存儲你已經裝入了一個MP3。 雙二階濾波器進行濾波，如果 要採取一切的基礎出 一首歌，或者類似的東西。 上帝保佑你想利用 基地出一首歌。 和AudioDestination節點是，再次， 喜歡在那裡我們的定稿是。 如果你在看到曾經興趣 所有不同的可能的選項， 剛去的標籤，讓 自動完成上來。 而如果你創建，你會看到所有的 不同的東西，你可以創建。 您可以創建動態 腳本處理器， 我甚至不知道那是什麼 是，用於混合通道的合併 和信道分離器和所有。 涼。 所以，這只是一個 例如一個管道。 因此，我們有三個來源進入。 也許這些都是波形， 也許這些都是MP3格式。 一個人的經歷 過濾器，另一個人的 越來越扭曲的另一個 一個人的平移左右。 你可以做各種各樣的事情， 他們都獲得混合在了一起， 然後走出來的聲音 在最後，作為目標。 這是什麼更多的例子 複雜的網絡音頻代碼如下所示。 你創造的所有這些 不同的對象右這裡 - 我不知道這一點。 不，它不進行放大。 好。 SAM格林：你做控制，向上卷動。 休·扎布里斯基：控制Scroll-- SAM格林：不，不。 控制 - 休·扎布里斯基：哦，控制，滾動？ 哦，疑難雜症。 是啊。 哇，沒了，沒了。 好。 我不會那麼做的。 所以是的，在這第一 在此部分中，您將看到 我們正在創建所有這些不同的 結出的背景下。 我們只是拼湊他們 一起在第二部分 通過該功能被稱為連接。 這是一個非常關鍵的 功能的網絡音頻。 它只是意味著一旦你做到 一些與在一個節點的聲音， 其傳遞到下一個節點。 因此，我們有源，它 連接到分析裝置， 分析儀做一些事吧， 它去失真，等等， 及到目的地 底部就在這裡。 涼。 好了，我們會繼續前進。 再次pipeline--，這些 是最常見的管道， 所以我們談論這些事情像 失真，平移，這一切的東西。 如果你真的有興趣 在使用的東西Pro Tools中， 這些可能是你的興趣。 如果沒有，也許你只是 要播放的聲音， 或者你只是想 上設置聲音的音量。 這些都是最常見的兩種排序 在音頻製作流程。 此外，該方法可以把它 作為一個oscillator--所以，讓我們 做的是，試玩就在這裡。 因此，我們要創建一個 在這裡簡單的音頻範圍內， 從我們要去 打造我們的振盪器。 所以這是，再次，我們只是 要調用Create振盪器。 我們將在設定的頻率 即，440赫茲，大家的喜愛。 然後，我們連接的目的地 point--這是揚聲器，所以 上下文目的地。 最後，我們只是說，開始零 從現在開始秒，我們有健全的？ [鈴聲] 休·扎布里斯基：在這裡，我們走了。 這只是一個正弦波。 嗯不錯。 然後我們就會停止。 聽眾：哪裡做 這些反饋信息從何而來？ 休·扎布里斯基：反饋？ 呵呵，可能是我們的話筒。 所以啊，這是你怎麼做。 而實際上，如果我有 不停地運行它，你 可以有頻率 價值，因為它的運行， 所以這是一個有趣的事情打轉轉。 涼。 這始終是一個可愛的人提出。 SAM格林：我們沒有 想想，我們什麼？ 休·扎布里斯基：是啊， 這是一個討厭的。 因此，緩衝loading--我將展示一個 例的，在最後。 這是加載MP3。 和麥克風，你只使用一個函數 所謂Navigator.getUserMedia（） 請求訪問的用戶的 麥克風的信息。 這裡的篩選，我會 只要繼續從這個活動。 這是一個相當高的水平， 但過濾器只是讓你 [嗶嗶] 過濾還允許你 創建像粉紅色 噪聲，褐色噪聲，白噪聲。 如果你想創建純噪音，這 有些人喜歡擺弄， 您可以使用網絡音頻 過濾做到這一點。 音頻Panning--所以想像 如果你正在寫一個遊戲 和你想要的聲音 聽起來像它的到來一樣， 在屏幕上拍攝的，你 可以使用音頻的聲像 造成這種錐形的， 這like--它很mathy， 但實際上它是真的 冷靜，如果你得到它的工作， 並有一些好 它的教程，我可以送你。 基本上，你可以種 中創建的聲音 的東西在一個3D的方式去用。 如果你有一個DJ的興趣，你可以 啟動混合和交叉淡入淡出的歌曲。 這僅僅是一些非常基本的 代碼，基本上是我以前那樣。 此設置的音量 振盪器，所以我們創建了振盪器 它創建波形。 我們創建了GainNode， 我們設定頻率， 然後連接振盪器到 GainNode，然後基本上改變 多少信號被允許通過。 但實際上，它是一個數字 的東西，所以它更just--呀。 這不是實際發生， 但是這是在現實生活中發生的事情 有增益。 聽眾：--quantization 體積參數？ 休·扎布里斯基：對不起？ 聽眾：它是一個 量化量參數？ 休·扎布里斯基：是的。 這是一件事我真的很 在我的知識短少的， 如何獲得工作在一個數字化水平。 我知道實際 信號，它基本上 控制多少你 放大信號。 所以，是的。 我給你的更多信息 ，因為我很好奇竟 更多地了解這一點。 但基本參數 是，一個是fold-- 響亮signal--和零是沒有 信號，否則你將聽不到任何聲音。 我們將跳過演示時間，由於 這基本上是我以前那樣。 再次，Context.Destination 是音頻目標節點。 真棒，確定。 所以我打算做一個快速的兩張demo。 我們如何做的時間呢？ 揚聲器1：約10分鐘。 休·扎布里斯基：10分鐘？ 大！ 真棒。 所以第一個我要去 確實，這就是所謂的我最喜愛的歌曲。 所以，這只是一個 小HTML的JavaScript。 我們將有兩個按鈕 在頁面上播放我最喜歡的歌 並停止我最喜愛的歌曲。 我會改變這一點。 聽眾：蓋你的麥克風。 休·扎布里斯基：是的。 而我在這裡已經加載 這basically--腳本 這是真正有用的 加載一個MP3， 所以這只是讓 加載速度更快MP3音樂的方式。 這基本上只是一個包裝。 它只是使的過程 載入中的MP3快得多， 否則，你使用的HTTP請求， 有點像我們在做什麼 在當前件套服務器。 這真是難看，你 不想做。 原來這傢伙，鮑里斯的SMU，寫了一個非常 有用的小工具，稱為BufferLoader。 你所要做的只是把它傳遞的 情況下，你傳遞一個列表中 - 或者，是的，它是在JavaScript中的列表？ SAM格林：數組。 休·扎布里斯基：哦，這是 一個數組，這是正確的。 這是路徑的數組 不同的文件。 然後你將它傳遞的功能。 這是我們在談論回調 有關與異步加載。 這將被稱為 一旦加載的文件。 而該函數被調用時， 該文件的裝載需要作為外圍 加載緩衝器陣列。 因此，發生在這裡。 基本上，BufferList是 將是1 value-- 或者這將是一個數組 長度之一，即具有在其在索引 零，MP3的整個加載的文件。 所以，當我完成我做什麼 加載，我只是 創建一個緩衝源，它 是音頻緩衝器源節點。 下一步驟是我在加載 source.buffer為滿載緩衝區 從BufferList-- 它的很多buffers--的 然後您連接音頻 緩衝到目的地。 那麼它會做 只是簡單地把MP3 直通到輸出， 並立即開始它 在得到這個電話。 酷，讓我們看看 這一點在行動。 我的[聽不清]在這裡，讓我們來看看。 所以我只是要 啟動一個基本的服務器。 在這個時候， 你需要做的，如果你 使加載文件的請求。 我要開始一個基本的服務器。 這基本上是整個 PSET現在在同一行， 但它只是開始 在端口80/80的服務器。 所以，我們去在這裡，我們 要裝載80/80， 我們要去我最喜愛的歌曲。 所以，如果我打“玩我 最喜歡的歌“現在， 這將載入我 最喜歡的歌曲，玩它 - [MUSIC - 老鷹，“生活在快  車道”] 可呈現恰好是“生活 快車道“由老鷹。 現在，我可以打“阻止我 最喜歡的歌“和重播。 [MUSIC - 老鷹，“生活在快  車道”] 如果我走了過來安慰，因為 我在這裡用了一個全局變量 保持這個值的軌道，它實際上 在控制台現在被認可。 因此，它自動創建了我。 所以，這就是在玩，現在， 我可以簡單地調用source.stop（） 在這一點。 那麼，你知道嗎？ 只是讓你們聽說過這個 song--你可能會認識到這首歌。 [MUSIC - RICK ASTLEY，“從未去放棄  您“] [MUSIC - 老鷹，“生活在快  車道”] 現在，我們已經全部被Rickrolled。 OK，偉大的，繼續前進。 涼。 因此，這基本上是一個例子 只是你怎麼可以加載一個MP3 file-- [MUSIC - 老鷹，“生活在快  車道”] - 並且播放，停止和啟動它。 我可以做了很多[聽不清] 最後一個，我會做的是， 我會告訴你一個[聽不清]。 [音樂播放] 這就像，ogg.wave.mp3。 我想，如果我沒有記錯， 我碰到的一些問題。M4A， 但我不知道這一點。 我想mp3.wave-- [MUSIC - RICK ASTLEY，“從未去放棄  您“] 太好了。 我不應該說。 總之，你好。 因此，我們有這個開放。 所以，現在我要做的就是，我基本上創造 一個基本的語法創建的音樂。 所以，如果我做這樣的事情，加上G4 1 2，這是什麼意思的是， 加上鋼琴音符，G4， 這是第四ģ 上從底部鋼琴。 因此，這是一種MIDI講， 因此，對於那些誰是音樂的基礎， 這僅僅是MIDI音符。 聽眾：這是對G 中部C，對不對？ 休扎布里斯基：這是對G 中C，這是正確的。 聽眾：中部以上C. 休·扎布里斯基：是的。 事實上，是的。 我想我曾作過 它酮[聽不清] 所以這可能是上面一個八度。 所以，讓我們來看看。 如果我打Play-- [重複性PIANO注] --we're會聽到的。 這個想法是，它的運作 就像一個命令行會， 所以，如果我有漲有跌 我的鍵盤上，你 可以回到以前的 命令，這是非常有用的。 而下面是我的曲目列表， 這是在環路中的所有運行。 聽眾：你假設 88鍵的鍵盤上，對吧？ 休·扎布里斯基：問題是， 我會假設一個88鍵的鍵盤， 是的，我是。 我所做的是我 基本上花了88個樣本 的鋼琴，一個用於每個音符。 所以每次時間 聽到一記從現在開始， 這實際上是一個循環，看起來 like--這是越來越演奏循環， 所以對於每一個音符，這是在運行。 會發生什麼事是，我 再創建一個緩衝區， 我創建了一個增益節點設置音量。 這只是一個非常 的說我複雜的方法 存儲在source.buffer緩衝區。 我給它的增益，我 它連接到增益， 增益被連接到 輸出，然後我玩。 所以這是一種過程 採取在緩衝源。 聽眾：你能採取實際的 燥聲，使之濕潤[聽不清]？ 休·扎布里斯基：可以，是的。 有再動詞，有 延時，失真。 你基本上可以把任何東西在 之間的夾層of--好， 管道是一個更好的比喻， 但你可以添加任何東西。 涼。 所以，我會完成演示 在這裡給你的感覺 時代的只是數量之多，你 可以運行功能的一次。 所以，我要刪除此。 我要創造一個發電機that-- 基本上是什麼does--這是真的 一種複雜syntax--，但它的 要在飛行中產生的筆記， 和剛開始玩 他們，因為它評估它們。 [插入PIANO] 因此，我們可以只是做一個小的音樂在這裡。 [插入PIANO] 那麼這個命令 確實，例如，是 它需要這三個音符為 鋼琴，然後把他們的B3。 這個語法可能使 多一點意義 那些誰擁有 背景音樂在這裡。 我可以添加一個大鼓。 我可以 - [插入儀器] --just玩弄了。 所以，你可以make-- [插入儀器] 一個人的多一點討厭。 [插入儀器] 因此，它隨機增加了一個幹鈸 在每16個音符，用16％ [聽不清]。 [插入儀器] 是啊，所以這個方法 works--它總是在4：4。 [插入儀器] 是啊，所以四季度和16/8。 [插入儀器] 所以平均起來，你會得到60％ 命中的16分音符。 不管怎麼說，這只是 那種炫耀 有些事情可以 建立與網絡音頻API。 這真是強大，它的真快， 你可以做很多很酷的事情 用它。 如此反复，您有任何疑問， 電子郵件myself-- Hugh--或山姆， 和誠實，谷歌 一噸的良好資源。 最後還有什麼問題？ 是啊。 聽眾：所以，你可以訪問 內置麥克風。 如果你想什麼 使用更好的麥克風？ 休·扎布里斯基：如果你想 使用更好的麥克風？ 如此反复，這是部分 Chrome瀏覽器之間的抽象 和計算機的其餘部分。 除非它是可以通過 一個API，如Web MIDI API， 你也許可以找到一些黑客， 但一般不是切實可行的。 SAM格林：您可以also-- 所有的瀏覽器都知道 是你的默認麥克風 是，並且它訪問。 所以，如果你有一個麥克風，你可以 設置為計算機的默認麥克風， 您可以訪問這種方式 它可能會工作。 休·扎布里斯基：這是一個很好的點。 我從來沒有嘗試過，但 你也許可以來樣 of--如果您重定向輸入揚聲器， 你也許可以做到這一點，是的。 最後還有什麼問題？ 涼。 好感謝你們 這麼多的收看。 我休。 SAM格林：我是薩姆。 休·扎布里斯基：這是CS50。