پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ

اولین گام برای پخش فایل صوتی در وب

قبل از اینکه به روش های درج و پخش فایل صوتی در وب بپردازیم، جهت اجتناب از سردرگمی کاربرانی که شاید آشنایی زیادی با این مقوله نداشته باشند یادآور می شویم که اولین گام برای پخش فایل های صوتی (آهنگ، موسیقی پس زمینه و...) آماده سازی فایل به لحاظ حجم و کیفیت و سپس آپلود آن در فضای سایت شخصی یا سایت های رایگان میزبان فایل است که به کاربر لینک مستقیم ارائه می کنند، منظور از لینک مستقیم این است که آدرس URL فایل باید به فرمت فایل های صوتی مانند mp3 ختم شود، به طور مثال:

http://yoursite.com/music/file.mp3

به این شکل قابل استفاده برای پخش آنلاین نیست:

http://yoursite.com/music/file.mp3.html

همچنین نباید فایل به صورت دو مرحله ای دانلود شود، یعنی نباید کاربر به صفحه دیگری هدایت و سپس فایل دانلود شود، اینگونه سرویس ها برای پخش آنلاین فایل مناسب نیستند!
پس از آپلود فایل و دریافت آدرس URL مستقیم آن، آدرس را در یکی از روش هایی که در ادامه آموزش به آنها خواهیم پرداخت جایگزین کرده و در سورس HTML قالب سایت یا وبلاگ درج می کنیم، در سایت ها باید فایل index مربوط به قالب را پیدا کرده و کد را در آن درج نمائیم که این مسئله بستگی به برنامه ای دارد که سایت با آن راه اندازی شده است (به طور مثال جوملا، وردپرس و...)، در مورد وبلاگ ها نیز معمولا در پنل مدیریت وبلاگ قسمتی برای ویرایش کد قالب وجود دارد که کد نهایی را باید آنجا درج کنیم، برخی سرویس های وبلاگی قسمتی تحت عنوان کدها و اسکریپت های اختصاصی دارند که در این صورت کد نهایی باید در این قسمت درج شود.

پخش فایل صوتی با تگ embed در HTML

اولین و ابتدایی تری روش برای پخش فایل های صوتی در وب استفاده از تگ embed بود که در اصل با هدف پخش پلاگین هایی مانند فلش و فرمت mid یا midi در نسخه های قدیمی HTML در نظر گرفته شده بود، این تگ تقریبا در تمام مرورگرها پشتیبانی می شود اما جزئی از HTML نسخه 4 نیست و اگر در صفحه ای با HTML نسخه 4 از تگ embed استفاده کنیم، کدنویسی ما از نظر سایت W3C و سرویس اعتبار سنجی آن 

https://validator.w3.org

غیرمعتبر خواهد بود، در HTML نسخه 5 مجددا این تگ در نظر گرفته شده و مشکل اعتبارسنجی نخواهیم داشت، اما مشکل اصلی این تگ محدود بودن آن به لحاظ تنظیمات و صرف پشتیبانی آن از فرمت midi است، هرچند ممکن است در برخی مرورگرها فرمت های دیگر مانند mp3 یا wave پشتیبانی شود اما طبق بررسی های صورت گرفته این پشتیبانی کامل نخواهد بود، به هر صورت در شرایطی می توان همچنان برای پخش آهنگ یا درج موسیقی پس زمینه از تگ embed مطابق با نمونه کد زیر استفاده کرد.

<embed src="http://yoursite.com/music/file.mid" autostart="true" loop="true"
width="0" height="0">
<noembed>
<bgsound src="http://yoursite.com/music/file.mid" loop="infinite">
</noembed>

در این نمونه کد ابتدا باید فایل صوتی خود را با فرمت mid یا midi یا فرمت های دیگری مانند wave و mp3 در یک سایت آپلود و آدرس فایل آپلود شده را در دو قسمت که با عبارت src مشخص است درج نمائید، src اول آدرس فایل برای تگ embed است و در صورتی که این تگ به هر دلیل قابلیت اجرا نداشته باشد تگ bgsound در قسمت noembed جایگزین آن می شود، برای نمونه آدرس یک فایل فرضی به صورت زیر در نمونه کد درج شده که باید با آدرس URL فایل خود آن را جایگزین نمائید:

http://yoursite.com/music/file.mid

