افزودن پخش کننده موسیقی در وب سایت

[F.Farzanegan]

افزودن پخش کننده موسیقی در وب سایت

محمود فیض 12-04-2013 22:45:45

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

در این نوشته می توانید گام به گام با نحوه ساختن یک پخش کننده موسیقی آشنا شوید. اگر وب سایت شما مرتبط با صوت یا موسیقی است، ادامه این نوشته را از دست ندهید.

پیش نیازها

پخش کننده ای که قصد داریم بسازیم، از jPlayer که یکی از پلاگین های jQuery است، استفاده می کند. همچنین برای آیکون های این پخش کننده از FontAwesome استفاده خواهد شد. این فایل ها را می توانید از سایت های زیر دریافت نمایید:

- وب سایت jPlayer
- وب سایت jQuery
- وب سایت FontAwesome

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

<link rel="stylesheet" href="css/normalize.css">
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>

همانطور که مشاهده می کنید، علاوه بر دو فایل جاوااسکریپت مربوط به جی کوئری و جی پلیر، دو فایل سی اس اس هم استفاده شده است.
فایل اول یعنی normalize.css حاوی دستوراتی برای یکسان سازی تنظیمات کلی در مرورگرهای مختلف و فایل دوم شامل تنظیمات ظاهری پخش کننده هستند.

ساختار تگ های HTML

تگ های HTML به شکل زیر در کنار هم قرار می گیرند:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-title">
<ul>
<li>TEDxPhoenix - Kelli Anderson - Disruptive Wonder for a Change</li>
</ul>
</div>
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1"></a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1"></a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute"></a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute"></a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>

مهمترین بخش این کدها، خصوصیت id=jquery_jplayer_1 است که برای یک تگ div تعریف شده است. این تگ به عنوان تگ اصلی پخش کننده موسیقی در آینده به jPlayer معرفی خواهد شد. همانطور که مشاهده می کنید، از کلاس های سی اس اس مختلفی مانند jp-play, jp-pause, jp-mute و jp-unmute استفاده شده است.این کلاس ها با استاندارد jPlayer تعریف شده اند و ترجیحا از تغییر نام آن ها خودداری کنید.

در بخشی از کدهای فوق، از کاراکترهای , ,  و  استفاده شده است. این کاراکتر ها پس از رندر شدن به آیکون هایی که در FontAwesome تعریف شده اند تبدیل خواهند شد.

فعال کردن پخش کننده

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

<script type="text/javascript">
    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            mp3: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp3",
            oga: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogg"
          });
        },
        swfPath: "/js",
        supplied: "mp3,oga"
      });
    });
</script>

موسیقی مورد نظر با دو فرمت مختلف یعنی mp3 و ogg قرار گرفته اند. فرمت ogg سازگاری بیشتری با مرورگرها مخصوصا فایرفاکس و اپرا دارد.
پس از اجرای صفحه، اگر از ابزارهای داخل مرورگرها (Developer Tools) یا افزونه هایی مانند فایرباگ (FireBug) استفاده کنید، خواهید دید که یک تگ audio که مربوط به HTML5 است تولید شده است.

شخصی سازی ظاهر پخش کننده

در ابتدای این آموزش از فایل style.css برای قرار دادن تنظیمات مربوط به ظاهر پخش کننده نام برده شد. این تنظیمات شامل موارد زیر است:

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

@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot?#iefix") format("eot"),
     url("fonts/fontawesome-webfont.woff") format("woff"),
     url("fonts/fontawesome-webfont.ttf") format("truetype"),
     url("fonts/fontawesome-webfont.svg#FontAwesome") format("svg");
font-weight: 400;
font-style: normal;
}
a {
text-decoration: none;
}
.jp-jplayer,.jp-audio {
width: 420px;
margin: 50px auto;
}

تنظیم سایز و رنگ عنوان موسیقی:

.jp-title {
font-size: 12px;
text-align: center;
color: #999
}
.jp-title ul {
padding: 0;
margin: 0;
list-style: none;
}

تنظیم رنگ، گرادیانت، سایه و ... مربوط به محل قرارگیری دکمه های کنترلی پخش کننده:

.jp-gui {
    position: relative;
    background: #f34927
    background: -moz-linear-gradient(top,  #f34927 0%, #dd3311 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311))
    background: -webkit-linear-gradient(top,  #f34927 0%,#dd3311 100%);
    background: -o-linear-gradient(top,  #f34927 0%,#dd3311 100%);
    background: -ms-linear-gradient(top,  #f34927 0%,#dd3311 100%);
    background: linear-gradient(to bottom,  #f34927 0%,#dd3311 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );
    -webkit-box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);
box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);
border-radius: 3px;
    overflow: hidden;
    margin-top: 10px;
}

تعریف فونت و نحوه قرارگیری دکمه ها:

.jp-controls {
padding: 0;
margin: 0;
list-style: none;
font-family: "FontAwesome";
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.jp-controls li {
display: inline;
}
.jp-controls a {
color: #fff
}

ظاهر دکمه ها:

.jp-play,.jp-pause {
width: 60px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 43px;
border-right: 1px solid #d22f0f
}
.jp-controls .jp-play:hover,.jp-controls .jp-pause:hover {
background-color: #de3918
}
.jp-mute,.jp-unmute {
position: absolute;
right: 55px;
top: 0;
width: 20px;
height: 40px;
display: inline-block;
line-height: 46px;
}
.jp-mute {
text-align: left;
}
.jp-time-holder {
color: #fff
font-size: 12px;
line-height: 14px;
position: absolute;
right: 90px;
top: 14px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

تنظیمات ظاهری نوار وضعیت و کنترل صدا:

.jp-progress {
background-color: #992E18
border-radius: 20px 20px 20px 20px;
overflow: hidden;
position: absolute;
right: 133px;
top: 15px;
width: 210px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}
.jp-play-bar {
height: 12px;
background-color: #fff
border-radius: 20px 20px 20px 20px;
}
.jp-volume-bar {
position: absolute;
right: 10px;
top: 17px;
width: 45px;
height: 8px;
border-radius: 20px 20px 20px 20px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
background-color: #992E18
overflow: hidden;
}
.jp-volume-bar-value {
background-color: #fff
height: 8px;
border-radius: 20px 20px 20px 20px;
}

نکته جالب و مزیت jPlayer نسبت به سایر پلاگین های مشابه این است که در صورتیکه مرورگر HTML5 و تگ audio را پشتیبانی نکند، برای پخش تلاش می کند از فلش استفاده کند.

موضوعات مشابه:

• موسیقی محلی مازندرانی
• دستگاه های موسیقی ایرانی
• شارژ همه گجت ها به وسیله کابل جادویی
• زود بخوابید........
• موسیقی و آواز...