تازه های آسمونی
صفحه اصلی > فناوری > اینترنت > آموزش پخش آهنگ در وبلاگ
تبلیغات اینترنتی

آموزش پخش آهنگ در وبلاگ

music education blog آموزش پخش آهنگ در وبلاگ

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

 

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

1- پخش آهنگ با کدهای ساده html و بدون استفاده از پلاگین و کدی اضافه.

2- پخش آهنگ با پلاگین و کدهای جاوا اسکریپت یا فلش.

هر کدام از روش هایی که در بالا گفته شد دارای معایب و محاسنی هستند، پخش آهنگ بدون پلاگین و تنها با استفاده از کدها و تگ های ساده 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>

توضیح :

1- کد بالا علاوه بر مرورگرهای جدید، در نسخه های قدیمی تر نیز اجرا می شود، چرا که ما html 5 را با تگ embed ترکیب کردیم تا اگر مرورگر از قابلیتهای html 5 پشتیبانی نکرد، تگ embed را اجرا کند.

2- همانطور که در کد می بینید، علاوه بر فرمت mp3 از فرمت ogg نیز جهت اطمینان از پخش شدن آهنگ در تمام مرورگرها استفاده شده است.

 

 

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

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

 

dew mp3 player :

پلیری رایگان و قدرتمند است که از خیلی جهات مناسب به نظر می رسد، حتی برخی از سایت ها با اعمال تغییراتی از آن به عنوان ابزار آنلاین پخش آهنگ در وبلاگ استفاده می کنند؛ قدرت این پلیر در حجم بسیار کم، انعطاف پذیری خوب و قابلیتهای گوناگونش نهفته است؛ اگرچه به جزء این پلاگین، برنامه های دیگری نیز در وب وجود دارند، اما معمولا یا رایگان نیستند یا اینکه حجمی به مراتب بیشتر دارند و مخصوصا برای ما کاربران ایرانی که از خیلی جهات در مضیقه ایم مناسب نیستند! 

 

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 جهت راهنمایی بیشتر و آسان تر شدن استفاده از کد، اعمال شده، کافی است که آدرس فایل ها را جایگزین مقادیر پیش فرض کنید.

< اشتراک این مطلب در شبکه های اجتماعی >

🔗 لینک کوتاه: http://www.asemooni.com/?p=70636
تبلیغات اینترنتی

اینم جالبه !

amazon-echo-1-1

فروش 5 میلیون دستگاه اکو آمازون

شرکت آمازون در سال 2014 دستیار صوتی دیجیتالی اکو را روانه بازار کرد و تاکنون …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد.