parsgreen.com
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
related مطالب بیشتر:
» کاربرد متاتگ refresh در صفحات وب (HTML)
» چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
» چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
» آموزش نحوه قرار دادن فیلم و ویدئوهای FLV در وبلاگ و سایت
» نحوه درج علامت های خاص در HTML
commentنظرات (۱۹۳ یادداشت برای این مطلب ارسال شده است)
نویسنده: مهدی
زمان: ۱۷:۱۴:۰۲ - تاریخ: ۱۳۹۱/۰۵/۲۶
سلام
دقیقا دنبال همچین پلیری میگشتم
واقعا ممنون
عالی بود
نویسنده: mohsen
زمان: ۲۲:۳۹:۴۶ - تاریخ: ۱۳۹۱/۰۵/۲۷
سلام از آموزشتون ممنون ولی برای منکه تازه کارم مشخص کنید دقیقا به جای هر کدوم از yoursite.comکدوم یکی از کدها رو باید جای گزین کنم...یه کم واضح تر توضیح بدید..
پاسخ: 
سلام
yoursite.com تنها یک مثال است و در واقع به معنی آدرس سرویس آپلودی است که فایل خود را در آن قرار می دهید، در اینترنت هر فایلی برای اجرا نیاز به یک آدرس مشخص دارد، به فرض اگر فایل فرضی music.mp3 را در سرویس دهنده example.com و در فولدر mymusic آپلود کرده باشید، لینک مستقیم آن به شکل زیر خواهد بود:
http://www.example.com/mymusic/music.mp3
به این صورت آدرس فایل مشخص می شود، حال در کد پلیر، دو فایل را باید آپلود و در کد خود قرار دهید تا آهنگ پخش شود، فایل dewplayer.swf که مربوط به پلیر است، فایل test.mp3 که آدرس آهنگ شما است مطابق الگو می توانید جایگزین کنید.
نویسنده: عباس
زمان: ۲۱:۲۶:۴۷ - تاریخ: ۱۳۹۱/۰۶/۱۳
خیلی از شما ممنونم
نویسنده: علیرضا
زمان: ۲۳:۵۴:۳۶ - تاریخ: ۱۳۹۱/۰۶/۱۳
ممنون...بسیار اموزنده بود
نویسنده: هانیه
زمان: ۱۴:۵۸:۰۴ - تاریخ: ۱۳۹۱/۰۶/۲۶
با سلام. لطفا کامل توضیح بدهید چطور می تونیم کد پخش موسیقی را در وب سایت قرار بدهیم.
پاسخ: 
سلام
کافی است پلیر مورد نظر خود را دانلود، فایل swf را آپلود و آدرس مستقیم آن را جایگزین مقادیر پیش فرض در کد کنید، آهنگ خود را نیز آپلود کرده و آدرس آن را در کد تنظیم نمائید؛ سپس در هر قسمت از سایت خود که امکان درج کدهای html باشد می توانید پلیر را قرار دهید.
نویسنده: سمیرا
زمان: ۱۵:۰۵:۳۸ - تاریخ: ۱۳۹۱/۰۶/۳۱
سلام ، ممنون از مطلب عالیتون
من یه مشکل دارم،
چطور میشه روی این پلیر موزیک گذاشت؟
http://armanha.com/wp-content/plugins/audio-player/assets/player.swf
من هرچقدر تلاش میکنم و اون روی توی کد بالا و با موزیک آپلود شده قرار میدم باز ارور not found رو میده!
میشه راهنماییم کنین، ممنون
پاسخ: 
سلام
اگر به سورس کدهای سایت مورد نظر توجه کنید، پلیر از چند کد و فایل جانبی استفاده می کند که باید برای اجرای صحیح تمام آنها در صفحه وجود داشته باشند، فایل audio-player.js، کد جاوا اسکریپت مربوط به تابع AudioPlayer.setup و کد قسمت مربوط به فایل فلش که به صورت تگ object id مشخص است، البته برای بدست آوردن برخی سورس کدها که به شکل فرم هستند و در حالت عادی قابل مشاهده نمی باشند، باید از قابلیت های مرورگرهایی مانند فایرفاکس استفاده کنید.
نویسنده: سمیرا
زمان: ۲۰:۳۹:۰۲ - تاریخ: ۱۳۹۱/۰۶/۳۱
ممنون
اما منظورم از file not found اینه که موقعی که آدرس موزیک رو توی جای مخصوی توی کد میذارم و اون رو پست میکنم توی صفحه وبلاگ موقع اجرای پلیر file not found رو میده!
اصلا با این پلیر میشه موزیک پخش کرد؟ شما میتونین راه اندازیش کنین؟
ممنونم بازم ازتون
پاسخ: 
بله می شود موسیقی پخش کرد، منتها پلیری که در سایت مورد نظر قرار دارد برای آدرس url فایل های mp3 از سیستم رمزنگاری یا hash استفاده می کند، بهتر است به سایت سازنده پلیر مراجعه و نسخه کامل، رایگان و به همراه نمونه کد و آموزش را دریافت کنید:
http://wpaudioplayer.com/standalone 
اگر برای وردپرس نمی خواهید نسخه standalone را دریافت کنید، فایل های لازم (دو فایل audio-player.js و player.swf) را در یک سرویس آپلود کرده و آدرس ها را در کد جایگزین کنید، فایل mp3 خود را هم جایگزین قسمت mp3_file.mp3 کنید، سپس تمام کدها را در وبلاگ خود قرار دهید (نمونه در سایت مورد نظر وجود دارد).
نویسنده: شیرین
زمان: ۱۴:۳۵:۴۰ - تاریخ: ۱۳۹۱/۰۷/۰۳
ممنون از توضیحات خوبتون خیلی عالیه
من پلیر 3 رو نصب کردم و در وبلاگم گذاشتم می خاستم ببینم اگر بخام چند تا آهنگ که بصورت پشت سرهم در این پلیر بزارم باید چیکار کنم باید چطور آدرس گذاری کنم ؟
پاسخ: 
ظاهرا در قسمت دانلود، در توصیف فایل ها به اشتباه یک جابجایی صورت گرفته بود که اصلاح شد، پلیر شماره 2 قابلیت پخش چند آهنگ را دارد که مثال آن هم در کدهای فایل index.html همراه پلیر آمده است، کافی است آن را در notepad یا در قسمت دیدن سورس کد مرورگر باز کنید.
نویسنده: patriot_67
زمان: ۱۹:۴۵:۰۵ - تاریخ: ۱۳۹۱/۰۷/۱۷
از آموزش هاتون بسیار سپاسگزارم.
اگه ممکنه در مورد jquery هم بنویسید.
نویسنده: saeed
زمان: ۲۰:۰۲:۵۹ - تاریخ: ۱۳۹۱/۰۷/۲۸
عالییییییییییییییییییییییییییییییییییییی بود دمتون گرم واقا ممنونم
نویسنده: فرید
زمان: ۲۰:۳۳:۳۸ - تاریخ: ۱۳۹۱/۰۷/۲۸
سلام
من هر چه کردم نشد که نشد
تو قسمت پخش آهنگ با تگ embed
آدرس آهنگی که آپلود شده رو باید کجا کپی کنم؟
بعد از کلمه مقابل؟ =src
یعنی آدرس رو مابین" " قرار بدم مثل
<embed src="http://uploadkon.ir/?file=love_1.mp3" autostart"
یا اینکه اشتباه میکنم؟
لطفا توضیح بدید
ممنون
پاسخ: 
سلام
مشکل از نوع سرویس دهنده ای است که فایل را در آن آپلود کرده اید، لینک به فایل باید مستقیم باشد و به محض وارد کردن آدرس فایل در مرورگر، پخش یا دانلود شود، لینک فایل شما غیر مستقیم است.
نویسنده: الهام
زمان: ۱۴:۱۰:۵۰ - تاریخ: ۱۳۹۱/۰۸/۰۶
سلام. ممنون از توضیحاتتون. ولی هر چه تلاش کردم موفق نشدم. تمام نظرات و راهنمایی ها رو هم خوندم باز نتونستم!
پاسخ: 
سلام
استفاده از این پلیر نیازمند آشنایی نسبی با اصول وب است، در غیر این صورت ممکن است به نظرتان مبهم بیاید، اما اگر مراحل را گام به گام درست انجام دهید، کار سختی نیست!
نویسنده: asemun
زمان: ۱۹:۳۰:۰۲ - تاریخ: ۱۳۹۱/۰۸/۱۳
سلام خسته نباشید پلیر چند اهنگه رو چطور میشه تو وب قرار داد؟ کد خاصی نداره ؟
پاسخ: 
سلام
درون بسته برنامه یک فایل html جهت نمونه وجود دارد، از سورس کدهای آن جهت نمونه می توانید استفاده کنید.
نویسنده: سهیل
زمان: ۰۰:۱۲:۳۸ - تاریخ: ۱۳۹۱/۰۸/۱۹
ممنون از مطلب فوق العادتون ولی اگه میشه در مورد پلیرهای دیگر هم که از نظر گرافیکی خیلی قشنگتر هستند مطلب بذارید. این پلیر یه کم قدیمی شده و بهتره چند تا جدیدتر هم معرفی کنید.
پاسخ: 
سلام
تشکر از پیشنهاد شما.
نویسنده: صابر
زمان: ۲۲:۴۳:۵۳ - تاریخ: ۱۳۹۱/۰۸/۲۳
سلام
من مثال شما رو با تغییر ادرس آهنگ به اون ادرسی که خودم می خواستم تغییر دادم ولی متاسفانه روی مرور گر هیچ گونه علامت و پلیری نیومد. حتی خود مثال رو هم با notepad به صورت html ذخیره کردم و با مرورگر باز کردم ولی مشکل حل نشد. وقتی index را باز می کنم روی مرورگرم پلیر هست ولی وقتی مثال رو توی وبلاگ قرار می دم هیچی نیست. در ضمن یک سوال دیگر هم داشتم. وقتی اهنگ مورد نظرم رو آپلود می کنم آخرش کد html هست مثلا
music.mp3.html
که در هیچ کدام از مثال های شما این کد وجود ندارد. آیا باید اون رو حذف کرد و در ادرس مورد نظر استفاده کرد یا خیر؟
پاسخ: 
سلام
اینکه پلیر در وبلاگ ظاهر نمی شود یعنی فایل های مورد نیاز آن را به درستی آپلود یا آدرس دهی نکرده اید، اما اینکه آهنگ چرا پخش نمی شود به این دلیل است که فایل شما به صورت لینک مستقیم نیست! سرویس دهنده ای که فایل را درون آن آپلود کرده اید اجازه پخش مستقیم آهنگ را نمی دهد و باید الزاما به آدرس صفحه آن مراجعه شود، فایل آهنگ باید به پسوند mp3 ختم شود نه html.
paged صفحه 1 از 13




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 7
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...