خلال الأشهر القليلة الماضية، ظهرت Web Audio API في WebKit كنظام أساسي مقنع للألعاب والتطبيقات الصوتية على الويب. وبينما يتعرَّف المطورون على هذا البرنامج، أسمع أسئلة مماثلة تتسلل بشكل متكرر. هذا التحديث السريع هو محاولة لمعالجة بعض الأسئلة الأكثر شيوعًا لجعل تجربتك مع Web Audio API أكثر متعة.
س: يُرجى مساعدتي، لا يمكنني إصدار أصوات.
ج: إذا كنت مستخدمًا جديدًا لواجهة Web Audio API، يمكنك الاطّلاع على البرنامج التعليمي للبدء، أو وصفة "إريك" لتشغيل الصوت استنادًا إلى تفاعل المستخدم.
س: كم عدد السياقات الصوتية التي يجب أن أملكها؟
ج: بشكل عام، يجب تضمين AudioContext واحدة في كل صفحة، ويمكن لسياق صوتي واحد أن يدعم العديد من العُقد المرتبطة بها. على الرغم من أنّه يمكنك تضمين عدة سياقات صوتية في صفحة واحدة، قد يؤدّي ذلك إلى تحقيق أداء جيد.
س: لدي AudioBufferSourceNode، ولقد شغّلتُ للتو noteOn()، وأريد تشغيله مرة أخرى، ولكن noteOn() لا يفعل أي شيء! يُرجى مساعدتي بهذا الخصوص.
ج: بعد انتهاء تشغيل عقدة المصدر، لا يمكن تشغيلها مجددًا. لإعادة تشغيل المخزن المؤقت الأساسي، يجب إنشاء AudioBufferSourceNode جديد واستدعاء noteOn().
على الرغم من أن إعادة إنشاء عقدة المصدر قد تبدو غير فعالة، يتم تحسين عُقد المصدر بشكل كبير لهذا النمط. فضلاً عن ذلك، إذا حفظت اسمًا معرّفًا في ميزة AudioBuffer، لن تحتاج إلى تقديم طلب آخر إلى مادة العرض لتشغيل الصوت نفسه مجددًا. إذا وجدت نفسك بحاجة إلى تكرار هذا النمط، يمكنك تشغيل وظيفة مساعد بسيطة مثل playSound(buffer).
س: عند تشغيل صوت، لماذا تحتاج إلى إنشاء عقدة مصدر جديدة في كل مرة؟
ج: فكرة هذه البنية هي فصل مادة عرض الصوت عن حالة التشغيل. وبأخذ تشبيه مشغِّل الأسطوانات، تشبه الموارد الاحتياطية السجلات والمصادر المستخدمة في تشغيل الأغاني. ونظرًا لأن العديد من التطبيقات تتضمن إصدارات متعددة من نفس المورد الاحتياطي قيد التشغيل في وقت واحد، فإن هذا النمط ضروري.
س: كيف يمكنني معالجة الصوت الصادر من علامتَي audio وvideo؟
ج: يعمل MediaElementAudioSourceNode الآن. وعند توفّره، سيعمل تقريبًا على النحو التالي (إضافة تأثير فلتر إلى عيّنة يتم تشغيلها عبر علامة الصوت):
<audio src="sounds/sample.wav" controls>
var audioElement = document.querySelector('audio');
var mediaSourceNode = context.createMediaElementSource(audioElement);
mediaSourceNode.connect(filter);
filter.connect(context.destination);
يتم تتبُّع هذه الميزة في تصحيح الأخطاء هذا. يُرجى العِلم أنّه في هذا الإعداد، ما مِن حاجة لاستدعاء mediaSourceNode.noteOn()، لأنّ علامة الصوت تتحكّم في التشغيل.
س: متى يمكنني الحصول على صوت من ميكروفون؟
ج: سيتم تنفيذ جزء إدخال الصوت كجزء من WebRTC باستخدام getUserMedia، وسيكون متاحًا كعقدة مصدر خاصة في واجهة برمجة تطبيقات Web Audio. وتعمل هذه الخدمة جنبًا إلى جنب مع createMediaElementSource.
س: كيف يمكنني التحقّق عند انتهاء تشغيل AudioSourceNode؟
ج: في الوقت الحالي، يجب استخدام مؤقت JavaScript نظرًا لأن واجهة برمجة تطبيقات Web Audio لا تتيح هذه الوظيفة. ويشكّل المقتطف التالي من البرنامج التعليمي "Getting Started with Web Audio API" مثالاً على ذلك عمليًا:
// Assume source and buffer are previously defined.
source.noteOn(0);
var timer = setTimeout(function() {
console.log('playback finished');
}, buffer.duration * 1000);
هناك خطأ مفتوح لجعل واجهة برمجة التطبيقات Web Audio API تنفّذ معاودة اتصال أكثر دقة.
س: يؤدي تحميل أصوات إلى قفل سلسلة محادثات واجهة المستخدم بأكملها وعدم استجابة واجهة المستخدم. مساعدة!**
ج: استخدِم واجهة برمجة تطبيقات decodeAudioData للتحميل غير المتزامن لتجنُّب حظر سلسلة التعليمات الرئيسية. اطّلِع على هذا المثال.
س: هل يمكن استخدام Web Audio API لمعالجة الأصوات بشكل أسرع من الوقت الفعلي؟
ج: نعم، يتم العمل على التوصّل إلى حل. ترقب التحديثات قريبًا!
س: لقد صممت تطبيقًا رائعًا لواجهة برمجة التطبيقات Web Audio، ولكن عندما تكون علامة التبويب قيد التشغيل في الخلفية، تصبح الأصوات غريبة جدًا.
ج: من المرجّح أنّك تستخدم setTimeouts، والتي تعمل بشكل مختلف إذا كانت الصفحة تعمل في الخلفية. في المستقبل، ستتمكن واجهة برمجة التطبيقات Web Audio API من معاودة الاتصال في أوقات محددة باستخدام الموقّت الداخلي للصوت على الويب (السمة context.currentTime). لمزيد من المعلومات، يُرجى الاطّلاع على طلب الميزة هذا.
بشكل عام، قد يكون من الجيد إيقاف التشغيل عند انتقال التطبيق إلى الخلفية. يمكنك رصد انتقال الصفحة إلى الخلفية باستخدام Page Visibility API.
س: كيف يمكنني تغيير درجة الصوت باستخدام Web Audio API؟
أ: غيِّر playbackRate في عقدة المصدر.
س: هل يمكنني تغيير درجة الصوت بدون تغيير السرعة؟
ج: قد تحتوي واجهة برمجة التطبيقات Web Audio API على PitchNode في سياق الصوت، ولكن يصعب تنفيذه. ويعود السبب في ذلك إلى عدم توفّر خوارزمية واضحة لتغيير العرض التقديمي المخطط في منتدى المحتوى الصوتي. تنشئ الأساليب المعروفة عناصر، خاصة في الحالات التي يكون فيها متغيّرات العرض التقديمي كبيرًا. هناك نوعان من الأساليب لمعالجة هذه المشكلة:
- خوارزميات مجال الوقت، التي تتسبب في تكرار عناصر صدى المقطع.
- تقنيات نطاق التردد، التي تتسبب في خلل في الصوت تردّدًا.
على الرغم من عدم توفّر عقدة أصلية لتنفيذ هذه الأساليب، يمكنك تنفيذ ذلك باستخدام JavaScriptAudioNode. يمكن أن يمثّل مقتطف الرمز هذا نقطة بداية.
س: كيف يمكنني إنشاء AudioContext بمعدَّل عيّنة من اختيارك؟
ج: لا يتوفر أي دعم في الوقت الحالي، ولكننا نبحث في هذا الأمر. اطّلِع على طلب الميزة هذا.
إذا كانت لديك أسئلة إضافية، لا تتردد في طرحها على StackOverflow باستخدام علامة web-audio.