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

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

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

همان طور که می دانیم برای درج آهنگ در وب (وبلاگ و سایت) روش های گوناگونی وجود دارد، از کدهای ساده html و مدیا پلیر ویندوز گرفته تا پلیرهای مبتنی بر جاوا اسکریپت و فلش پلیر که در مطالب گذشته در این خصوص صحبت کرده ایم، اما به جهت استقبال کاربران و درخواست معرفی پلیرهای متفاوت تر، بر آن شدیم تا یک پلیر ساده ولی زیبا و قدرتمند دیگر را به همراه آموزش روش استفاده از آن منتشر کنیم، این پلیر در اصل پلاگینی برای سیستم مدیریت محتوای وردپرس (WordPress Audio Player) بوده که نسخه فعلی ویرایش مستقلی (Standalone) از آن است، یعنی می توانید در هر وبلاگ یا سایتی از آن استفاده کنید.

دانلود WordPress Audio Player

قبل از پرداختن به ادامه آموزش، ابتدا باید نسخه ای از برنامه را از لینک های زیر دریافت کنید، برای دانلود این پلیر می توانید به طور مستقیم به سایت سازنده مراجعه کنید:

http://wpaudioplayer.com/download

یا اینکه نسخه ای از آن را از لینک زیر دریافت نمائید:
دانلود WordPress Audio Player نسخه 2.0 حجم: کمتر از 20 کیلوبایت

امکانات پلیر WordPress Audio Player

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

نحوه استفاده از پلیر پخش آهنگ

برای استفاده از این پلیر و پخش آهنگ در وبلاگ یا سایت، پس از دانلود بسته برنامه از لینک های بالا، لازم است که دو فایل اصلی audio-player.js و player.swf را در یک سرویس دهنده آپلود کنید تا در وب قابل دسترسی باشند، دقت کنید برخی سایت ها از فرمت فلش (swf) به درستی پشتیبانی نمی کنند و در انتها به جای لینک مستقیم، لینک غیر مستقیم در اختیار کاربران قرار می دهند، برای اطمینان از صحیح بودن آپلود باید انتهای لینک دریافتی به swf ختم شود نه به html یا سایر موارد.
سپس فایل آهنگ خود را نیز با فرمت mp3 آپلود نمائید و مطابق الگوی زیر آدرس ها را جایگزین موارد پیش فرض کنید.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | پلیر ساده و زیبای پخش آهنگ</title>
<!-- https://webgoo.ir -->
<script type="text/javascript" src="http://yoursite.com/music/audio-player.js"></script>
<script type="text/javascript">
AudioPlayer.setup("http://yoursite.com/music/player.swf", {
    width: 290
    });  
</script> 
</head>
<body>
<p id="audioplayer_1">متن جانشین</p>  
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/music/mp3_file.mp3"});  
</script>  
</body>
</html>

توضیح:
- همان طور که ملاحظه می کنید، ابتدا فایل audio-player.js را در بالای صفحه و بین تگ های head قرار می دهیم.
- سپس تکه کد مربوط به تنظیمات پلیر را نیز در زیر آن درج می کنیم.
- آنگاه در هر جای صفحه که بخواهیم پلیر پخش شود، تکه کد زیر را اضافه می کنیم.

<p id="audioplayer_1">متن جانشین</p>  
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/music/mp3_file.mp3"});  
</script>

- آدرس کامل فایل mp3 باید جایگزین مقادیر پیش فرض http://yoursite.com/music/mp3_file.mp3 شود، به طور مثال این آدرس می تواند به صورت زیر باشد.

http://www.yoursite.com/my_mp3/new-world.mp3

به همین صورت فایل های audio-player.js و player.swf نیز باید با آدرس کامل و صحیح جایگزین شوند.

استفاده چندباره از پلیر در یک صفحه

پس از وارد کردن فایل های مورد نیاز در صفحه، اکنون می توانید هر چند بار که بخواهید از پلیر استفاده نمائید، برای این کار کافی است قسمت های مربوط به id آن را تغییر دهید، به طور مثال دو کد زیر هر کدام یک آهنگ مختلف را پخش خواهند کرد.

