يقوم AudioContext بتنفيذ التصور الصوتي

لتحقيق تصور صوتي وتحقيق بعض التأثيرات الرائعة، تحتاج إلى استخدام بعض أساليب AudioContext التي توفرها Web Audio API:

تمثل واجهة AudioContext رسمًا بيانيًا لمعالجة الصوت تم إنشاؤه من وحدات صوتية مرتبطة ببعضها البعض، ويتم تمثيل كل وحدة بواسطة AudioNode . يتحكم سياق الصوت في إنشاء العقد التي يحتوي عليها وتنفيذ معالجة الصوت أو فك تشفيره. قبل القيام بأي شيء آخر، تحتاج إلى إنشاء كائن AudioContext لأن كل شيء يحدث داخل السياق. يوصى بإنشاء كائن AudioContext وإعادة استخدامه، بدلاً من تهيئة كائن AudioContext جديد في كل مرة، واستخدام كائن AudioContext واحد لعدة مصادر وأنابيب صوتية مختلفة في نفس الوقت.

1. قم بإعداد علامات الصوت والقماش

 <audio class="audio" ref='audio' :src='tune' @end='end'></audio>

<canvas ref='canvas' width='300px' height='300px'></canvas>

2. قم بإنشاء وإرجاع كائن AudioContext جديد.

 const ctx = new AudioContext();

3. قم بإنشاء كائن MediaElementAudioSourceNode جديد

يتم استخدام طريقة createMediaElementSource() لواجهة AudioContext لإنشاء كائن MediaElementAudioSourceNode جديد، وإدخال عنصر HTML<audio>أو<video>` موجود، ويمكن تشغيل الصوت المقابل أو تعديله.

 const audioSrc = ctx.createMediaElementSource(this.audioElement);

4. قم بإنشاء كائن AnalyserNode

يمكن لطريقة createAnalyser() الخاصة بـ AudioContext إنشاء AnalyserNode ، والتي يمكن استخدامها للحصول على بيانات الوقت والتردد الصوتي وتنفيذ تصور البيانات.

 محلل const = ctx.createAnalyser();

5. قم بتعيين سمة ffSize

قيمة السمة fftSize لواجهة AnalyserNode هي قيمة عددية طويلة غير موقعة، والتي تمثل حجم نافذة العينة (الإشارة). تُستخدم هذه العينات (الإشارة) للحصول على بيانات مجال التردد عند إجراء تحويل فورييه السريع (FFT). يجب أن تكون قيمة السمة fftSize قوة غير صفرية تبلغ 2 في النطاق من 32 إلى 32768؛ وقيمتها الافتراضية هي 2048.

 Analysis.fftSize = 512;

6. ربط audioSrc والمحلل

تتيح لك طريقة connect() الخاصة بواجهة AudioNode توصيل مخرجات العقدة بهدف محدد. قد يكون هذا الهدف المحدد عبارة عن AudioNode آخر (وبالتالي توجيه البيانات الصوتية إلى العقدة المحددة التالية) أو AudioParam بحيث تكون العقدة السابقة. يمكن لبيانات الإخراج تغيير قيمة المعلمة التالية تلقائيًا مع مرور الوقت.

 audioSrc.connect(analyser);

7. محلل الارتباط وctx.destination

تقوم الخاصية destination لـ AudioContext بإرجاع AudioDestinationNode الذي يمثل عقدة الوجهة النهائية لجميع (العقد) الصوتية في context ، والتي تكون بشكل عام جهاز عرض صوتي، مثل مكبر الصوت.

 محلل.الاتصال (ctx.destination)

8. الأغنية قيد التشغيل

يمثل نوع الصفيف Uint8Array مصفوفة عدد صحيح غير موقعة ذات 8 بت، وتتم تهيئة المحتوى إلى 0 عند إنشائه. بعد الإنشاء، يمكن الرجوع إلى العناصر الموجودة في المصفوفة ككائنات أو باستخدام فهرسة المصفوفة المنخفضة.

تقوم getByteFrequencyData() 方الخاصة بواجهة AnalyserNode بنسخ بيانات التردد الحالية إلى Uint8Array الوارد (صفيف البايت غير الموقع).

إذا كان طول المصفوفة أقل من AnalyserNode.frequencyBinCount ، فسيتم حذف العناصر الإضافية Analyser وإذا كان أكبر، فسيتم تجاهل العناصر الإضافية للمصفوفة.

 التصور () {

const arr = new Uint8Array(this.analyser.frequencyBinCount);

this.analyser.getByteFrequencyData(arr);

this.draw(arr);

},

9. استخدم القماش لرسم الخرائط الصوتية

تقوم طريقة HTMLCanvasElement.getContext() بإرجاع سياق canvas ، أو تكون خالية إذا لم يتم تعريف السياق ثنائي الأبعاد، مما يؤدي إلى إنشاء سياق عرض ثنائي الأبعاد CanvasRenderingContext2D.

 this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { Canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight); .clientWidth / 2) - ((arr.length / 2) * 3)); arr.forEach((item, Index) => { this.canvas.beginPath(); this.canvas.strokeStyle = '#B2AFF4'; this.canvas.lineWidth = 3; this.canvas.moveTo(start + (index * 4), this.canvasHeight); lineTo(start + (index * 4), this.canvasHeight - item / 2); this.canvas.stroke();}

عرض التأثير:

وبهذا تنتهي هذه المقالة حول AudioContext للتصور الصوتي (مشاركة تكنولوجيا الويب). لمزيد من المعلومات حول AudioContext للتصور الصوتي، يرجى البحث في المقالات السابقة على downcodes.com أو متابعة تصفح المقالات ذات الصلة أدناه، وآمل أن تقرأ المزيد في المستقبل دعم downcodes.com!