صوت HTML5 وWeb Audio API هما أفضل محتوى بالنسبة إلى صنّاع المحتوى

في إطار عملية دمج MediaStream مع WebRTC، نجحت واجهة برمجة التطبيقات Web Audio API مؤخرًا في العثور على أداة سرية تُعرف باسم createMediaElementSource(). ويسمح لك هذا الربط في الأساس بربط عنصر <audio> HTML5 كمصدر إدخال إلى واجهة برمجة التطبيقات. بعبارات بسيطة... يمكنك تصوير صوت HTML5 وإجراء تعديلات صوتية في الوقت الفعلي والفلترة وما إلى ذلك.

في العادة، تعمل Web Audio API من خلال تحميل أغنية عبر XHR2 أو إدخال الملف أو أي نوع....وبعد ذلك، يسمح لك هذا الرابط بدمج <audio>5 HTML5 مع إمكانيات العرض والفلترة والمعالجة في Web Audio API.

يُعتبر الدمج مع <audio> مثاليًا لبث مواد العرض الصوتية الطويلة إلى حدّ ما. لنفترض أنّ مدة الملف هي ساعتان. ولكنك لا تريد تفكيك كل ذلك! وهو أمر مثير للاهتمام أيضًا إذا كنت ترغب في إنشاء واجهة برمجة تطبيقات عالية المستوى لمشغِّل الوسائط (وواجهة مستخدم) للتشغيل والإيقاف المؤقت/تقديم الطلبات، ولكنك تريد إجراء بعض المعالجة/التحليل الإضافية.

إليك كيف تبدو علامة التبويب هذه:

// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);

var context = new webkitAudioContext();
var analyser = context.createAnalyser();

// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
    // Our <audio> element will be the audio source.
    var source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);

    // ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);

كما هو موضّح في الرمز، ثمة خطأ يتطلّب أن يتم ضبط إعدادات المصدر بعد window.onload.

الخطوة المنطقية التالية هي إصلاح crbub.com/112367. عندما يصبح هذا الجرو جاهزًا، ستتمكّن من توصيل WebRTC (واجهة برمجة التطبيقات navigator.getUserMedia() على وجه الخصوص) لتوجيه إدخال الصوت (مثل الميكروفون أو جهاز المزج أو الغيتار) إلى علامة <audio>، ثم تمثيله مرئيًا باستخدام Web Audio API. ازدهار ضخم!