סם גרין: היי, כולם. ברוכים הבאים לסמינר שלנו. שמי סאם. יו זאבריסקי: אני יו. סם גרין: ואנחנו הולכים לדבר היום על JavaScript ו- API האינטרנט אודיו. רק כדי לצאת לדרך, זה מתאר סדר היום שלנו לסמינר. אנחנו הולכים להתחיל על ידי מדברים על למה אתה צריך להיות מעוניין באינטרנט API אודיו, מדוע הוא JavaScript השפה שאתה צריך בשביל זה, ולאחר מכן לדבר על JavaScript essentials-- כך כמו, לך ללכת דרך חלק יסודות של השפה, ולאחר מכן לדבר על API שמע ברמה גבוהה. אז, יו ידבר על כמה של שלבי ייצור אודיו ולאחר מכן הדגמה ברצף זה מדהים פרויקט שבנה ולהראות לך את הקוד. ולאחר מכן, יהיה לנו זמן ל שאלות בסוף לאנשים שנמצאים כאן גרים. 

יו זאבריסקי: מגניב. 

סם גרין: מגניב. 

יו זאבריסקי: מגניב. אני לגבות. 

סם גרין: אז, דברים הראשונים הראשון. אז אחד הדברים הגדולים על אודי API האינטרנט הוא שאין להגדיר הנדרש. הוא מגיע מובנה ל רוב הדפדפנים מודרניים, כולל כרום, אדג ', כל חבורה של נוספות-- כל אלה חלקים גדולים של ש אנשים משתמשים היום. אז אין הוא הקים, מלבד פשוט מקבל שרת אינטרנט הולך, ל לך להתחיל לעבוד בפרויקט שלך, וזה נהדר. 

אנו ממליצים די בכבדות שאתה מחשיב באמצעות Chrome ל התפתחות האינטרנט JavaScript, רק בגלל שהמפתחים שלה כלים הם באמת חזקים. כדוגמא רק את מה שאנחנו אומר באומרו לפתוח את JavaScript שלך console-- אם אתה הולך ל- Chrome ואתה מסתכל על כל דף אינטרנט, ואתה עזב לחץ בדוק אלמנט, ולאחר מכן אתה הולך לנפתח הקטן הזה ממש כאן ואתה לוחץ על קונסולה, תראה מה פותח מסתכל למעלה הרבה כמו הפקודה ש ייתכן שיראה ב- Mac שלך, או בזיהוי. וסתם ככה, אנחנו יכולים סוג פקודות כאן, כמו נקה, ופקודות אחרות כמו ש. אנחנו יכולים ליצור משתנים, כ שנראה בהמשך ב- JavaScript. וכך כל דבר שאנחנו יכולים לעשות ב JavaScript, אנחנו יכולים לעשות עם הקונסולה, וזה דרך סופר שימושי ל להתחיל לשחק עם APIs ומקבל בנוח עם JavaScript מייד את הבת. להגדיר לא נדרש, וזה באמת נחמד. מגניב. מדהים. 

אז רק עוד דבר אחד להוסיף. אם יש לך questions-- יש רבים מכם שאינם כאן גרים, אל תהסס שלח us-- אלה כתובות הדואר האלקטרוני שלנו. אם יש לך שאלות אתה לא רוצה לשאול אותנו, כמו, אוי לי באג בקוד שלי, או משהו זה קצת יותר ספציפי, אולי גוגל זה ראשון. יש הרבה משאבים גדולים על האינטרנט האודים API בחוץ. זה ממש טוב מתועד וזה להיות בשימוש על ידי המון אנשים ב תעשייה, ואנשים שהם פשוט בניית דברים כיפיים לעצמם. אז לא צריך להיות הרבה משאבים בחוץ. מדהים. 

מגניב, אז למה אודי API האינטרנט? תרשים זה הוא קצת של אבולוציה של הדרך קול באינטרנט גדל לאורך זמן. Bgsound היה כמו תג HTML המקורי ש- Internet Explorer משמש לתמיכה. זה רק אפשר לצלילים די בסיסיים, פונקציונלי לא היה חזק מאוד, ואתה לא יכול לעשות רצף מסובך, או לשלוט כאשר הצליל התחיל והפסיק מאוד וחסונה. אז, זה לא היה במיוחד מפותח. ואז אחרי ש, פלאש הגיע along-- ש, אני בטוח שאתם מכירים את כולם עם Flash-- אולי לא איך זה עובד, אבל אתה כבר בוודאי ראית את זה. אתה חייב לעדכן את הפלאש שלך Plug-in, כל סוג של חומר, וזה בהחלט הרחיב את הטווח פונקציונליים שהיה זמין. אבל מה שהופך את המשתמש להתקין התוספת היא בהחלט חסרון ל- Flash כולל ביישום שלך, נכון? כי אז אתה תלוי ב משתמשים הולכים ומציאת זו התוספת, וכנראה שהפך את צעד הנוסף הזה הם צריכים לקחת להשתמש האפליקציה שלך. ואז יכול להיות שעדכון שישבור כל הבקשה שלך, וזה בסופו להיות סיוט עבור היזם, מדי. אז זה היה מתרס. 

ואז לאחר שהגיע יחד, תג אודיו HTML, ש היא תכונה של HTML-- המודרני יותר ש בהחלט מותר להרבה יותר דברים, אבל גם את הדברים שאתה יכול לעשות שם היו קצת מוגבל רק כתוצאה מהדברים HTML שהיה מסוגל. לכן, כאשר JavaScript API, אודי API האינטרנט, הפכתי לסטנדרטי להתאמן על פני דפדפנים, כי באמת הרחיב את הסט הזדמנויות למפתחים באמת להיכנס לבניין דברים מגניבים באינטרנט. במשך זמן רב יש לי כלים ממש חזקים היה לילידי יישומי אודיו, like-- כולם יודע GarageBand, ואז ברור שיש יותר מקצועי יישומי אודיו ערבוב, וסוג כזה של דברים. אבל לא היה Cloud-- ממש טוב לא ענן, כן, אני מניח ש פלטפורמה מבוססת אינטרנט Cloud-- שתאפשר למפתחים לבנות יישומים עבור אנשים לעשות ערבוב אודיו. וכמו שהוא ייראה לך מאוחר יותר, אודי API האינטרנט מאפשר לממש חזק דברים לקרות באמת פשוט, וזה די מגניב. אז זה ההוראה למה אתה צריך לראות את שאר הסמינר, באופן בסיסי. 

ועכשיו, אני הולך לדבר על כמה אלמנטים בסיסיים רק JavaScript-- של השפה, כך ש אנחנו יכולים להיות באותו הדף כאשר אנו מדברים על API קצת מאוחר יותר. מגניב. 

אז, זה סיכום. שכחתי שזה היה כאן. כֵּן. 

יו זאבריסקי: יש שתי שקופיות כאן. 

סם גרין: זה הסיכום חלק מהמגבלות של שיטות מחייבות, ישנות האחרות. ואז עכשיו, יש לנו את הדברים האלה. מגניב. מדהים. 

אז, יסודות JavaScript. הדבר ראשון, יש הבדל די משמעותי ב- JavaScript לעומת ב שפה כמו C, בדרך שמשתנים נוצרים. אז ב- C, אנחנו רגילים לכך ש להקליד המשתנים שלנו, נכון? ואני לא מתכוון סוג כמו הקלד בהם, אני מתכוון סוג כמו להקצות להם משמעות type-- כמו, int, float, char. ב- C, שהיינו באמת משמש ל צורך ליצור משתנים ואז להיצמד לסוג של כל הזמן שאנו משתמשים בי משתנים ש. וזה לא בהכרח גרוע, אבל זה כנראה יותר לשימוש. אחת התכונות מגניבים של JavaScript הוא שמשתנים הם מה שנקרא "מוקלד באופן דינמי", ש משמעות הדבר היא שאני יכול ליצור משתנה עם תחביר ש, varX שווה 5, למשל. זה יוצר במקור שלם variable-- ממש מתחת ל מכסה המנוע somewhere-- אבל אני יכול לשנות משתנה ש כדי להתייחס למחרוזת בלי לעשות שום דבר כמו יצירת משתנה חדש. אני לא צריך לדאוג על שינוי הסוג. JavaScript יודע שהסוג של השתנה, וזה קורה באופן דינמי. 

