فيديو موسيقي تفاعلي رائع HTML5
يقوم المصممون والمطورون بدفع الظرف مع ما هو ممكن في التصميم التفاعلي على أساس مستمر. وتخرج أمثلة جديدة رائعة طوال الوقت.
واحد من احدث الامثلة هو الفيديو الموسيقى التفاعلية لإيفلين ، من ABBY.
إنه موقع رائع يمنحك الفرصة لخلط الأدوات المختلفة والأساليب الصوتية معًا ، بينما يتم تشغيل الأغنية لتجربة مخصصة تمامًا.
لقد سألنا مطوري البرامج عن كيفية إنشاء هذا الفيديو التفاعلي الرائع ، وحصلوا على نصائحهم للعمل في مشاريع من هذا النوع.
1. من أين أتت فكرة الفيديو؟ ماذا كانت العملية الإبداعية؟
على الرغم من أننا لم نشارك بشكل مباشر في العملية الإبداعية ، سنقدم لك ملخصًا قصيرًا عن كيفية إنشائها.
نحن ، Steffen & Dominik ، أنشأنا وكالة تطوير الويب في برلين bleech متخصصة في HTML5 وتقنيات الويب الحديثة الأخرى. لدينا مكتبنا في مساحة مشتركة مع استوديو تسجيل يديره أعضاء الفرقة آبي . اكتملت المساحة من خلال وكالة حجز ووكالة iOS.
معظمنا قد عرف بعضنا البعض منذ الجامعة وعملنا معا منذ ذلك الحين على العديد من المشاريع المختلفة في العديد من البيئات المتنوعة والإبداعية.
تم تطوير الفكرة الفعلية للفيديو من قبل صديق لنا الذي درس التصميم. كان يحتاج إلى موضوع لأطروحته وكان لديه رؤية لخلق تجربة تفاعلية تتيح للمستخدم تجربة المكونات المختلفة للأغنية الحديثة.
2. هل يمكنك إعطاء نظرة عامة سريعة على عملية إنشاء الفيديو فعليًا ، والخطوات المتبعة ، وما إلى ذلك؟
كان من أكبر التحديات التي تواجه الفرقة اختيار الأدوات المناسبة التي تختلف في صوتها وخصائصها ولكن في نفس الوقت لها صوت لطيف ومتناغم مع بعضها البعض. بالإضافة إلى ذلك ، كان عليهم التأكد من أن إيقاعات وتوافقيات المسارات المدمجة حديثًا لم تتعارض في أي وقت مع بعضها البعض.
نعتقد أنهم قاموا بعمل رائع حقا في هذا الشأن.
تم تطوير الفكرة بأكملها دون التعامل مع أي متطلبات تقنية تتعلق بتكنولوجيا الويب. لذا بدأوا بتسجيل مقطع فيديو واحد لكل مقطع صوتي في استوديو صوتي تاريخي في برلين. وقد نتج عن ذلك إجمالي 20 مقطع فيديو فرديًا ، كان يجب دمجها لجعل الفكرة حقيقة واقعة. في هذه المهمة ، طلبوا من مطور برامج Flash مصدق أن يقوموا بإنشاء موقع على شبكة الإنترنت حيث يمكنك التحكم في المسارات المختلفة وخلط نسختك الخاصة من الأغنية. لسوء الحظ ، واجه بعض الصعوبات في عملية المزامنة من خلال اتصال بالشبكة ، بحيث أن المسودة الأولى لم تصل إلى إصدار نهائي.
عندها دخلنا. شعرنا بتحدي إثبات أنه من الممكن إدخال فكرتهم إلى الحياة بأحدث التقنيات التي لم يستخدمها أحد بعد بهذه الطريقة.
لقد بدأنا في بناء الأساس في بيئة جافا سكريبت قائمة على الاختبار لضمان التواصل المستمر بين مقاطع الفيديو ووحدات التحكم في الوسائط لدينا ووحدة المخطط الزمني العام. يعتني المتحكمون الإعلاميون بتبديل مقاطع الفيديو وعرض المسار المحدد حاليًا فقط. تعمل وحدة المخطط الزمني كوقت مرجعي لكل وحدة تحكم وسائط وتقوم بمزامنتها عند الضرورة.
3. ما هي التحديات غير المتوقعة التي قدمت خلال المشروع؟ ما النصيحة التي تقدمها لمن يرغب في إنشاء مشروع مثل هذا؟
كان جزءًا صعبًا في عملية التطوير هو الحفاظ على مزامنة مقاطع الفيديو دون إجراء العديد من الحسابات وضمان أنه حتى في أجهزة الكمبيوتر القديمة ، يمكن تجربة مستخدم جيدة وسريعة الاستجابة.
كانت الطرق التي اكتشفناها أكثر فعالية هي تجميع العديد من الخوارزميات التي تحافظ على مزامنة الفيديو والتكيف مع أداء الماكينة عن طريق زيادة العتبة وتكرار عدد المرات التي يتم فيها تشغيل المزامنة.
كان التحدي الأكبر على الرغم من ذلك هو الضبط الدقيق في منطقة المللي ثانية ، كما هو الحال بالنسبة لأغنية بها 120 نبضة في الدقيقة ، فمن الواضح أن المستمع قد لاحظ وجود تخالف يبلغ 50 مللي ثانية من أي من المسارات. أخيرًا ، تمكنا من الحصول على جميع مسارات الصوت والفيديو متزامنة بأقل من 10 مللي ثانية على أجهزة الكمبيوتر عالية الأداء (مثل جهاز MacBook Pro / Air 2011).
إذا كنت تخطط لتطوير مشروع HTML5 قائم على الوسائط ، فاستعد لليالي بلا نوم لتحسين أجزاء صغيرة من الكود ، وأخطاء المستعرض غير المتوقعة ، ومليون طريقة ممكنة لتنفيذ وظيفة واحدة.
4. أين ترى هذا النوع من المحتوى في العامين المقبلين؟
نأمل أن يبدأ المزيد من المطورين في تجربة مشاريع الويب المتعلقة بالإعلام ، ونأمل أن يتم إنشاء إطارات جديدة للتطبيقات الغنية بالوسائط. حتى هذه النقطة ، لا تزال Java (معالجة) و Flash بعض المزايا لحالات استخدام معينة.
من أبرز التطورات في HTML5 في الوقت الحالي إمكانات الصوت والفيديو ، ونحن نتطلع إلى ميزات مثل mediacontroller أو عنصر الجهاز الذي يتم تنفيذه في المتصفحات الجديدة.
من خلال تقنيات الخادم الحديثة مثل websocket ، ننتظر رؤية تسليم الأحداث في الوقت الفعلي للمستخدم بدلاً من تقديم المحتوى الثابت والمسجّل مسبقًا فقط. بالإضافة إلى ذلك ، سيكون من الرائع مشاهدة المزيد من المحتوى التفاعلي الواسع النطاق الذي يدمج الخبرة الاجتماعية مع القنوات الإعلامية الحالية. الأشياء المعتادة التي يتحدث عنها الجميع الآن ...
يسعدنا أن نكون جزءًا من هذا المشروع وأن نعمل مع فنانين رائعين يتمتعون بخبرات مختلفة. لقد أصبح هذا المشروع رضيعنا الصغير ونحن غارقون بالفعل في الاستجابة الإيجابية.
راجع للشغل ، نحن نبحث عن الناس لدعم فريقنا المتنامي.
ما هي مشاريع HTML5 الرائعة الأخرى التي شاهدتها مؤخرًا؟ اسمحوا لنا أن نعرف في التعليقات!