السلام عليكم
بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته مع ال HTML5
حان الان دور audio ; لدالك دعونا نأخد وقتنا لنتعلم هذا العنصر الرائع
فالأن وبعد طول انتظار اتت لنا خاصية ال 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>
<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 />
<audio src="رابط الملف الصوتي" loop />
كما يمكنك اختيار احد المواقع لرفع ملفات mp3
هذا كل شيئ أتمنى لك الاستفادة