אז, יש יתרונות וחסרונות ש, כמו כל מי שעבד ב JavaScript לזמן אולי יודע. יש רגעים שבי בטעות אתה עלול לשנות את הסוג של משתנה ו לא להתמודד עם זה שינוי הסוג, ולאחר מכן JavaScript שלך יכול crash-- או יוצא מן הכלל להיזרק, כי יהיה לך סוג הלא נכון כאשר אתה מצפה מסוג אחד. מגניב. 

אז, scoping-- שזה כמו, אם זוכר את השבועות הראשונים בקורס, מתייחס לאופן גלוי משתנה הוא ומה בשטח של הקוד. כל זה נראה דומה מאוד לאופן שבו נראה בג אז משתני scoped בדרך בתוך סוגריים מסולסלים בתוך פונקציה, ואז יש גם משתנים גלובליים-scoped ש הן-- אם אתה כותב משתנה מחוץ לפונקציה, זה יהיה גלוי בטקסט כולו. 

הבדל אחד בין JavaScript ו- C בפרט, הוא שאם אתה מצהיר עולמי בכל מקום משתנה בקובץ טקסט זה נראה לעין בכל תפקיד בתוך שקובץ הטקסט. זה נכון, נכון? 

יו זאבריסקי: כן. 

סם גרין: אז זה גם קצת קצת פאנקי בהשוואה ל- C, שבו אנו תמיד היו צריכים להיות שלנו הגדרות משתנים מעל המקומות הם היו בשימוש. זה לא שלטון זה נאכף יותר, כך, קצת שונה. ושוב רק כדי להדגיש, הגלובלי לעומת variables-- המקומי יש לך דומה מאוד לג יכול שני משתנים בעלי אותו שם, ויש לי אחד מהשמות שלהם להיות מוצל על ידי משתנה מקומי אם אחד מהם היה גלובלי. סוג אז, דומה של בעיות שחלק מכם ייתכן שנתקל בכמה הבעיה שלך קובע עד כה. מגניב, אז זה משתנה. 

בקרת זרימה, כלומר כמו, אם-else-- stuff-- ולולאות הגיוניים. אז כדי להתחיל עם, זה מה אם-אחר הצהרות נראות כמו ב- JavaScript. המיקום של הדברים השונים על הקווים הוא לא חשוב. זהו רק אחד מהמוסכמות לקוד מבנה שהדרך. בדיוק כמו ב- C, יש לנו "אם," הצהרת סוגריים. זה לא מה שהתכוונתי לעשות. אני עשיתי את זה שוב. 

יו זאבריסקי: מנסה לצאת? סם גרין: לא, אני רק מנסה להתקרב. זה לא משנה. 

אז, יש לנו הצהרה "אם" ו יש לנו מצב הפנימי שלו שמעריך לאמת או שקר, ושקובע אם לא אנחנו נכנסים בלוק של קוד. וכן, יש לנו עוד-אם, ו אחר, בדיוק כמו שאנחנו רגילים בג 

אתה גם צריך להיות די נוח מייד את הבת עם לולאות, כי הם גם נראים הרבה כמו C נראה. אבל תשימו לב שוב ש יש לי, במקום int אתחולים, יש לנו אתחולי var. ואני מניח שיש לך להיות זהיר לעשות בטוח שאתה לא לשנות את הערך שלי מint למחרוזת, לדוגמא, כי זה הולך לגרום להתנהגות מוזרה לא אולי לְצַפּוֹת. אבל זה צריך להיראות די מוכר, כמו גם. 

אז זה המקום שבו דברים מתחילים לקבל קצת משוגע בJavaScript למי שהולך מ רקע של ג ישנן פונקציות ב- JavaScript, ויש דרך אחת להכריז פונקציה שנראית סוג של דומה ל- C, ו אז יש עוד אחד ש נראה סוג אחר של. 

הגרסה הראשונה, שבו אנו יכולים לראות כאן, הוא סוג של C-כמו, בי אנחנו אומרים, זה הוא פונקציה, לתת לו שם, לתת מספר הטיעונים, ולאחר מכן את התוכן של הפונקציה ללכת בתוך סוגריים מסולסלים אלה. אנחנו תראו דוגמא ל טענות רק שני. 

ואילו בשורה הבאה, אנו רואים, אה, הנה משתנה בשם "myFunction," ואנחנו שווים את זה לזו function-- thing-- הכללי ש לא נראה שיש משהו קורה. הסיבה שזה שונה מ C היא כי JavaScript הוא מה שנקרא בשפה פונקציונלית, או שיש אלמנטים פונקציונליים, מה שאומר ש שפונקציות הן למעשה ערכים. וזה אומר שאנחנו יכולים להגדיר משתנה שווה פונקציה ולאחר מכן להעביר את הפונקציה ש מסביב, להעביר אותו כטיעון, לעשות כל מיני דברים כמו שעם פונקציות. 

דבר אחד לnote-- פונקציות נכתבות עם מספר מסוים של טיעונים. אנחנו תראו דוגמא לפונקציה עם טיעון בשקופית הבאה. אבל JavaScript לא יהיה צועק עליך אם תנסה להשתמש בפונקציה עם מספר הלא נכון של טיעונים. זה פשוט יעשה כמיטב יכולתה כדי להפוך את לעשות, כלומר, אם אתה עובר, אתה קורא לפונקציה שמצפה ויכוח עם טענה לא, כל מה ש יקרה שזה יעשה כמיטב יכולתה כדי לנסות ולבצע קוד ש, ואם זה סופו של דבר פועל לחריג או שגיאה, זה יהיה לזרוק חריג ושרק לשמור going-- שהוא רק אחת הדרכים כי JavaScript עובד. כֵּן. 

קהל: מה קורה אם יש טענות רבות מדי? סם גרין: אז השאלה הייתה, מה שקורה אם יש ויכוחים רבים מדי? והתשובה היא ש רק JavaScript יהיה להתעלם מאלה ש אחרי אלה היא מצפה. זה ינסה לבצע את הפונקציה קורא כאילו זה היה רק ​​שני הראשונים. יָמִינָה? 

יו זאבריסקי: נכון, כן. באופן דומה, אם יש מעט מדי ויכוחים, זה פשוט סוג של נותן null לכל טענות שאין לה כל ערכים בשביל ש. 

סם גרין: אשר יכול למעשה להיות שימושי, אם אתה רוצה לכתוב פונקציה ש לוקח טיעוני מספר משתנים. באפשרותך להגדיר ערכי ברירת מחדל ב ההגדרה של הפונקציה, וזה יכול להתעלם מהעובדה שהקלט לא שם. אז אני רוצה לדבר קצת עוד על הכדור האחרון זה נקודה, שהוא פונקציות הן ערכים. זוהי דוגמה שהיא פיצוצים קצת אם אתה רק לקרוא אותו, ולא חושב ש על מה שקורה לשנייה. אז, בואו נסתכל רק ב הקו הראשון כאן. יש לנו משתנה, F1 זה, שאנחנו אומרים היא פונקציה שעושה את הדבר הזה. ואת התוכן של הפונקציה הם console.log ('שלום'). אתה יכול לחשוב על console.log כ שווה ערך JavaScript של printf. אז מה שיקרה הוא, אם להפעיל קוד זה בדפדפן שלנו, זה יהיה להדפיס את מחרוזת. אני יכול להוכיח את זה. קהל: ביומן, אם כי, עושה את זה אומר שזה שנרשם איפשהו? סם גרין: כן. אז אני אראה לך מה הולך לקרות. אז השאלה הייתה, מה יומן מתכוון? 