برای تگ embed می توانیم از خواص (Attributes) آن به عنوان تنظیمات استفاده کنیم که البته متاسفانه خیلی از این موارد در مرورگرهای مختلف به درستی پشتیبانی نمی شوند:
width: عرض پلیر به پیکسل.
height: ارتفاع پلیر به پیکسل.
volume: میزان بلندی صدا از 0 تا 100.
starttime: شروع پخش از زمان دلخواه به طور مثال 2:31.
src: آدرس URL فایل.
type: نوع MIME فایل به طور مثال audio/mid.
pluginurl: آدرس پلاگین خارجی.
align: چینش پلیر به طور مثال right.
autostart: شروع خودکار با مقدار 0 یا 1.
controller و controls: نمایش دکمه های کنترلی پلیر با مقدار 0 یا 1.
hidden: مخفی کردن پلیر با مقدار 0 یا 1.
href: ایجاد لینک.
loop: دفعات تکرار.
mastersound: کنترل صدا از 0 تا 100.
name: تعیین نام پلیر.
playcount: تعداد دفعات پخش فایل صوتی.
pluginspage: صفحه مرجع دانلود پلاگین.
یادآور می شویم که متاسفانه بیشتر این خاصیت ها در مرورگرهای مختلف پشتیبانی نمی شوند و صرفا جنبه آشنایی بیشتر دارند!

پخش فایل صوتی با تگ audio در HTML5

در HTML نسخه 5 که در حال حاضر جدیدترین نسخه از HTML است تگ audio برای پخش فایل های صوتی معرفی شده که به نظر می رسد باید به سمت استفاده از این تگ حرکت کنیم چرا که مرورگرهای مختلف در هر نسخه پشتیبانی خود از این تگ را کامل و کاملتر می کنند و به نوعی می توان گفت که آینده وب به سمت استانداردهای تعریف شده HTML5 در حرکت است، تگ audio بر خلاف تگ embed از فرمت های مختلفی پشتیبانی می کند و حتی این قابلیت وجود دارد که چندین فرمت مختلف را در یک تکه کد برای پخش قرار دهیم تا اگر مرورگری با یک فرمت سازگار نبود به فایل و فرمت بعدی رجوع کند یا مناسب ترین فرمت را از بین فایل های موجود انتخاب نماید:

<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" />
<source src="http://your/music/file.wav" type="audio/wav" />
متاسفانه مرورگر شما از قابلیت های HTML5 پشتیبانی نمی کند!
</audio>

در نمونه کد بالا سه فایل مختلف به عنوان سورس در نظر گرفته شده که مرورگر معمولا به ترتیب به آنها رجوع خواهد کرد، اگر فایل اول پشتیبانی شود نوبت به موارد بعدی نمی رسد اما اگر فرمت فایل پشتیبانی نشود به فایل بعدی و بعدی رجوع خواهد کرد، علاوه بر شیوه بالا حتی می توانیم تگ audio را با تگ embed ترکیب کنیم:

<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" />
<source src="http://your/music/file.wav" type="audio/wav" />
<embed height="50px" width="100px" src="http://your/music/file.mp3" />
</audio>

کد بالا علاوه بر مرورگرهای جدید در نسخه های قدیمی نیز اجرا می شود چرا که HTML5 با تگ embed ترکیب شده تا اگر مرورگری از قابلیت های HTML5 پشتیبانی نکرد تگ embed را اجرا کند، همانطور که در کد مشخص است علاوه بر فرمت mp3 از فرمت ogg و wav نیز جهت اطمینان از پخش شدن آهنگ در تمام مرورگرها استفاده شده است.
خوشبختانه برای تگ audio تنظیمات لازم برای ایجاد امکانات کنترلی در زمان پخش فایل صوتی به اندازه کافی در نظر گرفته شده که به صورت موردی و خلاصه برخی از کاربردی ترین آنها را مرور می کنیم:
controls: نمایش پنل کنترل پلیر در هنگام پخش فایل صوتی، این پارامتر در قسمت audio و به صورت نمونه زیر درج می شود:

<audio controls="controls">

یا

<audio controls>

autoplay: پخش خودکار فایل صوتی، این پارامتر در قسمت audio و به صورت نمونه زیر درج می شود:

<audio autoplay>

دقت داشته باشیم که پخش خودکار آهنگ در وب چندان باب طبع کاربران نخواهد بود، تصور کنید اگر کاربری همزمان چند صفحه وب با پخش خودکار آهنگ و موسیقی پس زمینه را در مرورگر اجرا نماید با چه وضعیتی روبرو خواهد شد!
volume: میزان صدای پیش فرض پلیر را مشخص می کند و با مقداری از 0 تا 100 تعیین می شود، نمونه کد:

