Ma`lumotlar : 1091
Xabarlar soni: 197
Bugun: 7.3.2021
Soat: 20:15
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
2478 marta o`qildi.
![]() |
![]() |