יו זאבריסקי: אז console.log כמו printf לג סם גרין: אז console.log כמו printf, כך שאם יש לי console.log זה ('שלום'), ואני קורא לזה, את המחרוזת "שלום" מקבל הדפיס לקונסולה. זה הקונסולה. זה בדיוק כמו printf, בי היא מדפיסה להחוצה סטנדרטית. ואנו רואים בדקה, אבל זה בעצם בהתייחסו לאובייקט הקונסולה, וקורא שיטה על אובייקט ש. זה יהיה הגיוני יותר בדקה כשאנחנו להגיע למדברים על אובייקטים ב- JavaScript, אבל חשבתי שמזכיר בדיוק את זה. יו זאבריסקי: אנחנו נהגתי בC, right-- אנחנו בדרך כלל לכתוב תכנית גדולה בעיקרי לעשות שום דבר. אבל מה זה מגניב ב- JavaScript הוא יש לי של מתורגמן סוג זה ש ריצות בזמן אמת, כך ש לוקח רק שורה אחרת שורה, זה רק יכול לפרש שעל המקום. וזה עוקב אחר דברים שיש להפעיל לפני, כך שזה כלי די שימושי ל להשתמש console.log, או הקונסולה, בדרך כלל, רק משחק סביב עם JavaScript. 

סם גרין: אז לחזור לזה example-- הקו השני של קוד כאן הוא מזעזע את הנפש די לי בראש. בפעם הראשונה שקראתי את זה, זה היה כמו, מה קורה? אז מה שקורה הוא, זה הצהרת פונקציה אומרת, יש לי F2 פונקציה שנקראת שמצפה טיעון אחד, ו, ואז זה קורא ש פונקציה, F, ש עבר אליו כטיעון ללא ויכוחים עצמו. אז, שאולי היה מבלבל. אם אנחנו מבינים את זה כf2 לוקח F1 כטיעון, ולאחר מכן בתוך F2, ו מקבל נקרא-- שאמצעים כי הקו הזה של קוד, אחרי שתי שורות של אלה קוד, תוצאות ב" שלום " מודפס לקונסולה. 

העובדה שאנחנו יכולים לעבור פונקציות סביב ערכים בסופו להיות אחד מביותר תכונות רבות עוצמה של JavaScript כשפת תכנות. מחוץ לכל דברים מדהים שהוא יכול לעשות, רק כתכונה של שפה במונחים של הדרך כי זה עושה את הדברים קלים לתכנת ומאפשר לדברים שהם לא במיוחד מתאים היטב לאינטרנט, תכנות ופונקציונלי תפקודיים היבטי תכנות של JavaScript הוא אחד ביותר מושגים רבי עוצמה ש קיים בJavaScript-- אם אתה שואל אותי. מגניב. 

אז, הדבר הבא. בנוסף להיות תפקודי, יש גם אלמנטים של JavaScript שמונחים עצמים, שהוא אחד מאוד מילים באז פופולריות במדעי מחשב. תכנות מונחה עצמים זה דבר ממש פופולרי. יש JavaScript גרסה של ש, שבו אני מאמין שכל ערך הוא גם אובייקט, מה שאומר שכל אובייקט עוטף יחד כמה מספר הערכים. אז לערכים שהם פשוטים, כמו מספר שלם, כמו varX שווה 5, אובייקט שרק עוטף שערך אחד. 

אבל אנחנו גם יכולים לדמיין מצב ש where-- אנחנו יכולים לחשוב על מצבים בC שבו אנחנו רוצים לעשות משהו עם structs, לדוגמא, שעוטף כמה ערכים ביחד ועושה זה באמת קל לעבור דברים מסביב. זה היה רגע שאובייקט הוא ב- JavaScript. 

זה חשוב לזכור כשאני אומר שאובייקטים עטופים כמה מספר הערכים יחד, שפונקציות גם ערכים, מה שאומר שפונקציות יכולים גם להיות בתוך אובייקט JavaScript. והסיבה שזה חשוב הוא ש, ואילו אנו לעתים קרובות חושב לקרוא לשיטה על אובייקט זה של טווח פופולרי מאחרים שפות מונחה עצמים פופולריים, אחד ההבדלים הוא ש כל ששיטה היא בJavaScript מאוחסן ערך הפנימי של אובייקט שמבצע כמה action-- אולי באמצעות הערכים האחרים שנמצאים בתוך של אובייקט ש, אך לא בהכרח. אז אתה יכול לדמיין מצב, אני מניח בקצת דרך מטורפת, שבו אתה נקרא שיטה של ​​אחד מתנגד על אובייקט אחר, לדוגמא. אז, זה קצת פאנקי בדרך זו. 

ואתה יכול גם לשנות את השיטות הקשורים לאובייקט על ידי הקצאת ששיטה פונקציה חדשה, שהוא גם די שונה מאחרים שפות מונחה עצמים, שבו ברגע שאנו מכריזים על אובייקט ומופע זה, אנחנו לא יכולים לשנות את השיטות ש הקשורים לאובייקט זה יותר. אז זה די שונה. מגניב. 

אז הנה דוגמא, ראשון, של אובייקט בפעולה. זה מה שנקרא אובייקט גנרי, ש משמעות הדבר היא כי אין לו כל שם מסוים, אין כיתה, זה רק חלק עטיפה של ערכים. והאופן שבו נראה הוא, שיש לנו זוג החיצוני של מתולתל פלטה כאן שמצביעים לJavaScript ואומרים, זה הוא אובייקט. הערכים הפנימיים שלו הם כל ערכים בתוך של האובייקט שצריך להיות עטוף יחד. ובתוך האובייקט ש, אז יש לנו זוגות ערך מפתח, איפה המפתח מתייחס לשם של הערך הפנימי של האובייקט, והאתרים-- האחר מול כאן-- המעי הגס הוא הערך הממשי שצריך להיות מאוחסן. 

אז אתה רואה שיש לנו כאן מפתח בשם fn עם הערך סם, אחרי פסיק, אומר על הכניסה הבאה. אז מפתח נקרא LN, עם ערך של ירוק, אחרי פסיק, ואחריו "הדפסה" שהוא הולך להיות ערך פונקציה כי הוא הולך לעשות את הקו הזה של קוד. בואו ניקח צעד אחורה ו לפרוק את מה שקורה כאן. אז זה קצת מסובך, ואנחנו רואים משהו חדש בפעם הראשונה. מילת המפתח "זה" הוא הדבר החדש אנחנו רואים כאן, ומה זה עושה הוא, מתייחס לנוכחי מתנגד בהיקף, נכון? לכן, כאשר אנחנו אומרים, זה מציין את כל הדרך חזרה לכל object-- זה כאשר אנו עושים this.fn, אנחנו הולכים ללכת את כל הדרך חזרה לאובייקט, ללכת לערך fn ותקבל סם, למשוך אותו כל הדרך בחזרה, לתקוע אותו כאן, ואז להמשיך הלאה. 

קהל: אז עם שליפה, הוא שנעשה בגלל הפרמטר הַגדָרָה? סם גרין: אז השאלה הייתה, הוא אחזור לעשות בגלל הפרמטר הַגדָרָה? כן, בהחלט. מה הולך לקרות כאן הוא, נקודה זו אומרת ל- JavaScript, אישור, אני מקבל ערך כלשהו מאובייקט זה מעצמי. ואז זה יחפש כניסה נקרא fn, ואם הוא מוצא אותו, זה יחזור שvalue-- כך, זה סם. אבל אני יכול גם הקלדתי משהו שלא הוגדר כאן, ואז זה פשוט היית לחזור undefined-- ש זה דבר שיכול JavaScript לעשות, אשר יכולה להיות יתרונות, אבל זה גם-- אם אתה עושה טעות דפוס, זה יכול לגרום לשגיאות מוזרות. אז זה פשוט לנסות למצוא כל מה שאתה אומר את זה כדי למצוא וזה לא הולך ל להתלונן אם אינו מוצא אותו. זה רק אומר, אני לא למצוא אותו, ואז להמשיך הלאה. אז זה יהיה לא מוגדר, בתוספת ריקה, בתוספת שם משפחה. כֵּן. ואז אנחנו יכולים לראות שאם אז יכול לרדת וaccess-- ואנחנו קוראים tf.print () עם סוגריים. זה הולך לקרוא הדפסה ש פונקציה ללא ויכוחים, נכון? אבל אם אנחנו רק אמרתי tf.print () פסיק, בלי הסוגריים, כל מה שהיה עושה הוא למשוך את הפונקציה מהערך, אבל לא באמת קראתי לזה. מגניב. יו זאבריסקי: צריך אנחנו עושים אובייקט? סם גרין: בטח, בוא לעשות את זה. אז אני יכול להזיז את זה דוגמא לקונסולה. אנו יכולים לדמיין שיש לי אובייקט. אז זה אובייקט פשוט. זהו אובייקט שמכיל שני ערכים עם שני מפתחות, שני ערך מפתח זוגות. אז אני יכול לגשת לערך המאוחסן בתוך אובייקט זה על ידי עושה x.x1, לדוגמא, ואני מקבל בחזרה 1. כמו כן, x.x2, יקבל ערך שיחזור. 

ועכשיו הדבר ממש מגניב הוא, שאני יכול למעשה להוסיף משהו לאובייקט אחרי שיצרתי אותו. אז אתה יכול לדמיין, בוא אומר שיש לי תפקיד. 

יו זאבריסקי: אתה צריך לעשות Shift-Enter. 

סם גרין: אה, זה מעצבן. מה זה לא רוצה? אה. הנה אנחנו יוצאים. מגניב. 

אז פשוט יצרתי פונקציה, F, זה ש הוא הולך לנוכחי אובייקט וthis.x1 הדפסה. אז אם רק אני קורא F על ידי עצמו, שום דבר לא קורה לקרות, נכון, כי אין x1 שדה באובייקט זה מתייחס ל. אבל, אם אני אומר, x.f = F, ואז אני קורא x.f (), אני הולך לחזור 1. כי פונקצית f היא עכשיו הקשורים לאובייקט X, שבו יש x1 מפתח נקרא הקשורים לערך 1, ולכן כאשר אנו קוראים this.x1, זה הולך למצוא את מה שהוא מחפש ותוכל להדפיס את ערך. אז זה רק דוגמא אחת מסוג הדברים המטורפים אתה יכול לעשות עם אובייקטים ב- JavaScript. 

אז הגרסה שהייתה גרסה הגנרית, משמעות שיצרנו אובייקט באמצעות זה סוגר סימון סד notation--, rather-- וזה שימושי אם אנחנו רק רוצים מופע של אובייקט מסוים אחד, אבל מה אם אנחנו רוצים להיות יותר מאחד מאותו הסוג? והתשובה לכך שאלה היא, יש דברים נקרא כיתות בJavaScript, כמו גם. אנחנו יכולים ליצור פונקציה ש עושה איזשהו אתחול לאובייקט זר, והיינו אומרים, כמו, class-- כל כך שם של object-- לשימוש חוזר שווה פונקציה שמגדירה אותו. אז מה זה יהיה שווה ערך ליוצר אובייקט ש יהיה בדיוק כמו, סד מתולתל, str, מעי גס, זה הוא מחרוזת, פסיק, סד מתולתל. זה יהיה גנרי אובייקט שלאתחל, עם ההבדל אחד להיות ב השורות הבאות אנו יוצרים אב טיפוס, ש אומר שזה מפתח ברירת מחדל ש נוסיף לאובייקט שלנו ש יש הערך הרשום כאן. כלומר, כאשר אני יוצר חדש מופע של אובייקט MyClass זה, זה הולך להיות מראש נבנה בתוך זה נקרא ערך str וערך אחר myPrint נקרא, שהוא הולך להיות פונקציה. מדהים. 

גדול. אז הדבר האחרון ש אומר על JavaScript הוא שזה באמת שימושי עבור מה נקראים פעולות אסינכרוני. אמצעי אסינכרוני הוא שאנחנו יכול לחכות כמה פעולה כדי להשלים לפני שנעבור ב, אבל לעבור על זמן שאנחנו מחכים ואז יש לי משהו יקרה בהמשך. ומה שאני מתכוון בזה הוא, ש יכול לדמיין מצב שבו אתה שולח בקשה ל כמה שרת אינטרנט איפשהו, וזה הולך לשלוח אותך בחזרה כמה נתח גדול של נתונים, נכון? והמשתמש שלך יכול לחכות ב בינתיים כדי שזה יקרה, ושום דבר לא יכול להיות קורה באותו הזמן. אבל זה לא עיצוב נהדר, נכון? אתה לא רוצה את דף האינטרנט להקפיא. מה אם המשתמש רוצה לחץ על תפריט נפתחת? זה לא דפוס עיצוב נהדר. במקום זאת, בעצם מה ש JavaScript עושה הוא אומר, אישור, לעשות את הפעולה באופן אסינכרוני. אז כמו, לחכות ברקע, ולאחר מכן, כאשר הפעולה נעשית, קורא הקריאה החוזרת function-- קורא כמה פונקציה, אל כמה action-- לאותת ש פעולה שאנחנו מחכים ללסיים זה נגמר. והסיבה לכך שהסופר חזק היא, אנחנו יכולים לעשות משהו, לעבור טיעון, לעשות משהו, ואז לחכות למשהו שיקרה. ואז, ברגע שמשהו ש משלים, אנחנו יכולים לקרוא לחיוג חוזר. זה באמת שימושי, כי זה מאפשר לי שלנו לעשות דברים עם האינטרנט אודיו API, לדוגמא, כמו עומס קובץ אודיו משרת מרוחק מבלי לחכות ל כל קובץ שמע להיות טעון, שיהיה באמת רע חוויית משתמש. מגניב. 

הזוג אחרון מציין על ניפוי, שכן זה זה דבר שאתה הולך צריך לעשות כחלק מהפרויקט שלך, מובטח. הזכרתי את קונסולת JavaScript. זה תכונה סופר שימושית של כל הדפדפנים המודרניים, ואנחנו באמת ממליצים לך לקבל נוח באמצעות הקונסולה שלך, אם אתה רוצה לקבל טוב ב- JavaScript. זה סופר שימושי ל ניפוי, אבל זה גם באמת שימושי לחישוב איך להשתמש API. זה מאפשר באמת ניסויים קלים מבלי להקליד כמה קוד, ולאחר מכן לאסוף אותו. אתה לא צריך לעשות את כל הצעדים האלה. אתה יכול פשוט לכתוב קוד לקו, ולאחר מכן לקבל משוב מיידי על אם קו זה של קוד worked-- שימושי מאוד. 

וגם, רק note-- אחד טכני קונסולת JavaScript היא דוגמא של REPL-- אז זה R-E-P-L, REPL, אשר מייצגת קריאה, להעריך, הדפסת לולאה. אתה הולך להקליד כמה דברים ב, זה יהיה לקרוא את מה שהקלדת ב, זה יהיה להעריך את זה, וזה יהיה להדפיס פלט, ואז זה יתחיל שוב. המאפשר לך ללכת במהירות ב חוגי iterating, שהוא ממש מגניב. 

אני מניח שעבר אמיתי note-- זה הוא הפתק האחרון בפועל, כן. איך בעצם להשתמש ב- JavaScript? אז קודם כל, אנחנו יכולים לייבא שלו באמצעות תג סקריפט בחלק העליון או התחתון של HTML file-- בכל מקום בתוך קובץ HTML, בֶּאֱמֶת. ובתוך תג סקריפט, יש שתי תת-דרכים של יבוא JavaScript. הראשון הוא על ידי בעל קובץ JavaScript נפרד שאנו מייבאים בשלמותו, או על ידי בעל שטח של קוד כמו תסריט כדי להתחיל, ולאחר מכן תסריט קו נטוי ועד הסוף. ואז אנחנו פשוט לכתוב JavaScript בתוך קובץ HTML. אלה הם שתי דרכים. אתה לא יכול לקבל את זה בתוך ה- HTML. קהל: האם אחד טוב יותר מאשר אחרים? סם גרין: השאלה הייתה, הוא אחד טוב יותר מאשר אחרים. אז, כן, כפרקטיקת סגנון קידוד, וגם זה כמו תרגול עיצוב. ישנן שתי סיבות למה זה יכול להיות טוב יותר. הראשון הוא, זה עושה את הקוד שלך קריא יותר הרבה אם כל ה- HTML שלך הוא במקום אחד, כל CSS שלך הוא ב מקום אחר, כל JavaScript שלך במקום שלישי. יָמִינָה? אני חושב שאנחנו צריכים כבר דיברנו על זה בsections-- כמו CSS-- מה שהוא-- וזה הולך לעתים קרובות בקובץ אחר. אז, סוג דומה של מושג כאן. גם אתה יכול לדמיין כי JavaScript יהיה לעשות שימוש חוזר על עצמו יותר מפעם אחת דף HTML, או אולי דפי HTML רבים, ויש שJavaScript refactored לאחד קובץ שניתן לייבא ליותר ממקום אחד מאפשר את הקוד להיות דרך לתחזוקה יותר. אתה יכול לדמיין מה שהופך את אחד לשנות לJavaScript ויש לשנות אותה 100 קבצים שונים. ובמקום שאנחנו יכולים פשוט לשנות את זה באחד, שהוא הרבה יותר חזק. האם אני עונה על השאלה שלך? מגניב. 

אנחנו גם יכולים להקליד במסוף, כפי שאנו כבר הזכרנו קודם. ושוב, note-- האחרון אינטרנט אודיו בנוי ב, אתה לא צריך לטעון שום דבר. מגניב. לעשות האם יש שאלות, יש לך שאלות נוספות על JavaScript, לפני שאנחנו עוברים? 

קהל: [לא ברור] סם גרין: בסדר, מגניב. אז עכשיו הוא הולך לדבר על ה- API. 

יו זאבריסקי: מגניב. תודה, סם. 

GREEN SAM: בטח. יו זאבריסקי: מדהים, כל כך אנחנו נעבור מJavaScript. אז דברנו על כמה מ היסודות של JavaScript, ואלה משתנים, פונקציות, אובייקטים, פונקציות כמשתנים, טעינת אסינכרוני. כל אלה הם הדברים שאתה רואה שאתה משתמש באינטרנט אודיו. אז אנחנו פשוט הולכים לדבר על זה ראשון ברמה גבוהה. 

זה API, אז זה משהו שנבנה, כסם אמר, ישר לתוך JavaScript כי אתה משתמש בקונסולה. וזה בעצם בדיוק כמו C ++ קוד שנבנה ממש בקטע של Chrome ופיירפוקס, וכל דפדפנים אלו. אז הרעיון העיקרי עם אינטרנט אודיו הוא שיש לך צינור של אודיו מסוג זה, נכון? אז נתוני השמע שלך מגיע בצורה כלשהי. 

יש סוג של שלוש forms-- העיקרי יש לך את מתנד, ש יוצר גל סינוס, גל קוסינוס, אנחנו הולכים לראות איך זה עובד. עוד אחד נפוץ מאוד, כמובן, הוא MP3. אז אולי אתה מתחיל עם שיר, ואז אתה רוצה לעשות קצת סינון ושלפלט לראות-- שיכול להיות מקור אפשרי. ואז ממש מגניב אחד הוא המיקרופון. אז אתה יכול להשתמש בחלק מאוד שיחות בסיסיות בJavaScript כדי לקבל גישה ל מיקרופון, ולכן אם אתה רציתי לעשות אפליקציה כמו גלאי המגרש, לדוגמא, שלוקח ב קול ונתונים מתוכך הדרך קלה מאוד pitch-- לזה. רק סוג של אתה יכול לקרוא את זה ב, להבין את התדירות, ואז פלט מספר. אז אנחנו תראו איך זה עובד, כמו גם. 

היעד הוא בעצם שבו נתונים אודיו הוא פלט. אז בדרך כלל, זה כמו הרמקולים הניידים שלך. אפשרויות אחרות הן כמו ScriptProcessorNode-- אנחנו נתחיל את צמתים ב הדבר-- אבל בעצם, או שאתה מוציא קול דרך המחשב שלך דרך רמקולים, או שאתה סוג של הקלטה זה, כך אתה לאחסן אותו כנתוני אודיו. אז אולי אם מישהו יוצר מוסיקה באפליקציה שלך ולאחר מכן אתה רוצה להקליט את זה ואולי כמו לייצא אותו לסאונדקלאוד, לexample-- זה יהיה דרך אחת לעשות את זה. כל הדברים כיפיים, שנדברנו על, קורה בין שתי הנקודות הללו, שבו אנו לטעון במוזיקה ואז פלט אותו. 

אז אני הולך לדבר על חמש שלבי ייצור אודיו בשנייה. יש לנו את הדבר הזה שנקרא AudioContext, ש הוא העטיפה הקטנה הזה שאנו רואים כאן. בעיקרון מה שAudioContext הוא-- אם ללכת למסוף JavaScript עכשיו, אנחנו יכולים ליצור אחד עכשיו. רק דוגמא REPL, נכון? אנחנו קוראים, הערכה, והיא מדפיסה. 

AudioContext היא מדינה גלובלית. זה struct, זה אובייקט כאן, והוא שומר מידע על דברים שקורים על המסך הקשורים לאודיו. דוגמא אחת היא הזמן הנוכחי. זה אומר לך את המספר שניות, בדיוק רב, מאז דף האינטרנט נטען. אז זה באמת שימושי נכס קטן שאתה יכול להשתמש. זה לקרוא only-- אני חושב שלמעשה אתה יכול לנסות להגדיר אותו ערך. זה יגיד לך להגדיר אותו, ולאחר מכן, אם תדפיס זה again-- זה לא ממש עובד די. אז יש לקריאה בלבד נכסים ב- JavaScript. זה באמת שימושי אם אתה סוג של סינכרון הרבה שונה מידע, כשאתה סוג של השמעת צלילים שונים. 

אחר באמת שימושי אחד הוא יעד ההקשר. בהחלט, אם אתה מעוניין, להיות מנסה את זה בקונסולה תקין שלך עַכשָׁיו. אז זה AudioDestinationNode. בעיקרון מה שזה אומר הוא, שבו הפלט הולך? אז יש שתי אפשרויות אמיתיות כאן. בדרך כלל ברירת המחדל רק הרמקולים שלך, כך AudioDestinationNode בעצם רק אומר יש אפס יציאות לקול מגיע ב, נשלח לרמקול. אז בדרך כלל, אתה לא צריך לשחק עם זה. אם אתה מעוניין בשימוש בפועל ScriptProcessorNode להקלטה, בהחלט לירות בי דוא"ל מאוחר יותר כי זה קצת יותר מסובך. אבל בדרך כלל, אתה פשוט סוג של פלט קול בצורה כלשהי. כל כך מגניב, שנקפוץ לכאן. קהל: אני מצטער. יו זאבריסקי: כן. קהל: אני יודע שאמרת לדבר לך מאוחר יותר על הקלטה. האם אתה יכול ממשק שעם Pro כלים? 

