שינויים ב-Web Audio ב-m36

כריס וילסון
כריס ווילסון

שינויים באודיו באינטרנט

ב-Google, אנחנו אוהבים סטנדרטים. השאיפה שלנו היא לבנות את פלטפורמת האינטרנט המוגדרת על ידי תקנים. אחת הבעיות שנוגעות לכך הייתה לאורך זמן על ההטמעה של Web Audio API עם קידומת webkit (בעיקר אובייקט webkitAudioContext), וחלק מקטעי ה-Web Audio שהוצאו משימוש שבהם המשכנו לתמוך.

במקור תוכנן ש-Chrome 36 יפסיק את התמיכה ב-webkitAudioContext עם התחילית webkitAudioContext, כי התחלנו לתמוך באובייקט AudioContext ללא תחילית. התברר שהפתרון הזה בעייתי יותר מהצפוי, ולכן בגרסה Chrome 36 יש תמיכה גם ללא תחילית וגם בקידומת. עם זאת, גם ב-webkitAudioContext שהושק מחדש, הוסרו כמה שיטות ומאפיינים מדור קודם כמו createGainNode ו-createJavaScriptNode. בקיצור, ב-Chrome 36 webkitAudioContext ו-AudioContext הם כינויים אחד של השני; אין הבדל בפונקציונליות בין השניים.

התמיכה בקידומת תוסר לחלוטין אחרי Chrome 36, ככל הנראה כשיהיו כמה גרסאות. נודיע כאן כשהשינוי יהיה קרוב, ואנחנו ממשיכים לפנות למחברים כדי לתקן את אפליקציות Web Audio שלהם.

למה החלטנו לעשות את זה במקום לחזור לשיטה הקודמת? בין היתר, השתדלנו לאמץ יותר מדי אחורה; כבר הסרנו את ממשקי ה-API האלה, ובגלל תופעת לוואי נחמדה לכינוי זה, יישומים יכולים לעבוד לאחר מכן בצורה יפה ב-Firefox, שאף פעם לא תמך באובייקט AudioContext עם קידומת (וממש נכון!) בתמיכת Web Audio שהושקה לראשונה בסתיו האחרון.

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

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

בראש ובראשונה

את כל ההפניות אל window.webkitAudioContext יש להפנות אל window.AudioContext במקום זאת. לעיתים קרובות הבעיה נפתרה באמצעות:

window.AudioContext = window.AudioContext || window.webkitAudioContext;

אם האפליקציה מגיבה לפקודות כמו 'לצערנו, הדפדפן שלך לא תומך ב-Web Audio. צריך להשתמש ב-Chrome או ב-Safari". סביר מאוד שהוא יחפש את webkitAudioContext באופן מפורש. מפתח גרוע! יכולת לתמוך ב-Firefox במשך חודשים!

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

  • הקבועים של סוגי הטיפוסים הממוספרים של BiquadFilter עבור המאפיין .type (שעכשיו הוא מחרוזת) לא מופיעים יותר באובייקט BiquadFilterNode, ואנחנו לא תומכים בהם במאפיין .type. לכן אתם לא משתמשים יותר ב-.LOWPASS (או ב-0) – אתם מגדירים את הערך כ-lowpass.
  • בנוסף, המאפיין Oscillator.type מופיע באופן דומה כמחרוזת מסוג ספירה – לא יותר .SAWTOOTH.
  • PannerNode.type הוא גם סוג של ספירה של מחרוזת.
  • PannerNode.distanceModel הוא גם סוג של ספירה של מחרוזת.
  • השם של createGainNode השתנה ל-createGain
  • השם של createDelayNode השתנה ל-createDelay
  • השם של createJavaScriptNode השתנה ל-createScriptProcessor
  • AudioBufferSourceNode.noteOn() הוחלף על ידי start()
  • גם AudioBufferSourceNode.noteGrainOn() הוחלף ב-start()
  • השם של AudioBufferSourceNode.noteOff() השתנה ל-stop()
  • השם של OscillatorNode.noteOn() השתנה ל-start()
  • השם של OscillatorNode.noteOff() השתנה ל-stop()
  • השם של AudioParam.setTargetValueAtTime() השתנה ל-setTargetAtTime()
  • השמות של AudioContext.createWaveTable() ו-OscillatorNode.setWaveTable() השתנו עכשיו ל-createPeriodicWave() andsetPeriodicWave() '.
  • AudioBufferSourceNode.looping הוסר, לטובת .loop
  • AudioContext.createBuffer(ArrayBuffer, boolean) לפענוח סינכרוני של blob של נתוני אודיו מקודדים הוסר. שיחות סינכרוניות שהשלמתן לוקחות זמן רב הן שיטות קידוד לא תקינות. כדאי להשתמש בקריאה האסינכרונית של decodeAudioData במקום זאת. זהו אחד מהשינויים המאתגרים יותר - עליכם לשנות בפועל את זרימת הלוגיקה - אבל השיטה הזו הרבה יותר טובה. אסאן אנגקרי (Ehsan Angkari) מ-Mozilla כתב דוגמה נחמדה לאופן שבו יש לעשות זאת בפוסט שלו בנושא המרה לאודיו רגיל באינטרנט.

רבות מהן (כמו שינוי השם של createGainNode והסרת הפענוח הסינכרוני ב-createBuffer) יופיעו כמובן במסוף הכלים למפתחים כשגיאות. עם זאת, יש שגיאות אחרות כמו השימוש הזה:

MULTI_LINE_CODE_PLACEHOLDER_1

לא יופיעו כלל וייכשל ברקע (myFilterNode.BANDPASS יהפוך כעת ל'לא מוגדר', והניסיון להגדיר את .type כ-undefined פשוט לא יניב כל תוצאה. דרך אגב, זו הייתה הסיבה לכישלון של המקודד.) באופן דומה, כל מה שצריך לעשות הוא להקצות את filter.type למספר שמשמש לפעולה:

myFilterNode.type = 2;

עכשיו צריך להשתמש במספור המחרוזת:

myFilterNode.type = “bandpass”;

לכן, מומלץ ליצור עותק של הקוד עבור המונחים הבאים:

  • webkitAudioContext
  • .LOWPASS
  • .HIGHPASS
  • .BANDPASS
  • .LOWSHELF
  • .HIGHSHELF
  • .PEAKING
  • .NOTCH
  • .ALLPASS
  • .SINE
  • .SQUARE
  • .SAWTOOTH
  • .TRIANGLE
  • .noteOn
  • .noteGrainOn
  • .noteOff
  • .setWaveTable
  • .createWaveTable
  • .looping
  • .EQUALPOWER
  • .HRTF
  • .LINEAR
  • .INVERSE
  • .EXPONENTIAL
  • createGainNode
  • createDelayNode
  • .type (כן, יהיו לכם הרבה תוצאות חיוביות מוטעות – אבל זו הדרך היחידה להבין את הדוגמה האחרונה שלמעלה!)

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