إضافة مقطع صوتي بتقنية HTML5

13‏/01‏/2011




السلام عليكم

بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته  مع ال 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>



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



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

</script>



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

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

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



]]></b:skin>


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



.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);
}


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


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


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

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

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


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



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


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

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


<audio src="رابط الملف الصوتي" autoplay />

<audio src="رابط الملف الصوتي" loop />



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






هذا كل شيئ أتمنى لك الاستفادة