יו זאבריסקי: עם Pro כלים? בוא נראה. לֹא נִראֶה לִי. אז הולך בין הלקוח, שהוא JavaScript קונסולה, ובפועל שלך מחשב, הוא בדרך כלל משהו שהוא סוג של מחוץ לתחום, אם אתה יהיה, סוג של האופי של כל-- זה סוג של דבר עיצוב, אבל אתה מנסה לשמור על הדפדפן נפרד מהמחשב בפועל של המשתמש. בדרך כלל, הדבר היחיד שאתה מסוגל גישה היא המיקרופון או המצלמה. אתה לא מסוגל, אני לא חושב, להשתמש Pro כלים. עם זאת, אם אתה יצרת מסלול בPro כלים, יצוא זה, אתה יכול לטעון ש כאן, לסנן אותו, למשל, תהליך זה, ולהקליט את זה ב אודי Destination-- או, no-- כדור צומת מעבד. ואז משם, אתה יכול יצוא שלסאונדקלאוד, יכול לשלוח אותו בדואר אלקטרוני, או מה שאתה רוצה משם. 

אבל יש סוג של מכשול קל בין מה שהופך את המוזיקה במחשב שלך ומה שהופך את המוזיקה מקוונת. 

סם גרין: וזה אינו ייחודי לAPI זה. זה תכונת אבטחה של Chrome, ו אני חושב שכל דפדפן מודרני אחר. הדפדפן הוא עצמאי. כך למשל, בדף אינטרנט לא יכול להשתמש ב- JavaScript כדי להפוך את הצליל ברמקולים שלך, למשל. או שזה לא יכול להפוך את המחשב שלך כבוי. ואין טעם ביניים בין שני הדברים האלה, נכון, כך גם יש לך הפשטה מוחלטת, או שאתה פותח את פגם אבטחה של לתת מתכנת עם כוונות רעות לעשות מה שהם רוצים עם המחשב הנייד שלך. ולכן Chrome הוא עצמאי. 

יו זאבריסקי: כן. האם זה הגיוני? מגניב, מגניב. אני רק הולך ל להראות דוגמא אחת. זה פחות או יותר כפי ש ככל שאתה מקבל, במונחים לגישה למחשב של המשתמש. אם יש לך מקלדת USB לחשמל, אתה יכול להשתמש במשהו שנקרא האינטרנט API MIDI, אנחנו לא ש ממש מדבר עליו כאן, אבל זה API אחר זה מובנה בתוך לפחות Chrome-- שוב, זו הסיבה שאנחנו אוהבים Chrome-- אני חושב שפיירפוקס או ספארי, זה דבר קל יש דפדפנים שונים google-- תמיכה שונה של APIs הם יישמו. אבל אם אתה רוצה לחבר את מקלדת ולעבוד עם מידע ש, סוג של לשלוח את המקלדת מידע על למחשב ולאחר מכן להשתמש באינטרנט כי, API זה המקום שבו אתה רוצה להיות עובד ש. 

מגניב. אוקיי. אז, נע במהירות כאן. איך אנחנו עושים בזמן? 

1 מרצה: כ -15. 

יו זאבריסקי: 15 דקות לסיום? בסדר מגניב. אז אנחנו במירוץ קדימה כאן. 

אז בעצם, הנקודה העיקרית חושב על זה כצינור הוא שכל צעד בצנרת היא סדרה של בלוטות שמע. המקור שלנו, נניח, הוא מתנד. אנחנו צריכים ליצור צומת מתנד. וזה רק סוג של function-- הקטן והם כולם מבוססים מתוך בהקשר האודים כאן. 

קהל: כאשר אמר מתנד, זה אומר זה בעצם ממש הולך מ שני קטבים שונים קדימה ואחורה? 

יו זאבריסקי: לא, זה כמו ייצוג דיגיטלי. זה למעשה הוא מיושם ב- C ++. אני באמת לא יודע את המפרט איך זה מיושם בפועל, אבל כל זה עובד כנתונים בינאריים. למעשה, כן. שאומר, שאני יכול למעשה, אם אתה מעוניין, אני יכול לשלוח לך קצת יותר מידע על אופן גל נשמרים שפורמט דיגיטלי. בסדר מגניב. 

אז אנחנו מייצרים צליל כמו סינוס גל או משהו כזה, אולי 440 הרץ. אנו יוצרים מתנד. אם אנחנו רוצים להגדיר את עוצמת הקול, אנחנו להתחבר לכל דבר GainNode, שאנחנו יכולים לעשות עם .creategain. שמגדיר הנפח שלך. אתה יכול להעביר את זה על כל של אחר options-- גם, כך מקור חיץ שמע צומת שבו אתה עלול לאחסן MP3, כי אתה כבר עמוס ב. 

מסנן biquad הוא לסינון אם אתה רוצה לקחת את כל הבסיס החוצה של שיר, או משהו כזה. החס וחליל שאתה רוצה לקחת הבסיס מתוך שיר. וצומת AudioDestination היא, שוב, כמו שם השלמת שלנו היא. אם אתה אי פעם מעוניין לראות כל האופציות אפשריות השונות, פשוט ללכת ללשונית ולתת ההשלמה האוטומטית לבוא. ואם אתה יוצר, אתה תראה את כל דברים שונים שאתה יכול ליצור. אתה יכול ליצור דינמי מעבדי תסריט, אני אפילו לא יודע מה זה הוא, לערבוב מיזוגים ערוץ ומפצלי ערוץ וכל זה. מגניב. 

אז זה פשוט דוגמא של צינור. אז יש לנו שלושה מקורות הקרובים ב. אולי אלה הם צורות גל, אולי אלה הם קבצי MP3. אחד עובר מסנן, עוד אחד של אחר מקבל מעוותת צילום פנורמי של אחד משמאל ומימין. אתה יכול לעשות כל מיני דברים ו כולם מתערבבים סביב יחד, ולאחר מכן את מגיע האודים בסוף, כיעד. זוהי דוגמא של מה שיותר קוד אודי אינטרנט מסובך נראה. אתה יוצר את כל אלה אובייקטים שונים תקין כאן-- אני לא בטוח בכך. לא, זה לא להתמקד ב. אוקיי. 

סם גרין: אתה עושה בקרה, מגילה-Up. יו זאבריסקי: בקרת Scroll-- סם גרין: לא, לא. לִשְׁלוֹט-- 

יו זאבריסקי: אה, בקרה, גלול? אה, תפסתי אותך. כֵּן. וואו, לא, לא. אוקיי. אני לא אעשה את זה. 

אז כן, בזה ראשון סעיף כאן, אתה רואה אנחנו יוצרים שונים כל אלה צמתים מתוך ההקשר. אנחנו רק לצרף אותם יחד בחלק השני על ידי פונקציה זו נקראת על התחבר. זה באמת מפתח פונקציה באינטרנט אודיו. זה רק אומר ברגע שאתה עשית משהו עם הצליל בצומת אחד, להעביר את זה הלאה לצומת הבאה. אז יש לנו את המקור, אותו מתחבר למנתח, המנתח עושה עם זה משהו, זה הולך לעיוות, וכן הלאה, וליעד בתחתית ממש כאן. מגניב. אוקיי, אז אנחנו להמשיך לנוע על. 

Pipeline-- שוב, אלה הם הצינורות הנפוצים ביותר, כך אנחנו מדברים על כל הדברים האלה כמו עיוות, צילום פנורמי, את כל הדברים האלה. אם אתה באמת מעוניין בשימוש בדברים Pro כלים, אלה כנראה לעניין אותך. אם לא, אולי אתה פשוט רוצה לשחק הקול, או אולי אתה פשוט רוצה להגדיר את עוצמת הקול בקול. אלה הם הסוג הנפוץ ביותר שני צינורות בייצור אודיו. 

שוב, הדרכים שאתה יכול לקחת את זה כבoscillator-- כך, בוא לעשות ההדגמה של שממש כאן. אז אנחנו הולכים ליצור פשוט הקשר אודים כאן, ושמאנחנו הולכים כדי ליצור מתנד. אז זה, שוב, אנחנו רק הולך לקרוא צור מתנד. אנחנו הולכים להגדיר תדירות ב ש, 440 הרץ, האהוב על כולם. אז אנחנו מתחברים זה ליעד point-- שהוא הדובר, כך יעד ההקשר. לבסוף, רק אנחנו אומרים, להתחיל אפס שניות מעכשיו, ואל לנו להישמע? 

[צִלצוּל] 

יו זאבריסקי: אז הנה. זה רק גל סינוס. בסדר מגניב. ואז לעצור את זה. 

קהל: מאיפה המשוב שמגיע מ? 

יו זאבריסקי: המשוב? אה, כנראה המיקרופונים שלנו. אז כן, זה איך אתה עושה את זה. ובעצם, אם היה לי שמרתי אותו בריצה, יכול להיות התדר ערך כפי שהוא פועל, אז זה דבר כיף לשחק. מגניב. זה תמיד אחד יפה להציג. 

סם גרין: לא נחשוב על זה, לא אנחנו? יו זאבריסקי: כן, זה אחד מגעיל. אז, חיץ loading-- אני אראה דוגמא לכך בסוף מאוד. זה טעינת MP3. ומיקרופון, אתה משתמש רק פונקציה נקרא navigator.getUserMedia () לבקש גישה למשתמש של מיקרופון למידע זה. 

הנה סינון, אני רק להמשיך לנוע מזה. זה די ברמה גבוהה, אבל מסננים רק לאפשר לך 

[צפצוף] סינון גם מאפשר לך כדי ליצור דברים כמו ורוד רעש, רעש חום, רעש לבן. אם אתה רוצה ליצור רעש טהור, ש כמה אנשים אוהבים להתעסק עם, אתה יכול להשתמש באינטרנט אודיו סינון לעשות את זה. 

אודי Panning-- כך לדמיין אם אתה כותב משחק ואתה רוצה את הצליל ל נשמע כמו זה מגיע, כמו, ירי על פני המסך, אתה ניתן להשתמש בצילום פנורמי של אודיו ליצור של קונוס מסוג זה, שlike-- זה די mathy, אבל זה ממש ממש מגניב אם אתה מקבל את זה לעבוד, ויש כמה טוב הדרכות על זה אני יכול לשלוח לך. בעיקרון, אתה יכול סוג של יצירת הצליל משהו הולך על ידי בצורה 3D. ואם יש לך עניין DJ, אתה יכול להתחיל ערבוב ולחצות שירי דהייה. 

זה רק חלק בסיסי מאוד קוד, בעצם מה שעשיתי בעבר. זה קובע את היקף מתנד, כך אנו יוצרים מתנד אשר יוצר את צורת הגל. אנו יוצרים GainNode, להגדיר התדר שלנו, ולאחר מכן חבר את מתנד ל GainNode, אשר לאחר מכן בעצם משנה כמה אות מותרת דרך. אבל באמת, זה דיגיטלי דבר, כך שזה יותר פשוט-- כן. זה לא מה שבאמת קורה, אבל זה מה שקורה בחיים אמיתיים עם רווח. 

קהל: --quantization של פרמטר הנפח? יו זאבריסקי: מצטער? קהל: האם זה פרמטר נפח בדיד? יו זאבריסקי: כן. וזה דבר אחד אני באמת לקוי בידע שלי, איך רווח עובד ברמה דיגיטלית. אני יודע עם בפועל אותות, זה בעצם שליטה כמה אתה מגביר את האות. אז, כן. אני אשלח לך מידע נוסף על כי, משום שאני סקרן למעשה לדעת יותר על זה. אבל בעצם הפרמטרים הם, אחד הוא fold-- signal-- ואפס בקול רם הוא לא לאותת, או לא תשמע כל צליל. אנחנו לדלג זמן הדגמה לכי זה בעצם מה שעשיתי בעבר. ושוב, Context.Destination היא צומת יעד אודיו. מדהים, בסדר. 

אז אני הולך לעשות שתי הדגמות מהירות. איך אנחנו עושים בזמן? 

1 מרצה: כ -10 דקות. 

יו זאבריסקי: 10 דקות? גדול! מדהים. 

אז את הראשון אני הולך אין, זה נקרא השיר האהוב עליי. אז זה פשוט JavaScript HTML הקטן. אנחנו הולכים יש שני כפתורים בדף לנגן את השיר האהוב עליי ולהפסיק את השיר האהוב עליי. אני אשנה את זה. 

קהל: מכסה את המיקרופון שלך. 

יו זאבריסקי: כן. ואני כבר נטענו כאן תסריט שbasically-- וזה באמת שימושי לטעינת MP3, אז זה רק גורם לי טעינת קבצי MP3 דרך מהירה יותר. זה בעצם רק עטיפה. זה פשוט הופך את התהליך טעינה בקבצי MP3 הרבה יותר מהר, אחרת אתה משתמש בקשת HTTP, כמו סוג של מה שאנחנו עושים על פיסה להגדיר עם שרת הנוכחית. זה ממש מכוער, אתה לא רוצה לעשות את זה. 

אז הבחור הזה, בוריס סינוס, כתב באמת כלי קטן ושימושי הנקרא BufferLoader. כל שעליך לעשות הוא פשוט לעבור את זה הקשר, אתה עובר את זה list-- או, כן, זה ברשימה JavaScript? סם גרין: מערך. יו זאבריסקי: הו, זה מערך, זה נכון. זה מערך של נתיבים לקבצים שונים. ואז אתה עובר את זה פונקציה. זה callback שאנחנו מדברים על עם טעינת אסינכרוני. שייקרא פעם אחת את הקבצים שנטענו. ופונקציה שנקראת כאשר הקובץ של טעון לוקח כהיקפי מערך של מאגרים טעונים. כדי שמתרחש כאן. בעיקרון, הוא BufferList הולך להיות value-- אחד או שזה הולך להיות מערך של אורך אחד, שיש בה במדד אפס הקובץ הטעון השלם של MP3. אז מה שאני עושה כשאני גומר טעינה היא, אני פשוט ליצור מקור חיץ, ש היא צומת מקור חיץ שמע. השלב הבא הוא שאני לטעון ב source.buffer כחיץ טעון המלא מBufferList-- זה הרבה buffers-- ואז אתה מחבר את האודים ש חיץ ליעד. אז מה זה הולך לעשות הוא פשוט לשים MP3 ישר דרך לפלט, ולהפעיל אותו באופן מיידי על מקבל שיחה זו. 

מגניב, אז בואו לראות זה קרה בפעולה. [לא ברור] שלי כאן, בואו נראה. אז רק אני הולך להתחיל שרת בסיסי. זה משהו ש אתה צריך לעשות אם אתה מה שהופך את הבקשות לטעינת קבצים. אני הולך להתחיל שרת בסיסי. זה בעצם כולו שלך PSET עכשיו בקו אחד, אבל זה רק מתחיל שרת ביציאה 80/80. אז אנחנו הולכים לכאן, אנחנו הולך לטעון 80/80, אנחנו הולכים ללכת לשיר האהוב עליי. אז אם אני מכה "מחזה שלי השיר אהוב "עכשיו, זה הולך לטעון שלי והשיר אהוב לשחק it-- [MUSIC - הנשרים, "חיים בFAST  נתיב"] --which קורה להיות "חיים ב המסלול המהיר "על ידי הנשרים. עכשיו, אני יכול להכות "אפסיק השיר האהוב "ולהפעיל אותו שוב. 

