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

Chris Wilson
Chris Wilson
X

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

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

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

MULTI_LINE_CODE_PLACEHOLDER_1

จะไม่แสดงเลยและจะดำเนินการไม่สำเร็จโดยไม่มีการแจ้งเตือน (ตอนนี้ myFilterNode.BANDPASS จะแสดงผลเป็น "undefined" และการพยายามตั้งค่า .type เป็น "undefined" จะไม่ทำให้เกิดผลใดๆ ซึ่งนี่ก็คือสาเหตุที่ทำให้ Vocoder ทำงานไม่สำเร็จ) ในทํานองเดียวกัน เพียงกําหนดค่า 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 (ใช่ การดำเนินการนี้จะได้ผลบวกลวงจำนวนมาก แต่นี่เป็นวิธีเดียวที่จะจับตัวอย่างสุดท้ายข้างต้นได้)

เราขอย้ำอีกครั้งว่าหากคุณรีบและต้องการใช้งานทันที ให้คัดลอกไลบรารี webkitAudioContext ที่ใช้การแก้ไขแบบ Monkeypatch ของฉันมาใส่ในแอปพลิเคชัน ยินดีที่ได้รู้จักคุณ