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

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

تعمل واجهة برمجة التطبيقات Web Audio API عادةً من خلال تحميل أغنية عبر XHR2 أو إدخال ملف أو أيّ طريقة أخرى، ويمكنك البدء في استخدامها. بدلاً من ذلك، تتيح لك هذه الإضافة الجمع بين <audio> 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() API على وجه الخصوص) بمسار الإدخال الصوتي (مثل الميكروفون أو أداة المزج أو الغيتار) إلى علامة <audio>، ثم عرضها باستخدام Web Audio API. رائعة.