hits counter
الرئيسيةس .و .جبحـثالتسجيلدخول
دعم شباب الآن: لدينا 8248 موضوع ، و 1991 عضو ، آخر عضو مسجل : نغم سات فمرحباُ به.



اجمل طريقة لوضع مقطع صوتي في موقعك
avatar
THE QM
إدارة الموقع
 
المشاركات : 7657
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22
موضوع: اجمل طريقة لوضع مقطع صوتي في موقعك







السلام عليكم



بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته مع ال HTML5

حان الان دور audio ; لدالك دعونا نأخد وقتنا لنتعلم هذا العنصر الرائع




تحميل (Download) مثال (Demo)




فالأن وبعد طول انتظار اتت لنا خاصية ال HTML5 لتسريع الاستماع من جهة

و من جهة أخرى نجد متصفحات اكثر تعقيدا و أكثر ذكاءا ...

لكن هذا ليس معنى أن تكون لغة HTML5 في غير صالحنا

لأن الذي برمج audiojs جعل هذه الاخيرة تتوافق مع كل من


Mobile Safari iOS 3

Android2.2+, w/Flash

Safari 4

Chrome 7

Firefox 3+, w/ Flash

Opera 10+, w/ Flash

IE 6, 7, 8, w/ Flash




هل يمكنني استعمال هته الخاصية في مدونتي؟


نعم يمكن و اليوم سنضع شرح بسيط

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم تصميم " تحرير HTML "

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

ثالثا : ضع علامة في خانة توسيع القوالب .

ثم ابحث عن هذا الوسم






الكود:
</head>






و ضع فوقه هدا كود




الكود:


[center]<script src="http://dl.dropbox.com/u/17686000/blogspacetech/audio.min.js"></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});

</script> [/center]





أو يمكنك تحميل الملف من الموقع الاصلي

و اعادة رفعه...

الان نبحث عن هدا الوسم






الكود:
]]></b:skin>




و نضع فوقه هدا الكود
الكود:
[center][color=black][font=Arial]

.audiojs {
width: 460px;
height: 36px;
background: #404040;
overflow: hidden;
font-family: monospace;
font-size: 12px;
background-image:
-webkit-gradient(linear, left top, left bottom, color-stop(0, #444),
color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}[/font][/color]
[color=blue][font=Arial]
[/font][/color]


أخيرا : استعرض مدونتك ثم احفظ قالبك.



شرح كيفية الإستخدام



قم بكتابة تدوينتك بالطريقة المعتادة

و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,

أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة




<div> <audio src="رابط الملف الصوتي." preload="auto" /> </div>





هناك خاصيتان اساسيتان في الاضافة

التشغيل التلقائي للملف الصوتي autoplay

او تشغيل الى غير مسمى loop


الكود:
<audio src="[color=lime]رابط الملف الصوتي[/color]" [color=orange]autoplay[/color] />

الكود:

<audio src="[color=lime]رابط الملف الصوتي[/color]" [color=orange]loop[/color] />



كما يمكنك اختيار احد المواقع لرفع ملفات mp3




dropbox

fileden[/center]



إقرأ المزيد » إضافة مقطع صوتي بتقنية HTML5 | الفضاء التكنولوجي



كن بالقرب :
follow me @HDagash


التعليقات
لا يوجد حالياً أي تعليق

تفضّل شارك بتعليقك

دعم شباب  :: تطوير المواقع والمنتديات :: تطوير المواقع-