كيفية دفق الصوت المقطوع باستخدام واجهة برمجة تطبيقات MediaSource
مع ال واجهة برمجة تطبيقات MediaSource, يمكنك توليد وتكوين تيارات وسائل الإعلام الحق في المتصفح. انها تسمح لك ل إجراء مجموعة متنوعة من العمليات على بيانات الوسائط التي تحتفظ بها علامات HTML ذات الصلة وسائل الإعلام مثل أو . على سبيل المثال ، يمكنك ذلك خلط تيارات مختلفة, إنشاء تداخل الوسائط, وسائل الاعلام كسول الحمل, و تحرير مقاييس الوسائط مثل تغيير حجم أو التردد.
في هذا المنشور ، سنرى على وجه التحديد كيفية القيام بذلك دفق عينة الصوت (ملف MP3 مقطوع) مع واجهة برمجة تطبيقات MediaSource الحق في المتصفح من أجل الموسيقى قبل العرض لجمهورك. سوف نغطي كيفية الكشف عن دعم API, كيف قم بتوصيل عنصر وسائط HTML إلى API ، وكيفية جلب وسائل الإعلام عبر اياكس ، وأخيرا كيف تيار ذلك.
إذا كنت تريد أن ترى مقدما ما نحن عليه ، إلقاء نظرة على شفرة المصدر على جيثب, أو تحقق من الصفحة التجريبية.
الخطوة 1. إنشاء HTML
لإنشاء HTML ، أضف علامة مع ضوابط صفة، عزا الى صفحتك للتوافق مع الإصدارات السابقة ، أيضًا إضافة رسالة خطأ افتراضية للمستخدمين الذين لا تدعم متصفحاتهم الميزة. سنستخدم JavaScript لتشغيل / إيقاف هذه الرسالة.
الخطوة 2. الكشف عن دعم المتصفح
في JavaScript ، قم بإنشاء حاول ... كتلة تلك الإرادة رمي خطأ إذا كان واجهة برمجة تطبيقات MediaSource غير مدعومة بواسطة متصفح المستخدم ، أو ، بعبارة أخرى إذا مصدر إعلامي (المفتاح) غير موجود في ال نافذة او شباك موضوع.
حاول if (! 'MediaSource' في النافذة) رمي ReferenceError جديد ('لا توجد خاصية MediaSource في كائن النافذة.') catch (e) console.log (e)؛ الخطوة 3. كشف دعم MIME
بعد التحقق من الدعم ، والتحقق أيضا من دعم من نوع MIME. إذا كان نوع MIME للوسائط التي تريد دفقها غير مدعوم من قبل المتصفح, تنبيه المستخدم و رمي خطأ.
var mime = 'audio / mpeg'؛ إذا (! MediaSource.isTypeSupported (mime)) alert ('لا يمكن تشغيل الوسائط. وسائط MIME type' + mime + 'غير مدعومة.')؛ رمي ('Media of type' + mime + 'غير مدعوم.') ؛ لاحظ أنه يجب أن يكون مقتطف الشفرة أعلاه وضعت داخل محاولة منع, قبل قبض على كتلة (للرجوع إليها ، اتبع ترقيم السطر أو تحقق من ملف JS النهائي على جيثب).
الخطوة 4. ربط
إنشاء جديد مصدر إعلامي وجوه ، و تعيينها كمصدر لل بطاقة باستخدام URL.createObjectURL () طريقة.
var audio = document.querySelector ('audio')، mediaSource = new MediaSource ()؛ audio.src = URL.createObjectURL (mediaSource) ؛ الخطوة 5. إضافة SourceBuffer يعترض على مصدر إعلامي
عندما عنصر الوسائط HTML يصل إلى مصدر الوسائط وعلى استعداد ل خلق SourceBuffer شاء, واجهة برمجة تطبيقات MediaSource حرائق sourceopen هدف .
ال SourceBuffer موضوع يحمل قطعة من وسائل الإعلام التي تم فك تشفيرها ومعالجتها ولعبها في النهاية. واحد مصدر إعلامي كائن يمكن لدينا متعددة SourceBuffer شاء.
داخل ال معالج الحدث لل sourceopen هدف, أضف SourceBuffer يعترض على مصدر إعلامي مع ال addSourceBuffer () طريقة.
mediaSource.addEventListener ('sourceopen'، function () var sourceBuffer = this.addSourceBuffer (mime)؛)؛ الخطوة 6. جلب وسائل الإعلام
الآن أن لديك أ SourceBuffer كائن ، حان الوقت ل جلب ملف MP3. في مثالنا ، سنفعل ذلك من خلال باستخدام طلب اجاكس.
استعمال arraybuffer مثل responseType, التي يدل على البيانات الثنائية. عندما يتم جلب الاستجابة بنجاح, إلحاقها ل SourceBuffer مع ال appendBuffer () طريقة.
mediaSource.addEventListener ('sourceopen'، function () var sourceBuffer = this.addSourceBuffer (mime) ؛ var xhr = جديد XMLHttpRequest؛ xhr.open ('GET'، 'sample.mp3')؛ xhr.responseType = 'arraybuffer' ؛ xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response) ؛ break ؛ case 404: رمي 'File Not Found' ؛ default: throw 'فشل في جلب file '؛ catch (e) console.error (e)؛؛ xhr.send ()؛)؛ الخطوة 7. تشير إلى نهاية الدفق
عندما تنتهي واجهة برمجة التطبيقات من إلحاق البيانات بـ SourceBuffer ل حدث يسمى updatend مطرود من العمل. داخل معالج الحدث ، استدعاء endOfStream () طريقة مصدر إعلامي إلى تشير إلى أن الدفق قد انتهى.
mediaSource.addEventListener ('sourceopen'، function () var sourceBuffer = this.addSourceBuffer (mime) ؛ var xhr = جديد XMLHttpRequest؛ xhr.open ('GET'، 'sample.mp3')؛ xhr.responseType = 'arraybuffer' ؛ xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response) ؛ sourceBuffer.addEventListener ('updateend'، function (_) mediaSource.endOfStream ()؛ ) ؛ break ؛ case 404: رمي "لم يتم العثور على الملف" ؛ افتراضي: رمي "فشل في جلب الملف" ؛ catch (e) console.error (e)؛؛ xhr.send ()؛) . الخطوة 8. اقتطاع ملف الوسائط
ال SourceBuffer كائن لديه اثنين من الخصائص مسمي appendWindowStart و appendWindowEnd يمثل بداية ونهاية وقت بيانات الوسائط تريد التصفية. الرمز المميز أدناه مرشحات الثواني الأربع الأولى من MP3.
mediaSource.addEventListener ('sourceopen'، function () var sourceBuffer = this.addSourceBuffer (mime)؛ sourceBuffer.appendWindowEnd = 4.0؛…)؛ عرض
وهذا كل شيء ، لدينا يتم دفق عينة الصوت مباشرة من صفحة الويب. ل مصدر الرمز, إلقاء نظرة على لدينا جيثب ريبو وللنتيجة النهائية ، تحقق من الصفحة التجريبية.
دعم المتصفح
اعتبارا من كتابة هذا المنصب ، و مصدر إعلامي ويدعم API رسميا في جميع المتصفحات الرئيسية. لكن الاختبار يدل على أن التنفيذ هو عربات التي تجرها الدواب في فايرفوكس, و Webkit المتصفحات لا تزال تواجه مشاكل مع appendWindowStart خاصية.
كما API MediaSource هو لا يزال في مرحلته التجريبية, قد يكون الوصول إلى وظائف التحرير الأعلى محدودًا ولكن تدفق الأساسية الميزة شيء يمكنك الاستفادة من على الفور.
