تبلیغات
Fact World - آموزش نحوه قرار دادن آهنگ و موسیقی پس زمینه در وبلاگ و سایت

آموزش برنامه نویسی و مهارتهای وب

article 

آموزش نحوه قرار دادن آهنگ و موسیقی پس زمینه در وبلاگ و سایت

web-audio-playerقرار دادن آهنگ و موسیقی پس زمینه در صفحات وب (وبلاگ و سایت) یکی از مرسوم ترین کارهایی است که معمولا مدیران وبلاگ ها و بعضا مدیران وبسایت ها انجام می دهند، البته آنهایی که در این رابطه تازه وارد تر هستند بیشتر ترجیح می دهند که از ابزار های رایگان وب استفاده کنند تا اینکه خود دست به کار شوند؛ از طرفی کاربران حرفه ای تر همیشه دوست دارند که کمترین وابستگی به سایت ها و ابزارهای سوم شخص (third party) داشته باشند، چون معمولا همراه ابزار، لینک ها و کدهای پنهان و تبلیغاتی نیز قرار دارد و حتی برخی اوقات تعداد زیاد این ابزارها در بارگذاری صفحه نیز اختلال ایجاد می کنند، به همین خاطر در این مطلب قصد داریم آموزش نحوه قرار دادن آهنگ و موسیقی پس زمینه در وبلاگ و سایت را به چند روش توضیح دهیم.

برای پخش یک آهنگ در صفحات وب در مجموع تقریبا دو راه وجود دارد:


- پخش آهنگ با کدهای ساده html و بدون استفاده از پلاگین و کدی اضافه.
- پخش آهنگ با پلاگین و کدهای جاوا اسکریپت یا فلش.
هر کدام از روش هایی که در بالا گفته شد دارای معایب و محاسنی هستند، پخش آهنگ بدون پلاگین و تنها با استفاده از کدها و تگ های ساده html اگرچه خیلی راحت تر و سریع تر است، اما متاسفانه مشکل سازگاری با برخی مرورگرها هنوز حل نشده باقی مانده و البته گویا در نسخه بعدی html یعنی HTML 5، قرار است  این مشکلات با استانداردسازی فرمت ها حل شود؛ روش پخش با استفاده از پلاگین اگرچه معمولا مشکل سازگاری با مرورگرها را حل می کند، اما به دلیل نیاز به بارگذاری عناصری مثل کد جاوا اسکریپت، فلش و... ممکن است برای همه به راحتی قابل استفاده نباشد، البته مشکل در حدی نیست که از آن صرف نظر کنیم؛ در این آموزش سعی می کنیم هر دو روش را توضیح دهیم و انتخاب را به خودتان واگذار می کنیم.

پخش آهنگ با تگ embed در html


یکی از ساده ترین روش های قرار دادن یک آهنگ در پس زمینه استفاده از تگ  embed است.
<embed src="http://your/music/file.mid" autostart="true" loop="true"
width="0" height="0">
</embed>
<noembed>
<bgsound src="http://your/music/file.mid" loop="infinite">
</noembed>
توضیح:
- برای استفاده از این کد تنها کافی است آدرس آهنگ خود را با فرمت mid، wave یا mp3 در دو قسمت مروبط به src جایگزین کنید و کد را در قالب وبلاگ یا سایت قرار دهید.

پخش آهنگ با استفاده از قابلیت html 5 در مرورگرهای جدید


علاوه بر کد بالا، در استاندارد جدید وب (که البته هنوز به طور رسمی ارائه نشده) و در مرورگرهای جدید، تگ audio برای پخش آهنگ بدون پلاگین استفاده می شود:
<audio controls="controls" height="50px" width="100px">
<source src="http://your/music/file.mp3" type="audio/mpeg" />
<source src="http://your/music/file.ogg" type="audio/ogg" />
<embed height="50px" width="100px" src="http://your/music/file.mp3" />
</audio>
توضیح:
- کد بالا علاوه بر مرورگرهای جدید، در نسخه های قدیمی تر نیز اجرا می شود، چرا که ما html 5 را با تگ embed ترکیب کردیم تا اگر مرورگر از قابلیتهای html 5 پشتیبانی نکرد، تگ embed را اجرا کند.
- همانطور که در کد می بینید، علاوه بر فرمت mp3 از فرمت ogg نیز جهت اطمینان از پخش شدن آهنگ در تمام مرورگرها استفاده شده است.

پخش آهنگ با قرار دادن dew mp3 player


اگر با کدهای html قانع نشده اید، در ادامه قصد داریم پلاگینی زیبا، سبک و کارآمد را معرفی کنیم که به کمک آن می توانید با خیالی آسوده تر آهنگ های خود را پخش کنید؛

dewmp3player

پلیری رایگان و قدرتمند است که از خیلی جهات مناسب به نظر می رسد، حتی برخی از سایت ها با اعمال تغییراتی از آن به عنوان ابزار آنلاین پخش آهنگ در وبلاگ استفاده می کنند؛ قدرت این پلیر در حجم بسیار کم، انعطاف پذیری خوب و قابلیتهای گوناگونش نهفته است؛ اگرچه به جزء این پلاگین، برنامه های دیگری نیز در وب وجود دارند، اما معمولا یا رایگان نیستند یا اینکه حجمی به مراتب بیشتر دارند و مخصوصا برای ما کاربران ایرانی که از خیلی جهات در مضیقه ایم مناسب نیستند!
dew web player
این پلاگین را با توجه به نیازتان در چند بسته مختلف برای دانلود قرار داده ایم که هر کدام تفاوتهایی با هم دارند:
دانلود پلیر شماره 1 (پلیر کلاسیک با قابلیت پخش یک آهنگ)
دانلود پلیر شماره 2 (پلیر کلاسیک با قابلیت پخش چند آهنگ و دکمه های کمکی)
دانلود پلیر شماره 3 (پلیر پیشرفته با قابلیت پخش یک آهنگ و افزایش و کاهش صدا)

نحوه استفاده:


هر کدام از بسته های بالا حاوی سه فایل هستند (index.html، test.mp3 و فایل فلش پلیر با فرمت swf)، برای پخش آهنگ باید ابتدا آن را آپلود کنید و لینک مستقیم را در کد جایگزین نمائید، فایل swf پلیر را نیز باید آپلود کنید و آدرس url آن را جایگزین نمائید، به عنوان مثال:
<object type="application/x-shockwave-flash" data="http://yoursite.com/dewplayer.swf?mp3=http://yoursite.com/test.mp3" width="200" height="20" id="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="http://yoursite.com/dewplayer.swf?mp3=http://yoursite.com/test.mp3" />
<param name="flashvars" value="mp3=http://yoursite.com/test.mp3&autostart=0&autoreplay=0" />
</object>
از تگ param flashvars و قسمت autostart=0&autoreplay=0 می توانید برای تنظیم شروع خودکار و پخش مجدد آهنگ استفاده کنید (مقادیر 0 به معنی غیر فعال و 1 فعال است).
تنظیمات پیش فرض مورد نیاز در فایل index جهت راهنمایی بیشتر و آسان تر شدن استفاده از کد، اعمال شده، کافی است که آدرس فایل ها را جایگزین مقادیر پیش فرض کنید.
section دسته بندی: آموزش کاربردی - آموزش کاربردی HTML -


یکشنبه 13 مهر 1393

نظرات ()


جمعه 24 شهریور 1396 03:03 ب.ظ
Hey there! I know this is somewhat off-topic however I had to ask.
Does running a well-established website such as
yours require a lot of work? I'm brand new to writing a blog however I do write in my journal on a daily basis.

I'd like to start a blog so I can easily share my personal experience and feelings
online. Please let me know if you have any suggestions
or tips for brand new aspiring bloggers. Appreciate it!
دوشنبه 16 مرداد 1396 11:45 ب.ظ
It's a shame you don't have a donate button! I'd definitely donate to this fantastic blog!
I suppose for now i'll settle for bookmarking and
adding your RSS feed to my Google account.
I look forward to brand new updates and will talk about this site with my
Facebook group. Talk soon!
دوشنبه 16 مرداد 1396 12:59 ق.ظ
It's the best time to make some plans for the future and it's time to be
happy. I've read this post and if I could I desire to suggest you few interesting things or advice.
Perhaps you could write next articles referring to this article.
I want to read even more things about it!
شنبه 7 مرداد 1396 09:24 ب.ظ
Excellent pieces. Keep writing such kind of
information on your blog. Im really impressed by your blog.


Hello there, You have performed a fantastic job.
I'll definitely digg it and in my opinion suggest to my friends.
I am sure they will be benefited from this web site.
جمعه 1 اردیبهشت 1396 10:22 ب.ظ
BHW
Hello superb website! Does running a blog similar to this require a
lot of work? I have no knowledge of programming however I had been hoping
to start my own blog in the near future. Anyway, should
you have any suggestions or techniques for
new blog owners please share. I know this is off subject however I just
wanted to ask. Kudos!

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )