Собственный аудио-плеер с помощью jQuery плагина AudioControls

Знакомство с плагином AudioControls для управления плеером, созданным с помощью HTML5 тега <audio>.

HTML

Разделяем плеер на семь секций.

<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>

Список треков

В ненумерованном списке перечислим названия песен, используя атрибут data-src.

<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>

Управление плеером

Для хранения различных функций плеера воспользуемся data-атрибутом. Тут можно найти более подробную информацию.

<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>

Подробная информация об аудио

Далее перечислим название трека, и время воспроизведения в атрибуте data-attr="timer".

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

Прогресс-бар

Прогресс-бар будет связан с атрибутом data-attr="seekableTrack"

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

Контроль за громкостью

<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 - это ID DIV-а с списком песен.

<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; }

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.9lessons.info/2015/05/custom-audio-player-with-jquery-audio.html
Перевел: Станислав Протасевич
Урок создан: 19 Мая 2015
Просмотров: 10742
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^