<p id="audioplayer_1">متن جانشین</p>  
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/music/mp3_file.mp3"});  
</script>
<p id="audioplayer_2">متن جانشین</p>  
<script type="text/javascript">
AudioPlayer.embed("audioplayer_2", {soundFile: "http://yoursite.com/music/mp3_file_2.mp3"});  
</script>

پخش چند آهنگ با یک پلیر

پلیر حاضر علاوه بر پخش یک آهنگ، توانایی پخش چند آهنگ (در یک پلیر) را نیز دارد، بدین منظور کدهای خود را مطابق الگوی زیر ویرایش کنید.

<p id="audioplayer_1">متن جانشین</p>  
<script type="text/javascript">  
AudioPlayer.embed("audioplayer_1",{
    soundFile: "http://yoursite.com/music/mp3_file_1.mp3,http://yoursite.com/music/mp3_file_2.mp3",
    titles: "Title 1,Title 2",
    artists: "Artist name 1,Artist name 2"  
});  
</script>

در این حالت دکمه های کوچک بعدی و قبلی (Next و Previous) نیز در پلیر در دسترس هستند.

تنظیمات WordPress Audio Player

یکی از نقاط قوت این پلیر، امکان سفارشی سازی و تنظیمات پیشرفته آن است، می توانید این تنظیمات را به طور کلی (در قسمت head و با متد setup) یا به صورت مجزا برای هر پلیر (با متد embed) انجام دهید، در مثال های زیر یک نمونه از این تنظیمات را ملاحظه می کنید.
اعمال تنظیمات در تگ head و با متد setup:

<script type="text/javascript" src="http://yoursite.com/music/audio-player.js"></script>  
<script type="text/javascript">
AudioPlayer.setup("http://yoursite.com/music/player.swf",{
    width: 290,
    initialvolume: 100,
    transparentpagebg: "yes",
    left: "000000",
    lefticon: "FFFFFF"  
});  
</script>

اعمال تنظیمات پلیر به صورت مجزا و با متد embed:

<script type="text/javascript">  
AudioPlayer.embed("audioplayer_1",{
    soundFile: "http://yoursite.com/music/mp3_file.mp3",
    titles: "Title",
    artists: "Artist name",
    autostart: "yes"  
});  
</script>

در زیر شرح برخی از پارامترهای قابل استفاده و کاربردی تنظیمات این پلیر را ذکر می کنیم.
- پارامتر autostart، برای شروع خودکار یا غیر فعال کردن شروع خودکار - با مقادیر yes یا no - مقادیر پیش فرض: no
- پارامتر loop، برای تعیین تکرار یا عدم تکرار پخش آهنگ - با مقادیر yes یا no - مقادیر پیش فرض: no
- پارامتر animation، اگر با مقدار yes تنظیم شود، پلیر همیشه در حالت باز خواهد بود - مقادیر پیش فرض: no
- پارامتر remaining، برای تعیین نحوه محاسبه و نمایش زمان سپری شده یا باقی مانده - با مقادیر yes یا no - مقادیر پیش فرض: no
- پارامتر noinfo، اگر با مقدار yes تنظیم شود، اطلاعات مربوط به فایل mp3 نشان داده نمی شود - مقادیر پیش فرض: no
- پارامتر initialvolume، میزان بلندی صدای پلیر را تنظیم می کند - از عدد 0 تا 100 - مقادیر پیش فرض 60
- پارامتر buffer، برای تعیین مدت زمان آهنگی که از پیش در حافظه بارگذاری می شود - با مقادیر ثانیه - مقادیر پیش فرض: 5
- پارامتر rtl، برای تعیین جهت نمایش پلیر به صورت از راست به چپ، به طور مثال برای زبان فارسی - مقادیر پیش فرض: ltr
- پارامتر width، اندازه عرض پلیر به پیکسل (یا در صد، به طور مثال %100) را مشخص می کند - مقادیر پیش فرض: 290
- پارامتر transparentpagebg، برای تعیین حالت شفاف پس زمینه پلیر (پس زمینه پلیر به رنگ پس زمینه صفحه، نمایش داده می شود) - با مقادیر yes یا no - مقادیر پیش فرض: no
- پارامتر bg، رنگ پس زمینه پلیر که با کدهای هگز مشخص می شود - مقادیر پیش فرض: E5E5E5
- پارامتر leftbg، رنگ پس زمینه علامت بلندگو و دکمه افزایش و کاهش صدا - مقادیر پیش فرض: CCCCCC
- پارامتر lefticon، رنگ آیکن بلندگو - مقادیر پیش فرض: 333333
- پارامتر voltrack، رنگ داخلی دکمه افزایش و کاهش صدا - مقادیر پیش فرض: F2F2F2
- پارامتر volslider، رنگ خارجی دکمه افزایش و کاهش صدا - مقادیر پیش فرض: 666666
- پارامتر rightbg، رنگ پس زمینه دکمه پخش و مکث - مقادیر پیش فرض: B4B4B4
- پارامتر rightbghover، رنگ پس زمینه دکمه پخش و مکث در حالت فعال (hover) - مقادیر پیش فرض: 999999
- پارامتر righticon، رنگ آیکن پخش و مکث - مقادیر پیش فرض: 333333
- پارامتر righticonhover، رنگ آیکن پخش و مکث در حالت فعال (hover) - مقادیر پیش فرض: FFFFFF
- پارامتر loader، رنگ نوار بارگذاری - مقادیر پیش فرض: 009900
- پارامتر track، رنگ پس زمینه داخلی - مقادیر پیش فرض: FFFFFF
- پارامتر tracker، رنگ نوار پردازش - مقادیر پیش فرض: DDDDDD
- پارامتر border، رنگ خط نوار پردازش - مقادیر پیش فرض: CCCCCC
- پارامتر skip، رنگ دکمه بعدی و قبلی - مقادیر پیش فرض: 666666
- پارامتر text، رنگ متن - مقادیر پیش فرض: 333333
نکته: مقادیر مربوط به رنگ بندی عناصر پلیر با کدهای هگز به صورت 6 کاراکتری و بدون علامت # باید تنظیم شوند.

دسته بندی: مهارتهای وب » وبلاگ نویسی

برچسب ها: وبلاگ نویسی

قبلی »

« بعدی

مطالب بیشتر:
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
چگونه از تمام امکانات وبلاگ خود استفاده کنیم؟
نحوه قرار دادن فاوآیکن (Favicon) در نوار آدرس سایت و وبلاگ
نحوه درج تصویر در وبلاگ و سایت
نحوه قرار دادن کلیپ فلش در سایت و وبلاگ

دیدگاه

۵۶ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

محمد

۰۰:۴۴ ۱۳۹۳/۰۱/۳۰

چجوری میشه این پلیر رو تو سرور مجازی تست کرد ؟ منظورم اینکه به صورت لوکال تو Easy php

فایل ها را به آدرس دایرکتوری اصلی (معمولا www) انتقال دهید و آدرس ها را بر مبنای http://localhost تنظیم کنید، به طور مثال اگر فایل file.mp3 در دایرکتوری www/music باشد، آدرس آن در سرور مجازی به صورت http://localhost/music/file.mp3 خواهد بود، به همین ترتیب برای سایر فایل ها همین روال را اجرا کنید.

محمدرضا

۰۰:۱۶ ۱۳۹۳/۰۱/۲۸

خب بی زحمت میشه سایت سازندش رو معرفی کنید؟
خیلی ممنون از پاسخ شما.

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

محمد رضا

۱۸:۱۵ ۱۳۹۳/۰۱/۲۲

سلام میشه بگید که چه طور میشه این پلیر رو راست نویس کرد؟ من هر جوری کد rtl رو داخل head (همون طوری که گفته بودید) میزارم ، درست نمیشه.
کد:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>پلیر</title>
<!-- http://webgoo.ir -->
<script type="text/javascript" src="http://uploadyar.com/s92/dc5e32fa4589.js"></script>
<script type="text/javascript">
AudioPlayer.setup("http://uploadyar.com/s92/40d9202a5d0f.swf", {
    rtl:"rtl",
	width: 165,
	autostart:"yes",
	loop:"yes",
	transparentpagebg:"yes",
	bg:"daebff",
    leftbg:"0078ff",
	lefticon:"ffffff",
	volslider:"003f85",
	rightbg:"005bc2",
	righticon:"ffffff",
	rightbghover:"003e85",
	loader:"00336d",
	tracker:"9ccbff",
	border:"daebff",
	skip:"003f85",
    });  
