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

اجرا و پخش فایل های چندرسانه ای و از جمله فایل های صوتی با فرمت های مختلف در وب یکی از نیازهایی است که مدیران وبسایت ها، وبلاگ ها و در کل ارائه کنندگان محتوا برای صفحات و برنامه های تحت وب به آن احتیاج خواهند داشت، خوشبختانه قابلیت های وب به انتشار متن یا نمایش تصاویر خلاصه نمی شود و با تغییر نیازهای کاربران، کنسرسیوم جهانی وب (W3C)، مرورگرها و در کل افراد، گروه ها، انجمن ها و شرکت های دخیل در این امر به فکر چاره و ارائه راه حل های نوین افتاده اند، به هر صورت در شرایط فعلی در مجموع برای پخش فایل های صوتی (آهنگ، موسیقی پس زمینه و...) در وب دو راه وجود دارد، روش اول پخش با شیوه جدید و استفاده از کدهای HTML بدون درج پلاگین و روش دوم پخش با شیوه قدیمی استفاده از پلاگین، کدهای جاوا اسکریپت و فلش است، هر کدام از روش های اشاره شده دارای معایب و محاسنی هستند که در این آموزش می خواهیم در خصوص آنها صحبت کنیم و در نهایت یک روش را به عنوان روش بهتر برگزینیم.
اولین گام برای پخش فایل صوتی در وب
قبل از اینکه به روش های درج و پخش فایل صوتی در وب بپردازیم، جهت اجتناب از سردرگمی کاربرانی که شاید آشنایی زیادی با این مقوله نداشته باشند یادآور می شویم که اولین گام برای پخش فایل های صوتی (آهنگ، موسیقی پس زمینه و...) آماده سازی فایل به لحاظ حجم و کیفیت و سپس آپلود آن در فضای سایت شخصی یا سایت های رایگان میزبان فایل است که به کاربر لینک مستقیم ارائه می کنند، منظور از لینک مستقیم این است که آدرس 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 می تواند جواب نهایی و مسیر آینده ما باشد، با این حال ممکن است به هر دلیلی نتوانیم از این تگ استفاده کنیم، به طور مثال در سیستم های قدیمی که ارتقاء مرورگرها در آنها ممکن نباشد یا نیاز به پخش فایل در پلیرهای اختصاصی و مواردی از این دست وجود داشته باشد، در این شرایط شاید استفاده از پلاگین های جانبی را بتوانیم گزینه جایگزین خوبی به حساب بیاوریم.

نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
نحوه درج علامت های خاص در HTML
کاربرد متاتگ refresh در صفحات وب (HTML)
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟


لطفاً بفرمایین موسیقی آنلاین وبلاگ یا وبسایت رو چطور میشه با مرورگر موبایل شنید .
متشکر
حذف شد
فکر کنم یه ذره قاطی شد.. راستش من زیاد با اینجور چیزا آشنا نیستم نمیدونم این کلا بخش آیدیوئه یا نه.. حالا بگذریم.. الان من کجای اینا باید اتوپلی اضافه کنم که درست بشه؟ بعضی جاها امتحان کردم حتی کلا پایین اینا هم اونی که شما نوشتین رو کپی کردم ولی نشد.. میشه کمک کنید؟ اگه امکان داشته باشه بیاید توی وبم نظر بدید.. ممنون<audio controls="controls" height="50px" width="100px" autoplay>
<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>
فایل را با سه فرمت mp3، ogg و wav آپلود و آدرس URL را در نمونه کد جایگذاری کنید، فایل mp3 فعلی شما قابل بارگذاری نیست و باید فایل ها را در سایتی آپلود کنید که لینک مستقیم بدهد، منظور از لینک مستقیم یعنی به محض درج در نوار آدرس مرورگر، فایل شروع به پخش یا دانلود کند.کمکم کنین
در مورد وبلاگ بیشتر بگین
ببخشید من می خواستم بدونم چرا بعضی وقت ها روی گزینه پخش کلیک می کنم فایل از طریق اینترنت دانلود منیجر (idm) دانلود میشه . می خواستم بدونم راه حلی برای این مشکل هست؟ (به جز خاموش کردن دانلود منیجر)
خودم سعی کردم ولی چیزی دستگیرم نشد.
من یک صفحه درست کرم که مجموعه ای از این کدها توش قرار داره:
http://farsi8om.blogfa.com/page/mp3
لطفا کمکم کنید.- راه حل راحت بدون غیرفعال کردن اکستنشن IDM حذف فرمت mp3 از آدرس زیر است:
IDM -> Downloads -> Options -> File types
قاعدتا این روش باید توسط تک تک کاربران اعمال شود و برای همه صفحات دیگر نیز به همین صورت خواهد بود.- در راه حل سخت رفع این مشکل نیازمند دسترسی به سرور شخصی و برنامه نویسی هستیم، به این صورت که می توانیم فرمت mp3 را از انتهای آدرس URL حذف کنیم و در عوض در سرور با کدنویسی فایل صوتی مورد نظر در پاسخ آدرس درخواستی ارسال شود، به فرض:
http://example.com/uploads/f611670879
این روش را تست نکرده ایم اما از نظر تئوری به نظر عملی است هرچند برای استفاده های عمومی کمی پیچیده و زمانبر است.من یه اهنگ که تو وبلاگم میزارم صفحه پخش اهنگ میاد و بلندگوش ولی اون مثلث پلی کنندش نمیاد یعنی عملا واسم کار نمیکنه باید چیکار کنم درست شه؟؟؟
<script>
document.addEventListener('play', function(e){
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len;i++){
if(audios[i] != e.target){
audios[i].pause();
}
}
}, true);
</script>
کد باید در قسمت ویرایش قالب یا اسکریپت های اختصاصی درج شود.ممنون میشم که بگید
<object type="application/x-shockwave-flash" data="https://uupload.ir/view/3mpx_dewplayer-vol.swf/?mp3=https://uupload.ir/view/f992_sami_yusuf_grounded.mp3/" width="200" height="20" id="dewplayer">
<param name="wmode" value="transparent">
<param name="movie" value="https://uupload.ir/view/3mpx_dewplayer-vol.swf/?mp3=https://uupload.ir/view/f992_sami_yusuf_grounded.mp3/">
<param name="flashvars" value="mp3=https://uupload.ir/view/f992_sami_yusuf_grounded.mp3/&autostart=0&autoreplay=0">
</object>
"...نباید فایل به صورت دو مرحله ای دانلود شود، یعنی نباید کاربر به صفحه دیگری هدایت و سپس فایل دانلود شود، اینگونه سرویس ها برای پخش آنلاین فایل مناسب نیستند!..."
باید سرویسی پیدا کنید که لینک مستقیم (رایگان یا با هزینه) ارائه کند.
من یکه سایت موزیک دارم که به صورت دستی دارم آهنگ میذارم آیا راهی هستش که بتونم خودکار مطالب و آهنگها رو بگیرم از سایتهای دانلود آهنگ ؟
https://dl.nex1music.ir/1401/11/02/Yousef Zamani - Rade Tamas [128].mp3
اینم لینک مستقیمش حتی لطفا خودتون با این لینک یا هر لینک آهنگ درست کنید بزارین ببینمآیا راهی یا کدی وجود داره که بتونیم فایل های آپلود شده غیر مستقیم رو توی وبلاگ پخش کنیم؟

پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.