المقدمة: هذا ملخص للعروض التوضيحية الصغيرة التي تعلمتها مؤخرًا. لا يزال الطريق طويلًا لاستخدامها ، لكن لا يزال من الجيد ممارسة نقاط المعرفة وتوحيدها. في الآونة الأخيرة ، كنت أتصفح الكود المصدري لكتب JS و boostrap.css. بعد القيام بهذا العرض التوضيحي ، إنها نهاية مؤقتة. التالي هو رمز المصدر لـ jQuery ورمز المصدر لـ boostrap.js. المهمة شاقة جدا. هيا ، لن نشر الكود في المقالة بأكملها. إذا كنت مهتمًا ، يمكنك إرسال رسالة لي ويمكنك تمرير الرمز إليك ~
نص:
أولا ، الاداءات
1. التصميم: لا يمكن القضاء على التصميم المستجيب والتكيفي في boostrap. ثم يتم تداخل الصف المتداخل في الحاوية جانبا وعلامة رئيسية (H5 جديدة) و div (id = "musicConsole") على التوالي. بصرف النظر عن قائمة الموسيقى على اليسار ، Main هو مربع عرض الأغاني على اليمين ، و Div هو مربع التحكم أدناه.
2. وظائف التنفيذ الرئيسية:
(1) إضافة أغاني (أيقونة "+" في الزاوية اليمنى العليا من قائمة الأغاني) وحذف الأغاني (أيقونة "ترامب" في الزاوية اليمنى العليا من قائمة الأغنية)
(2) انقر على الأغنية في قائمة الأغاني: سيتم تشغيل المسار ؛ إذا كانت هناك كلمات ، فسيتم عرض كلمات الأغاني ، وإذا لم تكن هناك كلمات ، فسيتم عرض "No Lyrics" ؛ سيتغير شريط التقدم والوقت مع تشغيل الأغنية.
(3) انقر فوق الزر السابق (الخط العمودي + مثلث) وسيتم تشغيل الأغنية السابقة: إذا كانت هناك كلمات ، فسيتم عرض كلمات التمرير ، وإذا لم تكن هناك كلمات ، فسيتم عرض "No Lyrics" ؛ سيتغير شريط التقدم والوقت مع تشغيل الأغنية.
سيتغير النقر فوق زر التشغيل (المثلث) إلى زر الإيقاف المؤقت (خطوط عمودية مزدوجة) ، وستتغير الأغنية أيضًا من حالة التشغيل إلى حالة الإيقاف المؤقت وفقًا لذلك.
انقر فوق الزر التالي (خط المثلث + الخط العمودي) وسيتم تشغيل الأغنية التالية: إذا كانت هناك كلمات ، فسيتم عرض كلمات ، وإذا لم تكن هناك كلمات ، فسيتم عرض "No Lyrics" ؛ سيتغير شريط التقدم والوقت مع تشغيل الأغنية.
عند النقر على زر الصوت (مكبر صوت) ، سيصبح زر كتم الصوت (مكبر صوت + "X") ، وستصبح الأغنية أيضًا كتمًا وفقًا لذلك.
سيصبح النقر فوق زر الحلقة (Circle with Arrows) عرضًا واحدًا. الحفاظ على زر الحلقة وسيتم تكرار الحلقة المفردة.
3. مواجهة المشاكل:
(1) يتم تغيير حجم الغليفيكون بحجم الخط
نظرًا لاستخدام أيقونة boostrap ، يكون الحجم الافتراضي صغيرًا جدًا. حاولت العرض والارتفاع ولكن لم أرد. أدركت أنني استخدمت حجم الخط لتغيير الحجم.
(2) str.replace (Oldstr ، NewsTr)
عند النقر فوق زر التشغيل ، سيتم تغيير حالة التشغيل ، وسيتم تغيير رمز الزر وفقًا لذلك. لذلك ، يتم استخدام استبدال ، لكنه لم يستجب لفترة طويلة. اتضح أنه بسبب تجديد سلسلة ، وليس مباشرة على السلسلة الأصلية ، أورز
(3) من الصعب على المتصفحات قراءة الملفات المحلية بسبب اعتبارات الأمان
لقد خططت في الأصل لاستخدام LocalStorage لتخزين المحتويات في قائمة الموسيقى ، لكنني جربتها مع H5's FileReader لفترة طويلة ، ولكن لم يكن هناك طريقة. كان علي الاستسلام.
يمكن استخدام FileReader لقراءة الصور أو ملفات HTML. يمكن أن تحصل طريقة ReadAsdataurl على مسار الملف. الحديث عن هذا ، أريد حقا أن أضحك. حاولت حفظ ملف موسيقى. حسنًا ، دعنا نذهب ، ماذا؟ هل ينفد LocalStorage من الذاكرة؟ 5M يحفظ مسار الملف؟ مضحك لي؟
الأسئلة التالية كلها في كلمات الأغاني. . . أشعر بالتعب الشديد عند القيام بذلك. . .
(4) مشاكل مواجهتها عند تحليل الأغاني
عادة ما تكون كلمات ملفات LRC ، لكنها في الواقع نص عادي. استخدم AJAX لإرسال البيانات من الخلفية ، ولكن لا توجد خلفية للعب معي ، لذلك يمكنني فقط نسخ كلمات الأغاني مباشرة وكتابتها في سلسلة كبيانات ميتة.
تم التخطيط في الأصل لاستخدام SPLIT ('/r/n') لكسر السلسلة إلى كلمات الجملة حسب الجملة ووضعها في صفيف.
نتيجة لذلك ، أبلغت عن أخطاء مختلفة. بعد فترة طويلة من العمل ، وجدته أخيرًا على هذا الانقسام. لقد راجعت ذلك عبر الإنترنت لفترة طويلة ، واتضح أنه وعاء JS.
نظرًا لأن بناء جملة JS لا يجبر نصف فاصلة على إضافتها في النهاية ، فسيتم عالق استخدام سطر النظام (على سبيل المثال ، عودة النقل). هناك خططان رئيسيتان للاستجابة:
1) قم بحذف حرف الخط الجديد يدويًا واستخدام /N NewLine بدلاً من ذلك. سيكون لهذا الحل تأثير سطر جديد على الصفحة.
2) إضافة / قبل حرف كسر سطر النظام ، هذا المخطط ليس له تأثير كسر الخط على الصفحة
(5) مشاكل مواجهة عند التمرير كلمات
بعد إضافة كلمات بنجاح ، يتم عرضها تمامًا ، ولكن يجب مزامنتها مع الموسيقى. مقارنة مع وقت التشغيل الحالي ، ومدى تحرك قائمة الأغاني المقابلة للأعلى ، عندما تكون كلمات الأغاني فارغة ، والحكم الحدودي النهائي ، وبعد حل كل هذه المشكلات ، يظهر تشغيل حلقة ، ولا يمكن عرض كلمات الأغاني مرة أخرى. بعد وقت طويل ، ذهبت إلى هناك. كان ذلك لأنه عندما لا يمكن الاستماع إلى الحدث النهائي. لم يكن هناك طريقة ، لذلك لا يمكنني التخلي عن الحلقة وإضافة حكم الحلقة إلى الحدث النهائي.
حسنًا ، إنه جيد جدًا ، معروض تمامًا ، وأنا متحمس قليلاً. إنه فوضوي قليلاً في كل مكان ، ويظهر الاختبار ما إذا كانت هناك أي مشاكل. عندما اعتقدت أنه سيكون من الممكن الانتهاء ، ارتكبت خطأً آخر [adateference.jpg] ، لذلك دعونا نضبطه. اكتشف أولاً سبب الخطأ. في أداة مطور F12 (ذهبت إلى Baidu ، وهو ما كتبته أعلاه) ، رأيت أنه تمت إضافة كلمات في نفس الوقت ، وبالتالي فإن التمرير لأعلى سيكون سريعًا للغاية ، وسوف يقفز لأعلى ولأسفل. تم العثور على الجاني ، settimeout. لأنها مكالمة متكررة ، هناك حاجة إلى clcleartimeout لمسحها. حسنًا ، لا توجد مشكلة في الأساس الآن.
في وقت لاحق:
آه ، ولأنني مفتون بالغزلان الأحمر مؤخرًا ، فقد أطلقت على لاعب "لاعب المغرب" ~ [Big Brother Bihart] استغرق الأمر ثلاثة أيام لصنع هذا العرض التوضيحي ، وتم تعديل كلمات الأغاني وحدها أكثر من نصف الوقت. ويمكنك أن ترى أن المشكلات الرئيسية التي واجهتها كانت مشاكل عرض الكلمات ، وكنت في حالة سكر. ومع ذلك ، بغض النظر عن ماذا ، لقد صنعتها أخيرًا. رؤية أنه تم طرحه أخيرًا بشكل طبيعي ، كان الشعور بالإنجاز لا يزال جيدًا جدًا. على الرغم من أنه تم ذلك ، تمامًا كما كنت أكتب هذه المدونة ، فقد وجدت الخطأ ORZ مرة أخرى.
ما سبق هو ما قدمه لك المحرر لإنشاء مشغل موسيقى بسيط باستخدام HTML5+Boostrap. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!