إضافة مقطع صوتي بتقنية HTML5
السلام عليكم
بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته مع ال 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
هذا كل شيئ أتمنى لك الاستفادة
اضافة مقطع صوتي لمدونات بلوجر
لدينا اليوم طريقة اضافة مقطع صوتي mp3 شبيه للوردبريس
ويدعم الموسيقى مع مجموعة من الترددات العالية والأهم من ذلك يعمل مع جميع المتصفحات.
سهل جدا للاضافة ماعليك فقط اتباع هته الخطوات البسيطة
الخطوة الاولى
من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب –
وبعد اكتمال التنزيل اضغط على توسيع قوالب عناصرواجهة المستخدم
الخطوة الثانية
ابحث عن :
</head>واضف قبلها مباشرة ( أو فوقها) :
<script src='http://blogspacetech.googlecode.com/files/blogspacetechmp3http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/blogspacetechmp3.js' type='text/javascript'/>الان احفظ القالب
الخطوة الثالتة
من لوحة التحكم اضغط على
ارسال رسالة جديدة
– تحرير html
و نضع الكود التالي مع وضع رابط الMP3 Player
<object type="application/x-shockwave-flash" data="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://dl.dropbox.com/u/17686000/blogspacetech/wordpressmp3player/player.swf">
<param name="FlashVars" value="playerID=1&soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>لمزيد من الشرح..
المصدر : Mybloggertricks