<audio volume="50">

muted: در صورت استفاده از این خاصیت، صدای پلیر در حالت پیش فرض قطع خواهد بود، نمونه کد:

<audio muted>

loop: تعداد دفعات پخش مجدد و خودکار فایل صوتی را مشخص می کند، نمونه کد:

<audio loop="8">

ویژگی های ظاهری CSS مانند display و width را می توانیم با در نظر گرفتن class برای تگ audio تعریف کنیم، به طور مثال:

.player {
   display: block;
   width: 100%;
}
<audio class="player">

قاعدتا استایل CSS باید در تگ style تعریف شود که مبحثی جداگانه است و باید در آموزش های مقدماتی CSS آن را فرا گرفته باشیم.

پخش فایل صوتی با درج و استفاده از dewmp3player

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

این پلاگین را با توجه به نیاز کاربران در چند بسته مختلف برای دانلود قرار داده ایم که هر کدام تفاوتهایی با هم دارند:
دانلود پلیر شماره 1 (پلیر وب با قابلیت پخش یک آهنگ)
دانلود پلیر شماره 2 (پلیر وب با قابلیت پخش چند آهنگ و دکمه های قبلی و بعدی)
دانلود پلیر شماره 3 (پلیر وب با قابلیت پخش یک آهنگ و افزایش و کاهش صدا)
هر کدام از بسته های بالا حاوی سه فایل هستند (index.html، test.mp3 و فایل فلش پلیر با فرمت swf که با توجه به نوع پلیر نامگذاری شده اند)، همان طور که گفتیم برای پخش آهنگ باید ابتدا آن را در یک سرویس میزبان فایل آپلود و آدرس URL مستقیم را در کد جایگزین نمائیم، فایل 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>

در نمونه کد بالا آدرس ها به صورت فرضی هستند و هر کجا که عبارت http://yoursite.com درج شده باید با آدرس سایتی که فایل در آن قرار گرفته جایگزین شود، همچنین به فرمت ها خوب دقت کنیم، فرمت swf فایل فلش پلیر است و فرمت mp3 فایل صوتی است که می خواهیم در پلیر پخش شود، از تگ param در قسمتی که name آن برابر با flashvars است با استفاده از دو پارامتر autostart وautoreplay می توانیم برای تنظیم شروع خودکار و پخش مجدد آهنگ استفاده کنیم (مقادیر 0 به معنی غیر فعال و 1 فعال است).
تنظیمات پیش فرض مورد نیاز در فایل index جهت راهنمایی بیشتر و آسان تر شدن استفاده از کد اعمال شده، کافی است که آدرس فایل ها را جایگزین مقادیر پیش فرض کنیم، همان طور که مشخص است پلیر از فایل فلش استفاده می کند و لذا این پلاگین باید در مرورگر نصب و فعال باشد تا پلیر به درستی بارگذاری و نمایش داده شود.

برای پخش فایل صوتی روش جدید (پلیر HTML5) را انتخاب کنیم یا روش قدیمی (پلاگین)؟

همان طور که دیدیم برای پخش فایل های صوتی در وب در مجموع دو راه وجود دارد، استفاده از تگ های HTML و به طور خاص تگ audio در HTML5 و یا استفاده از پلاگین هایی مبتنی بر جاوا اسکریپت، فلش و...، اما سوال این است که از بین دو روش فوق کدام یک را انتخاب کنیم؟ پاسخ این سوال را باید اینگونه داد به طور کلی آینده وب به سمت امکانات مبتنی بر HTML در حرکت است و تا حد امکان نباید از پلاگین های جانبی استفاده کنیم، اگرچه پشتیبانی مرورگرها در نسخه های قدیمی از  HTML نسخه 5 همراه با نواقصی است اما اغلب مرورگرها در طی سالیان اخیر شتابان به این سمت حرکت کرده اند و تعداد کاربرانی که از نسخه های قدیمی استفاده می کنند هر روز کمتر و کمتر می شود، لذا تگ audio در HTML5 می تواند جواب نهایی و مسیر آینده ما باشد، با این حال ممکن است به هر دلیلی نتوانیم از این تگ استفاده کنیم، به طور مثال در سیستم های قدیمی که ارتقاء مرورگرها در آنها ممکن نباشد یا نیاز به پخش فایل در پلیرهای اختصاصی و مواردی از این دست وجود داشته باشد، در این شرایط شاید استفاده از پلاگین های جانبی را بتوانیم گزینه جایگزین خوبی به حساب بیاوریم.