</script> 
</head>

سلام
ظاهرا این قسمت قابل تغییر نیست!
به هر صورت پارامترها عینا از سایت سازنده ابزار ترجمه شده اند.

علی

۰۶:۴۸ ۱۳۹۳/۰۱/۲۲

فقط میخواستم از زحمات شما تشکر کرده باشم
چون واقعا وبسایت بسیار عالی ای دارید.
مرسسسسسسسسسسسسسسسسسی

ahmad

۱۵:۳۸ ۱۳۹۲/۰۹/۱۱

سلام اطلاعات سایتتون درباره ی پخش اهنگ در وب (وبلاگ یا سایت) خیلی خوب بود اما من متوجه نشدم میشه خلاصه اما واضح توضیح بدید متشکرم

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

يزدان

۰۴:۴۹ ۱۳۹۲/۰۷/۱۷

سلام سرور گرام" واقعا خرسندم از اشنايي استادي چون شما" همينكه خودم خيلي علاقه دارم اما هنوز بخوبي ياد نگرفتم نشان دهنده هوش بالاي شماست" تحسينتون ميكنم بهتونم افتخار ميكنم" سرور گرام" ايا اگر عكس ها رو بصورت فلش در بياريم پلير خاصي بايد باشه براي پخشش تو وبلاگ" ممنون ميشم. باباي

سلام
ممنون از نظر لطف شما، برای نمایش فایل فلش نیاز به کد پخش دارید (آموزش آن چه در وب و چه در سایت وجود دارد، عبارت "فلش" را در قسمت جستجو وارد کنید).

عرب پور

۱۶:۵۳ ۱۳۹۲/۰۶/۱۹

سلام
حقیقتش چون از کد نویسی چیزی نمیدونم هرچی بیشتر خوندم کمتر فهمیدم
میشه خواهش کنم این پلیر و توی سایت من راه بندازید
(البته سایت من نیست سایت هیئتمونه)
اگه براتون زحمت نیست...
اگه لطف کنید خیلی خیلی ممنون میشم
جوابم و از طریق ایمیل بدید تا u/p ادمین و براتون ارسال کنم

سلام
به طور معمول این کار را انجام نمی دهیم، اما چون مورد شما خاص است مشکلی نیست.
لطفا ایمیلتان را چک کنید.

سما

۱۸:۲۱ ۱۳۹۲/۰۶/۱۱

من تازه نوشتن وبلاگ رو شروع کردم، ولی کلا بیشتر از 10 ارسالی نمی تونم داشته باشم. لطفا راهنماییم کنید.

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

هادی فرهنگ دوست

۰۸:۵۳ ۱۳۹۲/۰۶/۱۱

سلام و ادب و خسته نباشید. پخش تصادفی هم داره این پلیر عالی ؟ من فایل های زیادی رو برای پخش بهش معرفی کردم و خیلی عالی کار می کنه. پخش تصادفی در پارامترهایی که معرفی کردید نبود. خواستم ببینم این قابلیت رو داره یا نه. ممنونم از سایت حرفه ای و پر محتواتون. یا حق

سلام
خیر، تا آنجا که بررسی کرده ایم، در این پلیر پارامتری برای پخش تصادفی در نظر گرفته نشده.

شیوا

۱۵:۲۲ ۱۳۹۲/۰۵/۳۱

با سلام و
تشکر از اینکه که جواب سوال ها رو سریع میدید.
این کار شما رو از دیگران متمایز میکنه!
راستش مباحث وب خصوصا آنهایی که مرتبط با کدنویسیه اصطلاحاتی داره که از همشون سر در نمیارم و با آزمون و خطا پیش میرم. من لینک فایل هامو از

http://uyf.ir

گرفتم. پس یعنی شما میگید محل قرار دادن لینک ها در کد درست بوده فقط لینک مستقیم نبوده؟؟؟؟؟؟
بازم ممنون

سلام
بله، فایل های خود را در سرویس دهنده ای آپلود کنید که لینک مستقیم در اختیارتان قرار دهد.