[MUSIC - הנשרים, "חיים בFAST  נתיב"] 

ואם אני הולך על לנחם, כי הייתי משתנה גלובלי כאן כדי לעקוב אחר ערך זה, זה באמת עכשיו יהיה מוכר בקונסולה. אז זה אוטומטי יוצר-לי. אז זה מה שמשחק עכשיו, ואני יכול פשוט לקרוא source.stop () על ש. ובכן, אתה יודע מה? רק כך אתם שמעתם את זה song-- שאולי תזהה את השיר הזה. 

[MUSIC - ריק אסטלי, "אף פעם לא הולך לתת לי  אותך "] [MUSIC - הנשרים, "חיים בFAST  נתיב"] אנחנו כבר עכשיו כולם Rickrolled. אישור, גדול, נע ב. מגניב. אז זה בעצם דוגמא ל רק איך אתה יכול לטעון MP3 file-- [MUSIC - הנשרים, "חיים בFAST  נתיב"] --and לשחק אותה, ולהפסיק ולהפעיל אותו. הייתי יכול לעשות הרבה יותר [לא ברור] 

האחרון שאני אעשה הוא, אני אראה לך [לא ברור]. 

[השמעת מוסיקה] 

זה כמו, ogg.wave.mp3. אני חושב, אם אני זוכר נכון, אני כבר נתקלתי בכמה בעיות עם .m4a, אבל אני לא בטוח בקשר לזה. אני חושב mp3.wave-- 

[MUSIC - ריק אסטלי, "אף פעם לא הולך לתת לי  אותך "] 

אוקי מצויין. אני לא היה צריך לומר את זה. בכל מקרה, שלום. אז יש לנו את זה פתוח. אז עכשיו כל מה שאני עושה הוא, אני בעצם נוצר תחביר בסיסי ליצירת מוסיקה. אז אם אני עושה משהו כמו, להוסיף G4 על 1 2, מה שזה אומר הוא ש, להוסיף הערת הפסנתר, G4, אשר G הרביעי על הפסנתר מהתחתית. אז זה סוג של MIDI לדבר, אז למי שאינם מבוססים מוסיקה, זה רק הערות MIDI. 

קהל: זה G של התיכון C, נכון? 

יו זאבריסקי: זה G מעל C התיכון, זה נכון. 

קהל: מעל התיכון ג 

יו זאבריסקי: כן. בעצם כן. אני חושב שאני באמת עשיתי זה אחד [לא ברור], אז זה יכול להיות אוקטבה מעל זה. אז בואו לראות. אם אני מכה לנגן-- [הערה PIANO חוזרת] --we're הולך לשמוע את זה. הרעיון הוא שזה פועל בדיוק כמו שורת הפקודה היית, כך שאם אני עולה ויורד על המקלדת שלי, לך יכול לחזור לקודם פקודות, וזה די שימושי. ולהלן הוא הרשימה של שירים שלי, כל שפועלים בלולאה. 

קהל: אתה היה בהנחה מקלדת 88 מקשים על זה, נכון? 

יו זאבריסקי: השאלה הייתה, אני מניח מקלדת 88 מקשים, וכן, אני. מה שעשיתי הוא אני בעצם לקח 88 דגימות של הפסנתר, אחד לכל תו. וכך בכל פעם ש לשמוע פתק מעתה והלאה, כי הוא בעצם לולאה שנראית like-- זה הוא מקבל שיחק בלולאה, כך לכל הערה, זה פועל. מה שקורה הוא, ש ליצור חיץ שוב, אני יוצר צומת רווח כדי להגדיר את עוצמת הקול. זה פשוט באמת דרך מסובכת לומר אני לאחסן את החיץ בsource.buffer. אני נותן לו הרווח, אני לחבר אותו לרווח, הרווח מחובר ל פלט, ואז אני משחק אותה. אז זה סוג של התהליך לקחת במקור חיץ. 

קהל: האם אתה באמת לקחת את זה צליל ויבש לעשות את זה [לא ברור] רטוב? 

יו זאבריסקי: אתה יכול, כן. יש מחדש פועל, יש עיכוב, עיוות. אתה בעצם יכול לשים כל דבר ב בין ל-- גם בכריך ש, צינור הוא מטאפורה טובה יותר, אבל אתה יכול להוסיף כל דבר שב. מגניב. 

אז אני אסיים ההדגמה כאן כדי לתת לך תחושה רק המספר המוחלט של פעמים אתה יכול לרוץ פונקציה שבבת אחת. אז אני הולך להסיר את זה. אני הולך ליצור גנרטור לראות-- בעצם מה does-- זה באמת סוג של syntax-- מסובך אבל זה הולך ליצור הערות על לטוס, ופשוט להתחיל לשחק שלהם כפי שהוא מעריך אותם. [PIANO חציצה] 

אז אנחנו יכולים רק לעשות קצת מוסיקה כאן. [PIANO חציצה] 

אז מה בפקודה זו עושה, למשל, הוא זה לוקח שלוש הערות אלה ל פסנתר ולאחר מכן מעביר אותם על B3. תחביר זה עלול לגרום יותר הגיוני לאלה שיש להם רקע מוסיקה כאן. 

אני יכול להוסיף תוף בעיטה. אני יכול-- 

[חציצת מכשירים] 

--just לשחק עם זה. 

אז אתה יכול make-- [חציצת מכשירים] אחד זה קצת מעצבן יותר. [חציצת מכשירים] 

כך שאופן אקראי מוסיף מצלה יבשה על כל פתק -16, עם 16% [לא ברור]. 

[חציצת מכשירים] 

כן, ולכן הדרך זו works-- זה תמיד ב -4: 4. [חציצת מכשירים] 

כן, אז הארבעה רבעונים, ו16 / 8. [חציצת מכשירים] 

אז בממוצע, אתה מקבל 60% צפיות בהערות ה -16. 

בכל אופן, זה היה רק סוג של להשוויץ חלק מהדברים שאתה יכול לבנות עם אודי API האינטרנט. זה ממש חזק, זה ממש מהר, ואתה יכול לעשות הרבה דברים מגניבים עם זה. אז שוב, כל שאלות שיש לך, הדוא"ל עצמי בתור Hugh-- או סם, ובכנות, לגוגל יש טון של משאבים טובים. כל שאלות האחרונות? כֵּן. 

קהל: אז אתה יכול לגשת ל המיקרופון המובנה. מה אם אתה רוצה להשתמש במיקרופון טוב יותר? יו זאבריסקי: אם אתה רוצה להשתמש במיקרופון טוב יותר? אז שוב, זה חלק מ הפשטה בין Chrome ושאר המחשב שלך. אלא אם כן זה זמין דרך API, כמו API האינטרנט MIDI, כנראה שאתה יכול למצוא כמה פריצות, אבל בדרך כלל לא ריאלי כ. 

סם גרין: אתה יכול גם-- כל Chrome יודע זה מה שמיקרופון ברירת המחדל שלך הוא, וזה שניגש. אז אם היה לך מיקרופון אתה יכול נקבע כברירת מחדל המיקרופון של המחשב, אתה יכול לגשת אליו בדרך זו וזה כנראה יעבוד. יו זאבריסקי: זו נקודה טובה. אף פעם לא ניסיתי את זה, אבל אתה עלול להיות מסוגל סוג ל-- אם להפנות את רמקול הקלט, ייתכן שתוכל לעשות את זה, כן. 

כל שאלות האחרונות? מגניב. ובכן תודה לכם כל כך הרבה עבור צפייה. אני יו. סם גרין: אני סם. יו זאבריסקי: וזה CS50.