jQuery da AudioControls yordamida shaxsiy audio-player yaratish

Muallif: Mengliyev Sh.

Qo`shilgan sana: 2015-06-15

jQuery da AudioControls yordamida shaxsiy audio-player yaratish

AudioControls plag bilan tanishish uchun HTML 5 tegi <audio> player bilan boshqarish kerak bo’ladi.

HTML
Playerni 7 ta qismga bo’lamiz.

<div class="containerPlayer">

<div id="listContainer" class="playlistContainer"></div>

<div id="playerContainer">

<ul class="controls"></ul>

<div class="audioDetails"></div>

<div class="progress"></div>

<div class="volumeControl"></div>

</div>

</div>

Treklar ro’yxati
Raqamlanmagan ro’yxatda data-src atributdan foydalangan holda qo’shiq nomini kiritamiz.

<ul id="playListContainer">

<li data-src="songs/rolling-in-the-deep-adele.mp3">

<a href="#">Adele - Rolling In The Deep</a>

</li>

<li data-src="songs/when-i-was-your-man-bruno-mars.mp3">

<a href="#">Bruno - When I Was Your Man</a>

</li>

</ul>

Playerni boshqarish
Playerni har xil funksiyalarini saqlashda data-atributidan foydalanamiz. U yerda undan ham ko’p ma’lumotlarni olish mumkin bo’ladi.

<ul class="controls">

<li><a href="#" class="shuffle shuffleActive" data-attr="shuffled"></a></li>

<li><a href="#" class="left" data-attr="prevAudio"></a></li>

<li><a href="#" class="play" data-attr="playPauseAudio"></a></li>

<li><a href="#" class="right" data-attr="nextAudio"></a></li>

<li><a href="#" class="repeat" data-attr="repeatSong"></a></li>

</ul>

Audio haqida batafsil ma’lumot
Davomidan trek nomini sanab o’tamiz va data-attr="timer" atributida vaqtini ko’rsatamiz.

<div class="audioDetails">

<span class="songPlay"></span>

<span data-attr="timer" class="audioTime"></span>

</div>

Progress-bar
Progress-bar  data-attr="seekableTrack" atributi bilan birgalikda aloqador bo’ladi.

<div class="progress">

<div data-attr="seekableTrack" class="seekableTrack"></div>

<div class="updateProgress"></div>

</div>

Ovozini nazorat qilish

<div class="volumeControl">

<div class="volume volume1"></div>

<input class="bar" data-attr="rangeVolume" type="range" min="0" max="1" step="0.1" value="0.7" />

</div>

JavaScript
$("#playListContainer").audioControls(function(){}- playListContainer – bu ID DIV – bilan  qo’shiqlar ro’yhati.

<script src="jquery.js"></script>

<script src="jquery.audioControls.js"></script>

<script>

$(document).ready(function()

{ 

$("#playListContainer").audioControls(

{

 autoPlay : false,  timer: 'increment', onAudioChange : function(response){ $('.songPlay').text(response.title + ' ...'); //Song title information },  onVolumeChange : function(vol){ var obj = $('.volume'); if(vol <= 0){  obj.attr('class','volume mute'); }  else if(vol <= 33) {

 obj.attr('class','volume volume1');

}

   else if(vol > 33 && vol <= 66)

{ 

obj.attr('class','volume volume2');

}

else if(vol > 66)

{

 obj.attr('class','volume volume3');

} 

else

{ 

obj.attr('class','volume volume1');

}

}

});

});

</script>

CSS

#listContainer { width:310px; background-color:#fafafa; }

#listContainer ul { background-color: #fafafa; clear: both; cursor: pointer; }

#listContainer li { padding:10px; }

#playerContainer { width:310px; height:130px; background-color:#333333; }

.controls li:first{margin-right:10px}

.controls li { float:left; display:inline-block; width:50px; text-align:center; margin-top:8px;margin-left:10px }

.progress { clear:both; height:4px; background-color:#666666; width:100%; cursor:pointer; position:relative; }

.progress .updateProgress { width:0px; background-color:#00BD9B; height:100%; float:left; position:relative; }

.volumeControl { position: relative; margin: 8px auto; }

.volumeControl .updateProgress { display:inline-block; vertical-align:middle; margin-top:2px; }

input[type="range"] { -webkit-appearance: none; -moz-appearance: none; background-color: #00BD9B; height: 2px; }

Ushbu dars sizning ishchi saytingiz http://tami.uz uchun tayyorlangan.

Manba: ruseller.com
Dars manbayi: http://www.9lessons.info/2015/05/custom-audio-player-with-jquery-audio.html

2269 marta o`qildi.