شیوا

۱۳:۱۸ ۱۳۹۲/۰۵/۳۰

با سلام
وبسایت بسیار خوب و مفیدی دارید. بسیار ممنون
اما من برای استفاده از این پلیر هر کاری کردم موفق نشدم لطفاً یه بررسی کنید ببینید کدها رو درست وارد کردم یا نه؟ اگه میشه مطالب تون رو روشن تر بگید ما تازه کاریم

<!DOCTYPE html>
<html>
<http://uyf.ir/do.php?filename=a28f955ecabf1.js>
<title>وبگو | پلیر ساده و زیبای پخش آهنگ</title>
<!-- http://webgoo.ir -->
<script type="text/javascript" src="http://uyf.ir/do.php?filename=a28f955ecabf1.js"></script>
<script type="text/javascript">
AudioPlayer.setup("http://uyf.ir/do.php?filename=d5bb534e15072.swf", {
    width: 290
    });  
</script> 
</head>
<body>
<p id="audioplayer_1">متن جانشین</p>  
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {soundFile: "http://uyf.ir/do.php?filename=c806364cfbe11.mp3"});  
</script>  
</body>
</html>

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

یلدا

۱۸:۱۴ ۱۳۹۲/۰۵/۲۸

سلام.. میدونم مطلبم ربطی به این موضوع نداره اما خواهش می کنم همینجا جوابم رو بدین, موقع تبادل لینک نوشته صفحه ی حاوی لینک ما... من اونجا دقیقا باید چی بنویسم؟؟؟خواهش می کنم جوابم رو بدین خیلی به کمکتون نیاز دارم....ممنون

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

http://webgoo.ir

آدرس صفحه اول سایت «وبگو» است، با این تفاسیر ظاهرا باید آدرس صفحه ای که لینک وبلاگ یا سایت مربوطه در آن درج شده را وارد کنید.

Alireza

۲۲:۲۲ ۱۳۹۲/۰۵/۲۵

سلام...ممنون از سایت خوبتون! در مورد همین موضوع پلیر خواستم بگم من تمامی کار ها رو کردم فقط نمیدونم کجا این کدها رو باید بزارم یکم گیج شدم....گذاشتم اما خراب در اومد فقط بالای صفحه ی وبم بصورت خراب نوشته بود آپلود عکس و.......این چیزا...اگه میشه یه راهنمایی بهم کنید که راحت بتونم درستش کنم...از طریق کدهای اکسریپت جاوا چطور؟؟؟نمیتونم آپلود آهنگم رو اونجا بزارم؟؟؟در ضمن باید بگم بعد از آپلود آخر همشون swf بود!!! ممنون میشم جواب کاملی بهم بدین که کارم راه بیفته ممنون از شما!

سلام
لطفا آموزش را به دقت و از ابتدا مطالعه کنید، توضیحات به طور کامل و همراه با مثال داده شده، پس از آپلود سه فایل js، swf و mp3 و سپس جایگزینی آدرس ها، کدها را باید در قسمت ویرایش قالب یا بخش مربوط به اسکریپت های اختصاصی کاربر درج کنید.

سهیل

۱۳:۴۵ ۱۳۹۲/۰۵/۲۱

سلام ببخشید آهنگ که تو وبلاگم میزارم رو هم رو هم پخش میشه و تکه ی اول و وسط و آخر آهنگ هم زمان با هم خونده میشه عیب از کجاست؟

سلام
متاسفانه برخی پلیرها با مرورگر گوگل کروم ناسازگاری دارند، یا بهتر بگوییم، گوگل کروم با برخی از پلیر ها ناسازگاری دارد!

Majid

۱۴:۲۸ ۱۳۹۲/۰۵/۲۰

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

به احتمال زیاد فرمت mp3 جزء فرمت های پیش فرض IDM برای دانلود است، برای اطمینان در برنامه IDM در قسمت

Downloads -> Options -> file Types

فرمت mp3 را از لیست حذف کنید.
در مورد سوال دوم، چنین امکانی را نمی توان با این پلیر ایجاد کرد، نهایتا باید کنترل پخش را به خود کاربر بدهید.

صفحه 2 از 4

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