اصنع مشغل MP3 باستخدام Bootstrap

مرحباً بالجميع ، أراكم معي مرة أخرى بورتغاستيا, هذا البرنامج التعليمي هو صنع مشغل mp3 باستخدام عرض التسريع.

حسنًا ، لنقم فقط بإنشاء مجلد ملف جديد في htdocs بالاسم الذي يرجع إليك, مواصلة التنزيل دفعة وانسخ مجلد الأصول إلى الدليل الذي أنشأته للتو, بعد ذلك ، قم أولاً بإنشاء css باسم bootrap-playermusic.css باستخدام البرنامج النصي على النحو التالي وحفظه في دليل الأصول / css.

.مدخلات playa[نوع=نطاق] {
    -webkit-مظهر خارجي:لا شيء;
    -موز-مظهر:لا شيء;
    خلفية-اللون:#ب ب;
	الحدود: 1بكسل صلبة #000;
	ارتفاع:.5في;
	الحدود-نصف القطر:.5في;
    عرض:70%;
	حافة:-2مقصف;
	حشوة:0 !مهم;
	خط-ارتفاع:0;
}
.مدخلات playa[نوع=نطاق]::-webkit-المنزلق-الإبهام {
    -webkit-مظهر خارجي:لا شيء;
    -موز-مظهر:لا شيء;
	مع-فهرس:3;
	ارتفاع:1في;
	عرض:1في;
	الحدود-نصف القطر:1في;
	الحدود:1بكسل صلبة #aaa;
    خلفية-صورة: -webkit-الانحدار(خطي, أعلى اليسار, أسفل اليسار, اللون-قف(0, #الخوف), توقف اللون(0.49, #dddddd), توقف اللون(0.51, #d1d1d1), توقف اللون(1, #A1A1A1));
}
 
.بلايا {
	/*حافة:0;*/
}
 
.بلايا  .ظفري  {
	عرض:25%;
	حشوة:1.5%;
}
 
.بلايا  .BTN-مجموعة  {
	نص-محاذاة:مركز;
}
 
@وسائل الإعلام (ماكس-عرض: 9مقصف) و (دقيقة-عرض: 768مقصف){
	.تمتد 4 .بلايا, .بلايا.تمتد 4{
		حشوة:0;
	}
}
@وسائل الإعلام (دقيقة-عرض: 500مقصف){
	.بلايا .BTN-مجموعة .BTN {
		حشوة:4بكسل 3 بكسل;
		حافة:تلقاءي;
		عرض:في النسق-منع;
		تطفو:لا شيء;
	}
	.بلايا .BTN-مجموعة .تمتد {
		عرض:8%;
	}
	.بلايا .BTN-مجموعة .تمتد 2 {
		عرض:16%;
	}
	.بلايا .BTN-مجموعة .span3 {
		عرض:25%;
	}
	.بلايا .BTN-مجموعة .تمتد 4{
		عرض:33%;
	}
	.بلايا.تمتد 2 .BTN-مجموعة .BTN, .بلايا.تمتد .BTN-مجموعة .BTN, .تمتد 2 .بلايا .BTN-مجموعة .BTN, .تمتد .بلايا .BTN-مجموعة .BTN{
		عرض:100%;
		عرض:منع;
	}
	.تمتد 4.بلايا, .span3 .بلايا, .تمتد 2 .بلايا, .تمتد .بلايا, .بلايا.تمتد 4, .بلايا.span3, .بلايا.تمتد 2, .بلايا.تمتد{
		حشوة:0;
		تجاوز:مخفي;
	}
}

حسنًا ، نقوم بإنشاء ملف js بالاسم bootstrap-playermusic.js, أدخل البرنامج النصي أدناه وانسخ دليل الأصول / js

(وظيفة($) {
	"استخدام صارم";
	$(الصوت[ضوابط]").قبل(وظيفة(){
		أين أغنية = هذه;
			أغنية.ضوابط=خاطئة;
		أين player_box = وثيقة.خلق العنصر("div");
			$(player_box).addClass($(أغنية).أتر('صف دراسي') + "بئر حاويات السوائل بلايا");
		أين البيانات_الثانية = وثيقة.خلق العنصر('الجزء');
			$(البيانات_الثانية).addClass('انهيار');
		أين toggle_holder = وثيقة.خلق العنصر("div");
			$(toggle_holder).addClass("سائل صف مجموعة btn");
		أين data_toggle = وثيقة.خلق العنصر('أ');
			$(data_toggle).لغة البرمجة("<i class="icon-reorder"></أنا>");
			$(data_toggle).addClass("btn-info");
			$(data_toggle).أتر('أسلوب', العتامة:0.3");
			$(data_toggle).انقر(وظيفة (){$(البيانات_الثانية).انهيار("تبديل");});
			$(data_toggle).أتر('عنوان', 'نرى');
			$(data_toggle).تلميح({'حاوية': 'الجسم', 'تحديد مستوى': 'أعلى', 'لغة البرمجة': صحيح});
			$(toggle_holder).ألحق(data_toggle);
		أين جدول البيانات = وثيقة.خلق العنصر('الطاولة');
			$(جدول البيانات).addClass("جدول مكثف");
		أين لاعب = وثيقة.خلق العنصر('الجزء');
			$(لاعب).addClass("سائل صف مجموعة btn");
		أين تحميل_خطأ = وظيفة(){
			وحدة التحكم.سجل('خطأ');
			$(player_box).تجد(".btn btn-خطر").addClass('معاق');
			$(player_box).تجد('إدخال[type="range"]").إخفاء();
			$(player_box).تجد(".icon-spin").نص('خطأ');
			$(player_box).تجد(".icon-spin").الأبوين().أتر('عنوان', "خطأ صوتي لـ loadiang.");
			$(player_box).تجد(".icon-spin").الأبوين().تلميح("fixTitle");
			$(player_box).تجد(".icon-spin").removeClass("رمز الدوران رمز الدوران");
		};
		أين addPlay = وظيفة() {
			أين لعب = وثيقة.خلق العنصر('زر');
				$(لعب).addClass("btn btn-info تعطيل span1");
			لعب.setPlayState = وظيفة(تبديل){
					$(لعب).removeClass('معاق');
				إذا (تبديل === 'لعب') {
					$(لعب).لغة البرمجة("<i class="icon-play"></أنا>");
					$(لعب).انقر(وظيفة () {
						أغنية.لعب();
					});
				}
				إذا (تبديل === 'وقفة') {
					$(لعب).لغة البرمجة("<i class="icon-pause"></أنا>");
					$(لعب).انقر(وظيفة () {
						أغنية.وقفة();
					});
				}
			};
			$(أغنية).على('لعب', وظيفة(){لعب.setPlayState('وقفة');});
			$(أغنية).على('يستطيع اللعب', وظيفة(){لعب.setPlayState('لعب');});
			$(أغنية).على('وقفة', وظيفة(){لعب.setPlayState('لعب');});
			أين نفذ الوقت = 0;
			أين تحميل = تعيين Interval(وظيفة() {
				إذا(isNaN(أغنية.المدة الزمنية) === خاطئة){
					لعب.setPlayState('لعب');
					واضح(تحميل);
					إرجاع صحيح;
				}
				إذا(أغنية.شبكة الدولة === 3 || نفذ الوقت === 75){
					تحميل_خطأ();
					واضح(تحميل);
					إرجاع خاطئة;
				}
				نفذ الوقت++;
			}, 50);
 
			$(لاعب).ألحق(لعب);
		};
		أين addSeek = وظيفة() {
			أين طلب = وثيقة.خلق العنصر('إدخال');
				$(طلب).أتر({
					'نوع': 'نطاق',
					"دقيقة": 0,
					'القيمة': 0,
					'صف دراسي': 'طلب'
				});
			طلب.التقدم = وظيفة () {
				أين bg = 'rgba(223, 240, 216, 1) 0%";
				bg += ", rgba(223, 240, 216, 1) " + ((أغنية.الوقت الحالي/أغنية.المدة الزمنية) * 100) + '٪';
				bg += ", rgba(223, 240, 216, 0) " + ((أغنية.الوقت الحالي/أغنية.المدة الزمنية) * 100) + '٪';
				إلى عن على (أين أنا=0; أنا<أغنية.مخزنة.الطول; أنا++){
					إذا (أغنية.مخزنة.النهاية(أنا) > أغنية.الوقت الحالي && isNaN(أغنية.مخزنة.النهاية(أنا)) === خاطئة && isNaN(أغنية.مخزنة.بداية(أنا)) === خاطئة){
						أين بداية مخزنة;
						أين مخزنة;
						إذا (أغنية.مخزنة.النهاية(أنا) < أغنية.المدة الزمنية) {
							مخزنة = ((أغنية.مخزنة.النهاية(أنا)/أغنية.المدة الزمنية) * 100);
						}
						آخر {
							مخزنة = 100;
						}
						إذا (أغنية.مخزنة.بداية(أنا) > أغنية.الوقت الحالي){
							بداية مخزنة = ((أغنية.مخزنة.بداية(أنا)/أغنية.المدة الزمنية) * 100);
						}
						آخر {
							بداية مخزنة = ((أغنية.الوقت الحالي/أغنية.المدة الزمنية) * 100);
						}
						bg += ", rgba(217, 237, 247, 0) " + بداية مخزنة + '٪';
						bg += ", rgba(217, 237, 247, 1) " + بداية مخزنة + '٪';
						bg += ", rgba(217, 237, 247, 1) " + مخزنة + '٪';
						bg += ", rgba(217, 237, 247, 0) " + مخزنة + '٪';
					}						
				}
				$(طلب).المغلق('خلفية', '-webkit-linear-gradient(اليسار, " + bg + ")");
				//يمكن إعادة تمكينها عندما / إذا كانت المتصفحات الأخرى تدعم الخلفية مثل webkit
				//$(طلب).المغلق('خلفية',- التدرج الخطي(اليسار,  " + bg + ")");
				//$(طلب).المغلق('خلفية',- متدرج خطي(اليسار,  " + bg + ")");
				//$(طلب).المغلق('خلفية','-ms- خطي-الانحدار(اليسار,  " + bg + ")");
				//$(طلب).المغلق('خلفية','الخطي التدرج(إلى اليمين,  " + bg + ")");
				$(طلب).المغلق('لون الخلفية', "#ddd");
			};
			طلب.جلس = وظيفة () {
				$(طلب).فال(أغنية.الوقت الحالي);
				طلب.التقدم();
			};
			طلب.الانزلاق = وظيفة () {
				أغنية.الوقت الحالي = $(طلب).فال();
				طلب.التقدم();
			};
			طلب.فيه = وظيفة () {
				$(طلب).أتر({
					"ماكس": أغنية.المدة الزمنية,
					'خطوة': أغنية.المدة الزمنية / 100
				});
				طلب.جلس();
			};
			طلب.إعادة تعيين = وظيفة () {
				$(طلب).فال(0);
				أغنية.الوقت الحالي = $(طلب).فال();
				إذا(!أغنية.عقدة){أغنية.وقفة();}
				آخر {أغنية.لعب();}
			};
			أين تسعى_تغليف = وثيقة.خلق العنصر("div");
				$(تسعى_تغليف).addClass("btn btn-خطر تعطيل فترة 4");
 
			$(تسعى_تغليف).ألحق(طلب);
			$(طلب).على('يتغيرون', طلب.الانزلاق);
			$(أغنية).على("timeupdate", طلب.فيه);
			$(أغنية).على("البيانات الوصفية المحملة", طلب.فيه);
			$(أغنية).على("تحميل بيانات", طلب.فيه);
			$(أغنية).على("تقدم", طلب.فيه);
			$(أغنية).على('يستطيع اللعب', طلب.فيه);
			$(أغنية).على("يمكن اللعب", طلب.فيه);
			$(أغنية).على("انتهى", طلب.إعادة تعيين);
			إذا(أغنية.جاهز الدولة > 0){
				طلب.فيه();
			}
			$(لاعب).ألحق(تسعى_تغليف);
		};
		أين إضافة وقت = وظيفة() {
			أين زمن = وثيقة.خلق العنصر('أ');
				$(زمن).addClass("btn-info span3");
				$(زمن).تلميح({'حاوية': 'الجسم', 'تحديد مستوى': 'حق', 'لغة البرمجة': صحيح});
			زمن.اثنين من الرقم = وظيفة (myNum) {
				إرجاع ("0" + myNum).شريحة(-2);
			};
			زمن.تقسيم الوقت = وظيفة (أ) {
				إذا (isNaN(أ)){إرجاع "<i class="icon-spinner icon-spin"></أنا>";}
				أين ساعات = رياضيات.أرضية(أ / 3600);
				أين الدقائق = رياضيات.أرضية(أ / 60) - (ساعات * 60);
				أين ثواني = رياضيات.أرضية(أ) - (ساعات * 3600) - (الدقائق * 60);
				أين الوقت = زمن.اثنين من الرقم(الدقائق) + ":" + زمن.اثنين من الرقم(ثواني);
				إذا (ساعات > 0) {
					الوقت = ساعات + ":" + الوقت;
				}
				إرجاع الوقت;
			};
			زمن.موعد العرض = وظيفة () {
				$(زمن).لغة البرمجة(زمن.تقسيم الوقت(أغنية.المدة الزمنية));
				$(زمن).أتر({'عنوان': انقر لإعادة التعيين<hr style="padding:0; حافة:0;" />موضع: " + (زمن.تقسيم الوقت(أغنية.الوقت الحالي))});
				إذا (!أغنية.متوقف مؤقتا){
					$(زمن).لغة البرمجة(زمن.تقسيم الوقت(أغنية.الوقت الحالي));
					$(زمن).أتر({'عنوان': انقر لإعادة التعيين<hr style="padding:0; حافة:0;" />الطول: " + (زمن.تقسيم الوقت(أغنية.المدة الزمنية))});
				}
				$(زمن).تلميح("fixTitle");
			};
			$(زمن).انقر(وظيفة () {
				أغنية.وقفة();
				أغنية.الوقت الحالي = 0;
				زمن.موعد العرض();
				$(زمن).تلميح("fixTitle");
				$(زمن).تلميح('تبين');
			});
			$(زمن).تلميح('تبين');
			$(أغنية).على("البيانات الوصفية المحملة", زمن.موعد العرض);
			$(أغنية).على("تحميل بيانات", زمن.موعد العرض);
			$(أغنية).على("تقدم", زمن.موعد العرض);
			$(أغنية).على('يستطيع اللعب', زمن.موعد العرض);
			$(أغنية).على("يمكن اللعب", زمن.موعد العرض);
			$(أغنية).على("timeupdate", زمن.موعد العرض);
			إذا(أغنية.جاهز الدولة > 0){
				زمن.موعد العرض();
			}
			آخر {
				$(زمن).لغة البرمجة("<i class="icon-spinner icon-spin"></أنا>");
			}
			$(لاعب).ألحق(زمن);
		};
		أين add كتم = وظيفة() {
			أين كتم الصوت = وثيقة.خلق العنصر('زر');
				$(كتم الصوت).addClass("BTN- خطر فترة 1");
			كتم الصوت.check الحجم = وظيفة () {
				إذا (أغنية.الصوت > 0.5 && !أغنية.صامت) {
					$(كتم الصوت).لغة البرمجة("<i class="icon-volume-up"></أنا>");
				} آخر إذا (أغنية.الصوت < 0.5 && أغنية.الصوت > 0 && !أغنية.صامت) {
					$(كتم الصوت).لغة البرمجة("<i class="icon-volume-down"></أنا>");
				} آخر {
					$(كتم الصوت).لغة البرمجة("<i class="icon-volume-off"></أنا>");
				}
			};
			$(كتم الصوت).انقر(وظيفة () {
				إذا (أغنية.صامت) {
					أغنية.صامت = خاطئة;
					أغنية.الصوت = أغنية.oldvolume;
				} آخر {
					أغنية.صامت = صحيح;
					أغنية.oldvolume = أغنية.الصوت;
					أغنية.الصوت = 0;
				}
				كتم الصوت.check الحجم();
			});
			كتم الصوت.check الحجم();
			$(أغنية).على("تغيير الحجم", كتم الصوت.check الحجم);
			$(لاعب).ألحق(كتم الصوت);
		};
		أين add حجم = وظيفة() {
			أين الصوت = وثيقة.خلق العنصر('إدخال');
				$(الصوت).أتر({
					'نوع': 'نطاق',
					"دقيقة": 0,
					"ماكس": 1,
					'خطوة': 1 / 100,
					'القيمة': 1
				});
			الصوت.الانزلاق = وظيفة () {
				أغنية.صامت = خاطئة;
				أغنية.الصوت = $(الصوت).فال();
			};
			الصوت.جلس = وظيفة () {
				$(الصوت).فال(أغنية.الصوت);
			};
			أين المجلد = وثيقة.خلق العنصر("div");
				$(المجلد).addClass("btn btn-info تعطيل span3");
			$(المجلد).ألحق(الصوت);
			$(الصوت).على("change", الصوت.الانزلاق);
			$(أغنية).على("تغيير الحجم", الصوت.جلس);
			$(لاعب).ألحق(المجلد);
		};
		أين addAlbumArt = وظيفة() {
			أين الألبوم = وثيقة.خلق العنصر('img');
				$(الألبوم).addClass('ظفري');
				$(الألبوم).أتر("src", $(أغنية).البيانات("InfoAlbumArt"));
			$(البيانات_الثانية).ألحق(الألبوم);
		};
		أين addInfo = وظيفة(عنوان, معرّف البيانات) {
			أين صف = وثيقة.خلق العنصر("tr");
			أين رئيس = وثيقة.خلق العنصر('العاشر');
			أين البيانات = وثيقة.خلق العنصر('td');
			$(رئيس).لغة البرمجة(عنوان);
			$(البيانات).لغة البرمجة($(أغنية).البيانات(معرّف البيانات));
			$(صف).ألحق(رئيس);
			$(صف).ألحق(البيانات);
			$(جدول البيانات).ألحق(صف);
		};
		أين إضافة البيانات = وظيفة() {
			إذا (نوع من($(أغنية).البيانات("InfoAlbumArt")) !== 'غير معرف'){ addAlbumArt();}
			إذا (نوع من($(أغنية).البيانات("InfoArtist")) !== 'غير معرف'){ addInfo(فنان, "InfoArtist");}
			إذا (نوع من($(أغنية).البيانات("infoTitle")) !== 'غير معرف'){ addInfo('عنوان', "infoTitle");}
			إذا (نوع من($(أغنية).البيانات("InfoAlbumTitle")) !== 'غير معرف'){ addInfo("الألبوم", "InfoAlbumTitle");}
			إذا (نوع من($(أغنية).البيانات("infoLabel")) !== 'غير معرف'){ addInfo('ضع الكلمة المناسبة', "infoLabel");}
			إذا (نوع من($(أغنية).البيانات("infoYear")) !== 'غير معرف'){ addInfo('عام', "infoYear");}
			إذا ($(جدول البيانات).لغة البرمجة() !== ""){
				$(البيانات_الثانية).ألحق(جدول البيانات);
				$(player_box).ألحق(toggle_holder);
				$(player_box).ألحق(البيانات_الثانية);
			}
		};
		أين addPlayer = وظيفة() {
			إذا ($(أغنية).البيانات('لعب') !== 'إيقاف'){ addPlay();}
			إذا ($(أغنية).البيانات('طلب') !== 'إيقاف'){ addSeek();}
			إذا ($(أغنية).البيانات('زمن') !== 'إيقاف'){ إضافة وقت();}
			إذا ($(أغنية).البيانات('كتم الصوت') !== 'إيقاف'){ add كتم();}
			إذا ($(أغنية).البيانات('الصوت') !== 'إيقاف'){ add حجم();}
			$(player_box).ألحق(لاعب);
		};
		أين الإسناد = وظيفة() {
			أين الإسناد = وثيقة.خلق العنصر('صغير');
				$(الإسناد).addClass("سحب اليمين كتم الصوت");
			إذا (نوع من($(أغنية).البيانات("infoAttLink")) !== 'غير معرف'){
				أين رابط_الإحالة = وثيقة.خلق العنصر('أ');
					$(رابط_الإحالة).addClass("صامت");
					$(رابط_الإحالة).أتر("href", $(أغنية).البيانات("infoAttLink"));
					$(رابط_الإحالة).لغة البرمجة($(أغنية).البيانات("infoAtt"));
				$(الإسناد).ألحق(رابط_الإحالة);
			}
			آخر {
				$(الإسناد).لغة البرمجة($(أغنية).البيانات("infoAtt"));
			}
			$(player_box).ألحق(الإسناد);
		};
		أين fillPlayerBox = وظيفة() {
			إضافة البيانات();
			addPlayer();
			إذا (نوع من($(أغنية).البيانات("infoAtt")) !== 'غير معرف'){ الإسناد();}
		};
		fillPlayerBox();
		$(أغنية).على('خطأ', وظيفة(){
			تحميل_خطأ();
		});
		إرجاع player_box;
	});
})(مسج)

عند الانتهاء نقوم بإنشاء ملف index.html, على رأسنا القلقاس css والنص دفعة على النحو التالي

<رئيس>
    <أحرف التعريف="utf-8">
    <عنوان>إنشاء مشغل mp3 مع دفعة</عنوان>
    <اسم ميتا="viewport" المحتوى="width=device-width, المقياس الأولي = 1.0">
    <اسم ميتا="description" المحتوى="">
    <اسم ميتا="author" المحتوى="">
 
    <!-- الأنماط -->
 
		<رابط href="assets/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" وسائل الإعلام="screen">
		<رابط href="assets/css/font-awesome.css" rel="stylesheet" وسائل الإعلام="screen"> 
		<رابط href="assets/css/bootstrap-playermusic.css" rel="stylesheet" وسائل الإعلام="screen"> 
 
    <أسلوب>
      الجسم {
        حشوة-أعلى: 60مقصف; /* 60بكسل لجعل الحاوية تذهب طوال الطريق إلى أسفل الشريط العلوي */
      }
    </أسلوب>
    <رابط href="assets/css/bootstrap-responsive.css" rel="stylesheet">
 
                                   <ارتباط rel="shortcut icon" href="assets/ico/favicon.png">
  </رئيس>

ثم في الجسم نقوم بإدخال البرنامج النصي أدناه لعرض الصورة, عنوان,فنان,التسمية وبالطبع الرابط إلى ملف الموسيقى لدينا هنا, انظر السيناريو أدناه.

<شعبة صف دراسي="container">
		<ضوابط الصوت
البيانات-معلومات-الألبوم-فن="images/logo.jpg"
			البيانات-معلومات-الألبوم-عنوان="Musim Yg Baik"
			البيانات-معلومات-فنان="Sheilaon7"
			البيانات-معلومات-عنوان="Lapang Dada"
			البيانات-معلومات-ضع الكلمة المناسبة="Sony Music Indonesia"
			البيانات-معلومات-عام="2015"
			البيانات-معلومات-إلى="Sheilaon7"
			البيانات-معلومات-إلى-حلقة الوصل="http://sheilaon7.com">
			<المصدر src="music/Sheila On 7 - اغنية لابانغ دادا. mp3" نوع="audio/mpeg" />
		</سمعي>
 
 
	</شعبة>

حسنًا بعد إدخال البرنامج النصي أعلاه ، أدخل البرنامج النصي js المطلوب على النحو التالي

<النصي src="assets/js/jquery.js"></النصي>
    <النصي src="assets/js/bootstrap-transition.js"></النصي>
    <النصي src="assets/js/bootstrap-alert.js"></النصي>
    <النصي src="assets/js/bootstrap-modal.js"></النصي>
    <النصي src="assets/js/bootstrap-dropdown.js"></النصي>
    <النصي src="assets/js/bootstrap-scrollspy.js"></النصي>
    <النصي src="assets/js/bootstrap-tab.js"></النصي>
    <النصي src="assets/js/bootstrap-tooltip.js"></النصي>
    <النصي src="assets/js/bootstrap-popover.js"></النصي>
    <النصي src="assets/js/bootstrap-button.js"></النصي>
    <النصي src="assets/js/bootstrap-collapse.js"></النصي>
    <النصي src="assets/js/bootstrap-carousel.js"></النصي>
    <النصي src="assets/js/bootstrap-typeahead.js"></النصي>
	<النصي src="assets/js/bootstrap-playermusic.js"></النصي>
	<النصي src="assets/js/bootstrap.min.js"></النصي>

ثم index.html الكامل على النحو التالي

<!DOCTYPE html>
<html lang="en">
  <رئيس>
    <meta charset="utf-8">
    <عنوان>إنشاء مشغل mp3 مع دفعة</عنوان>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
 
    <!-- الأنماط ->
 
		<link href="assets/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" media="screen">
		<link href="assets/css/font-awesome.css" rel="stylesheet" media="screen"> 
		<link href="assets/css/bootstrap-playermusic.css" rel="stylesheet" media="screen"> 
 
    <أسلوب>
      الجسم {
        أعلى الحشو: 60مقصف; /* 60بكسل لجعل الحاوية تذهب طوال الطريق إلى أسفل الشريط العلوي */
      }
    </أسلوب>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
 
                                   <link rel="shortcut icon" href="assets/ico/favicon.png">
  </رئيس>
 
  <الجسم>
 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></امتداد>
            <span class="icon-bar"></امتداد>
            <span class="icon-bar"></امتداد>
          </زر>
          <a class="brand" href="http://andeznet.com">AndezNet</أ>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <في ال><a href="#">الصفحة الرئيسية</أ></في ال>
			  <li class="active"><a href="#">موسيقى</أ></في ال>
              <في ال><a href="#">تسجيل خروج</أ></في ال>
            </ال>
          </شعبة><!--/.nav-collapse ->
        </شعبة>
      </شعبة>
    </شعبة>
 
	<div class="container">
		<audio controls
			data-info-album-art="images/logo.jpg"
			data-info-album-title="Musim Yg Baik"
			data-info-artist="Sheilaon7"
			data-info-title="Lapang Dada"
			data-info-label="Sony Music Indonesia"
			data-info-year="2015"
			data-info-att="Sheilaon7"
			data-info-att-link="http://sheilaon7.com">
			<source src="music/Sheila On 7 - اغنية لابانغ دادا. mp3" type="audio/mpeg" />
		</سمعي>
 
 
	</شعبة>
 
	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
					<a name="contact"></أ>
				  <h2>www.andeznet.com</h2>
				  <p class="text-info">مستودع التكنولوجيا & معلومات</ص>
				  <ص>&نسخ; <a href="http://andeznet.com">www.andeznet.com</أ>&نبسب<?بي أتش بي صدى صوت تاريخ("Y");?></ص>
				</شعبة><!--/امتداد-->
			  </شعبة><!--/صف-->
			</شعبة><!--/امتداد-->
	</شعبة><!--/صف-->
 
 
    <script src="assets/js/jquery.js"></النصي>
    <script src="assets/js/bootstrap-transition.js"></النصي>
    <script src="assets/js/bootstrap-alert.js"></النصي>
    <script src="assets/js/bootstrap-modal.js"></النصي>
    <script src="assets/js/bootstrap-dropdown.js"></النصي>
    <script src="assets/js/bootstrap-scrollspy.js"></النصي>
    <script src="assets/js/bootstrap-tab.js"></النصي>
    <script src="assets/js/bootstrap-tooltip.js"></النصي>
    <script src="assets/js/bootstrap-popover.js"></النصي>
    <script src="assets/js/bootstrap-button.js"></النصي>
    <script src="assets/js/bootstrap-collapse.js"></النصي>
    <script src="assets/js/bootstrap-carousel.js"></النصي>
    <script src="assets/js/bootstrap-typeahead.js"></النصي>
	<script src="assets/js/bootstrap-playermusic.js"></النصي>
	<script src="assets/js/bootstrap.min.js"></النصي>
 
  </الجسم>
</لغة البرمجة>

ثم نقوم بتشغيله في متصفحك, إذا كان ناجحًا ، فسيظهر على النحو التالي

مشغل الموسيقى التمهيد

حسنًا ، هذا هو البرنامج التعليمي هذه المرة & المصدر الكامل الذي يمكنك تنزيله هنا.

ترميز سعيد & برمجة

ربما يعجبك أيضا...

9 استجابات

  1. Fanfanra يقول:

    أخيرًا يا أخي. لقد وجدت هذا ايضا,, كنت أبحث هنا وهناك, العناصر الفارغة تبحث عنها بالفعل ولكنها تستخدم الفلاش :v شكرا جزيلا آه قان…
    فقط أعطها يا أخي
    http://ad-itech.blogspot.com

  2. يستطيع يقول:

    إذا كنت تريد عمل قائمة الأغاني ، فماذا عن ذلك يا أخي?

  3. حنيف يقول:

    إذن لتحميل gold bro…

  4. بيما يقول:

    دوه ، إخوانه, الارتباط ميت :"( يمكن إعادة تحميلها 🙂 ?

  5. بيما يقول:

    الحمد لله تستطيع يا أخي, شكرا لك 🙂 إذن تطوير كودك your

Leave a Reply to بورتغاستيا إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *