اصنع مشغل 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"></النصي>
</الجسم>
</لغة البرمجة>ثم نقوم بتشغيله في متصفحك, إذا كان ناجحًا ، فسيظهر على النحو التالي
حسنًا ، هذا هو البرنامج التعليمي هذه المرة & المصدر الكامل الذي يمكنك تنزيله هنا.
ترميز سعيد & برمجة
أخيرًا يا أخي. لقد وجدت هذا ايضا,, كنت أبحث هنا وهناك, العناصر الفارغة تبحث عنها بالفعل ولكنها تستخدم الفلاش :v شكرا جزيلا آه قان…
فقط أعطها يا أخي
http://ad-itech.blogspot.com
حسنا رشفة غان
إذا كنت تريد عمل قائمة الأغاني ، فماذا عن ذلك يا أخي?
إذن لتحميل gold bro…
رجاء
دوه ، إخوانه, الارتباط ميت :"( يمكن إعادة تحميلها 🙂 ?
https://drive.google.com/file/d/0B03I4luxHtqIRV8yT1ctYWRXVGs/view?usp=sharing هل يمكنك استخدام هذا أم لا
الحمد لله تستطيع يا أخي, شكرا لك 🙂 إذن تطوير كودك your
حسنا, شكرا لزيارتك ايضا