การเปลี่ยนแปลงใน Web Audio ใน M36

คริส วิลสัน
Chris Wilson

การเปลี่ยนแปลง Web Audio

ที่ Google เราชอบมาตรฐาน เรามุ่งมั่นที่จะสร้างแพลตฟอร์มเว็บตามมาตรฐานที่กำหนด หูดที่เล็กน้อยในเรื่องนี้มีมาระยะหนึ่งแล้วคือการใช้งาน Web Audio API ที่มีคำนำหน้าเป็นเว็บ (โดยเฉพาะออบเจ็กต์ webkitAudioContext) และ Web Audio บางส่วนที่เลิกใช้งานแล้วและเราให้การสนับสนุนอย่างต่อเนื่อง

เดิมมีการวางแผนว่า Chrome 36 จะยกเลิกการรองรับ webkitAudioContext ที่มีคำนำหน้า เนื่องจากเราได้เริ่มรองรับออบเจ็กต์ AudioContext ที่ไม่มีคำนำหน้าแล้ว ปัญหานี้กลายเป็นปัญหามากกว่าที่คาดไว้ ดังนั้น Chrome 36 จึงรองรับทั้งคำนำหน้าและคำนำหน้า อย่างไรก็ตาม แม้กระทั่งใน webkitAudioContext ที่นำมาใช้ใหม่ วิธีการและแอตทริบิวต์เดิมมากมาย เช่น createGainNode และ createJavaScriptNode ได้ถูกนำออกไปแล้ว กล่าวสั้นๆ ก็คือใน Chrome 36 webkitAudioContext และ AudioContext เป็นชื่อแทนของกันและกัน ฟังก์ชันทั้งสองไม่มีความแตกต่าง

เราจะนำการรองรับคำนำหน้าออกทั้งหมดหลังจาก Chrome 36 ซึ่งน่าจะเป็นไปในช่วง 2-3 รุ่น เราจะประกาศไว้ที่นี่เมื่อกำลังจะมีการเปลี่ยนแปลง และเรายังคงติดต่อผู้เขียนเพื่อแก้ไขแอปพลิเคชัน Web Audio ต่อไป

เพราะเหตุใดเราจึงดำเนินการเช่นนี้ แทนที่จะเปลี่ยนกลับไปใช้แบบเดิม ส่วนหนึ่งก็คือเราตั้งใจที่จะถอยหลังไปไกลเกินไป เราจึงได้นำ API เหล่านั้นออกแล้ว และผลข้างเคียงที่ดีสำหรับชื่อแทนนี้ก็คือแอปพลิเคชันสามารถทำงานได้ดีบน Firefox ซึ่งไม่เคยรองรับออบเจ็กต์ AudioContext นำหน้า (และค่อนข้างถูกต้องด้วย) ในการสนับสนุน Web Audio ที่เปิดตัวครั้งแรกเมื่อช่วงฤดูใบไม้ร่วงที่ผ่านมา

ส่วนที่เหลือของการอัปเดตนี้จะให้คำแนะนำในการแก้ไขสิ่งที่โค้ดอาจเสียหายเนื่องจากการเปลี่ยนแปลงนี้ ข้อดีอย่างหนึ่งในการแก้ปัญหาเหล่านี้คือ โค้ดของคุณมักจะใช้งานได้ใน Firefox ด้วย! (ฉันคิดมานานแล้วว่าแอปพลิเคชัน Vocoder ของฉันเสียเพราะการใช้งาน Firefox แต่กลับกลายเป็นหนึ่งในปัญหาเหล่านี้!)

หากคุณเพียงต้องการที่จะเริ่มต้นใช้งาน คุณอาจต้องไปที่ไลบรารี monkey-patch ที่ฉันเขียนไว้สำหรับแอปพลิเคชันซึ่งเขียนลงในโค้ด Web Audio แบบเก่าซึ่งสามารถช่วยคุณเริ่มต้นใช้งานและทำงานได้ในระยะเวลาต่ำสุดเนื่องจากไลบรารีจะใช้ชื่อแทนของออบเจ็กต์และวิธีการอย่างเหมาะสม อันที่จริงแล้ว แพตช์ของรายการไลบรารีเป็นแนวทางที่ดีในสิ่งที่มีการเปลี่ยนแปลง

ประเด็นแรกและสำคัญที่สุด

คุณควรอ้างอิงถึง window.webkitAudioContext แทน window.AudioContext บ่อยครั้งที่ปัญหานี้ได้รับการแก้ไขด้วยวิธีง่ายๆ

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

หากแอปตอบสนองด้วยข้อความเช่น "ขออภัย เบราว์เซอร์ของคุณไม่รองรับ Web Audio โปรดใช้ Chrome หรือ Safari" ซึ่งค่อนข้างชัดเจนว่ากำลังค้นหา webkitAudioContext นักพัฒนาซอฟต์แวร์แย่! คุณสนับสนุน Firefox มาหลายเดือนแล้ว

แต่มีการลบโค้ดแบบละเอียดยิ่งขึ้นอีก 2-3 รายการ ซึ่งบางครั้งอาจไม่ชัดเจน

  • ค่าคงที่ประเภทแจกแจง 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 ของข้อมูลเสียงที่เข้ารหัสแบบซิงโครนัสถูกนำออกแล้ว การเรียกแบบซิงโครนัสที่ใช้เวลานานๆ จึงจะเป็นการเขียนโค้ดที่ไม่เหมาะกับการเขียนโค้ด ให้ใช้การเรียกใช้การถอดรหัสเสียงดิจิทัลแบบอะซิงโครนัสแทน วิธีนี้เป็นการเปลี่ยนแปลงที่ท้าทายอย่างยิ่ง คุณจึงต้องเปลี่ยนขั้นตอนการใช้ตรรกะ แต่ก็เป็นแนวทางปฏิบัติที่จะดีกว่ามาก Ehsan Angkari จาก Mozilla เขียนตัวอย่างที่ดีสำหรับวิธีดำเนินการนี้ในโพสต์เกี่ยวกับการแปลงเป็น Web Audio มาตรฐาน

ข้อผิดพลาดหลายอย่าง (เช่น การเปลี่ยนชื่อ createGainNode และการนำการถอดรหัสแบบซิงโครนัสออกใน createBuffer) จะปรากฎเป็นข้อผิดพลาดในคอนโซลเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์อย่างเห็นได้ชัด อย่างไรก็ตาม ในกรณีอื่นๆ เช่นการใช้งานลักษณะนี้

MULTI_LINE_CODE_PLACEHOLDER_1

จะไม่แสดงขึ้นมาเลย และจะล้มเหลวโดยไม่มีการแจ้งเตือน (myFilterNode.BANDPASS จะเปลี่ยนเป็น "ไม่ระบุ" และการพยายามตั้งค่า .type เป็น "ไม่กำหนด" ก็จะไม่เกิดผลใดๆ เลย แต่เป็นสาเหตุที่ทําให้ตัวแปลงรหัสทำงานล้มเหลว) ในทำนองเดียวกัน เพียงกำหนด filter.type ให้กับตัวเลขที่ใช้ทำงาน ดังนี้

myFilterNode.type = 2;

แต่ตอนนี้ คุณต้องใช้การแจกแจงสตริง

myFilterNode.type = “bandpass”;

คุณอาจต้องการ grep โค้ดของคุณสำหรับคำต่อไปนี้:

  • 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 (ใช่ เพราะจะมีข้อสันนิษฐานที่ผิดพลาดจำนวนมาก แต่เป็นวิธีเดียวที่จะตรวจพบตัวอย่างสุดท้ายข้างต้น)

หากคุณรีบและอยากเปิดใช้งาน ก็เพียงแค่คว้าสำเนาของ ไลบรารี monkeypatch webkitAudioContext ลงในแอปพลิเคชันของคุณ ขอให้สนุกกับการแฮ็กเสียง!