Как создать аудио-проигрыватель на JS
Как создать аудио-проигрыватель на JS. Сегодня мы хотим рассказать о том, как создать весьма интересный и визуально привлекательный аудио-проигрыватель для сайта при помощи JavaScript. Идея состоит в том, что у нас будет небольшой плеер в светлых тонах с навигационными клавишами для переключения треков, а также диск, который будет вращаться при проигрывании музыки. Кроме этого фон будет размываться в дизайн обложки альбома играющей музыки. Также будет реализован статус-бар.
Много новых шаблонов, а также полная поддержка русского языка, элементатора, а также адаптивности вы можете найти в предложениях в нашем интернет-магазине.
Руководство о том, как создать аудио-проигрыватель на JS.
Шаг 1. HTML
Чтобы создать такой аудио-плеер, нам понадобиться подключить библиотеку jQuery, также для каждого значения плеера мы будем устанавливать определенные ID, названия которых, интуитивно, вы можете понять за что отвечают. К примеру <div id=»bg-artwork»> будет отвечать за размытие фона в тон обложки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<div id="app-cover"> <div id="bg-artwork"></div> <div id="bg-layer"></div> <div id="player"> <div id="player-track"> <div id="album-name"></div> <div id="track-name"></div> <div id="track-time"> <div id="current-time"></div> <div id="track-length"></div> </div> <div id="s-area"> <div id="ins-time"></div> <div id="s-hover"></div> <div id="seek-bar"></div> </div> </div> <div id="player-content"> <div id="album-art"> <img src="img/1.jpg" class="active" id="_1"> <img src="img/2.jpg" id="_2"> <img src="img/3.jpg" id="_3"> <img src="img/4.jpg" id="_4"> <img src="img/5.jpg" id="_5"> <div id="buffer-box">Обработка ...</div> </div> <div id="player-controls"> <div class="control"> <div class="button" id="play-previous"> <i class="fas fa-backward"></i> </div> </div> <div class="control"> <div class="button" id="play-pause-button"> <i class="fas fa-play"></i> </div> </div> <div class="control"> <div class="button" id="play-next"> <i class="fas fa-forward"></i> </div> </div> </div> </div> </div> </div> |
В плеер добавили возможность переключать треки на сайте, а также индикатор проигрывания, кроме этого будет установлена обложка для каждого альбома в плеере.
Шаг 2. CSS
Теперь перейдем к визуальной составляющей плеера. Нам необходимо установить стили для аудио-проигрывателя который будет у нас в белых тонах. Для начала добавляем параметры для фона и обложки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
#app-cover { position: absolute; top: 50%; right: 0; left: 0; width: 430px; height: 100px; margin: -4px auto; } #bg-artwork { position: fixed; top: -30px; right: -30px; bottom: -30px; left: -30px; background-image: url(../img/1.jpg); background-repeat: no-repeat; background-size: cover; background-position: 50%; filter: blur(40px); -webkit-filter: blur(40px); z-index: 1; } #bg-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff; opacity: 0.51; z-index: 2; } |
Затем нам нужно создать оболочку для плеера, делаем мы это следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
#player { position: relative; height: 100%; z-index: 3; } #player-track { position: absolute; top: 0; right: 15px; left: 15px; padding: 13px 22px 10px 184px; background-color: #fff7f7; border-radius: 15px 15px 0 0; transition: 0.3s ease top; z-index: 1; } #player-track.active { top: -92px; } |
У нас будет выпадающая плашка, в которой будет отображаться название трека, продолжительность и длинна в секундах, все это мы стилизируем в плеере следующими стилями:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
#album-name { color: #54576f; font-size: 17px; font-weight: bold; } #track-name { color: #acaebd; font-size: 13px; margin: 2px 0 13px 0; } #track-time { height: 12px; margin-bottom: 3px; overflow: hidden; } #current-time { float: left; } #track-length { float: right; } #current-time, #track-length { color: transparent; font-size: 11px; background-color: #ffe8ee; border-radius: 10px; transition: 0.3s ease all; } #track-time.active #current-time, #track-time.active #track-length { color: #f86d92; background-color: transparent; } |
Нам нужно добавить обложку альбомов в аудио-проигрыватель, стилизовать его в круглый диск, и чтобы он создавал эффект вращения при проигрывании:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
#album-art { position: absolute; top: -40px; width: 115px; height: 115px; margin-left: 40px; -webkit-transform: rotateZ(0); transform: rotateZ(0); transition: 0.3s ease all; box-shadow: 0 0 0 10px #fff; border-radius: 50%; overflow: hidden; } #album-art.active { top: -60px; box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1; } #album-art:before { content: ''; position: absolute; top: 50%; right: 0; left: 0; width: 20px; height: 20px; margin: -10px auto 0 auto; background-color: #d6dee7; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; z-index: 2; } #album-art img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; } #album-art img.active { opacity: 1; z-index: 1; } |
Также добавим кнопки управления треками, для удобной переключения композиций:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
#player-controls { width: 250px; height: 100%; margin: 0 5px 0 141px; float: right; overflow: hidden; } .control { width: 33.333%; float: left; padding: 12px 0; } .button { width: 26px; height: 26px; padding: 25px; background-color: #fff; border-radius: 6px; cursor: pointer; } .button i { display: block; color: #d6dee7; font-size: 26px; text-align: center; line-height: 1; } .button, .button i { transition: 0.2s ease all; } .button:hover { background-color: #d6d6de; } .button:hover i { color: #fff; } |
Мы добавили немного адаптивности для плеера, что позволит правильно отображаться на мобильных устройствах, полный код можете просмотреть в исходниках, а сейчас двигаемся дальше. Как создать аудио-проигрыватель на JS, весьма актуальная тема в наше время.
Шаг 3. JavaScript
Теперь нам необходимо подключить треки к плееру, установить проигрывания песен и отображения таймлайна и многое другое, в этом нам поможет js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 |
$(function() { var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl, albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'), sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'), sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"), i = playPauseButton.find('i'), tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, tFlag = false, albums = ['Dawn','Me & You','Electro Boy','Home','Proxy (Original Mix)'], trackNames = ['Skylike - Dawn','Alex Skrindo - Me & You','Kaaze - Electro Boy','Jordan Schor - Home','Martin Garrix - Proxy'], albumArtworks = ['_1','_2','_3','_4','_5'], trackUrl = ['../mp3/2.mp3','../mp3/1.mp3','../mp3/3.mp3','../mp3/4.mp3','../mp3/5.mp3'], playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1; function playPause() { setTimeout(function() { if(audio.paused) { playerTrack.addClass('active'); albumArt.addClass('active'); checkBuffering(); i.attr('class','fas fa-pause'); audio.play(); } else { playerTrack.removeClass('active'); albumArt.removeClass('active'); clearInterval(buffInterval); albumArt.removeClass('buffering'); i.attr('class','fas fa-play'); audio.pause(); } },300); }function showHover(event) { seekBarPos = sArea.offset(); seekT = event.clientX - seekBarPos.left; seekLoc = audio.duration * (seekT / sArea.outerWidth()); sHover.width(seekT); cM = seekLoc / 60; ctMinutes = Math.floor(cM); ctSeconds = Math.floor(seekLoc - ctMinutes * 60); if( (ctMinutes < 0) || (ctSeconds < 0) ) return; if( (ctMinutes < 0) || (ctSeconds < 0) ) return; if(ctMinutes < 10) ctMinutes = '0'+ctMinutes; if(ctSeconds < 10) ctSeconds = '0'+ctSeconds; if( isNaN(ctMinutes) || isNaN(ctSeconds) ) insTime.text('--:--'); else insTime.text(ctMinutes+':'+ctSeconds); insTime.css({'left':seekT,'margin-left':'-21px'}).fadeIn(0); } function hideHover() { sHover.width(0); insTime.text('00:00').css({'left':'0px','margin-left':'0px'}).fadeOut(0); } function playFromClickedPos() { audio.currentTime = seekLoc; seekBar.width(seekT); hideHover(); } function updateCurrTime() { nTime = new Date(); nTime = nTime.getTime(); if( !tFlag ) { tFlag = true; trackTime.addClass('active'); } curMinutes = Math.floor(audio.currentTime / 60); curSeconds = Math.floor(audio.currentTime - curMinutes * 60); durMinutes = Math.floor(audio.duration / 60); durSeconds = Math.floor(audio.duration - durMinutes * 60); playProgress = (audio.currentTime / audio.duration) * 100; if(curMinutes < 10) curMinutes = '0'+curMinutes; if(curSeconds < 10) curSeconds = '0'+curSeconds; if(durMinutes < 10) durMinutes = '0'+durMinutes; if(durSeconds < 10) durSeconds = '0'+durSeconds; if( isNaN(curMinutes) || isNaN(curSeconds) ) tProgress.text('00:00'); else tProgress.text(curMinutes+':'+curSeconds); if( isNaN(durMinutes) || isNaN(durSeconds) ) tTime.text('00:00'); else tTime.text(durMinutes+':'+durSeconds); if( isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds) ) trackTime.removeClass('active'); else trackTime.addClass('active');seekBar.width(playProgress+'%'); if( playProgress == 100 ) { i.attr('class','fa fa-play'); seekBar.width(0); tProgress.text('00:00'); albumArt.removeClass('buffering').removeClass('active'); clearInterval(buffInterval); } } function checkBuffering() { clearInterval(buffInterval); buffInterval = setInterval(function() { if( (nTime == 0) || (bTime - nTime) > 1000 ) albumArt.addClass('buffering'); else albumArt.removeClass('buffering'); bTime = new Date(); bTime = bTime.getTime(); },100); } function selectTrack(flag) { if( flag == 0 || flag == 1 ) ++currIndex; else --currIndex; if( (currIndex > -1) && (currIndex < albumArtworks.length) ) { if( flag == 0 ) i.attr('class','fa fa-play'); else { albumArt.removeClass('buffering'); i.attr('class','fa fa-pause'); } seekBar.width(0); trackTime.removeClass('active'); tProgress.text('00:00'); tTime.text('00:00'); currAlbum = albums[currIndex]; currTrackName = trackNames[currIndex]; currArtwork = albumArtworks[currIndex]; audio.src = trackUrl[currIndex]; nTime = 0; bTime = new Date(); bTime = bTime.getTime(); if(flag != 0) { audio.play(); playerTrack.addClass('active'); albumArt.addClass('active'); clearInterval(buffInterval); checkBuffering(); } albumName.text(currAlbum); trackName.text(currTrackName); albumArt.find('img.active').removeClass('active'); $('#'+currArtwork).addClass('active'); bgArtworkUrl = $('#'+currArtwork).attr('src'); bgArtwork.css({'background-image':'url('+bgArtworkUrl+')'}); } else { if( flag == 0 || flag == 1 ) --currIndex; else ++currIndex; } } function initPlayer() { audio = new Audio(); selectTrack(0); audio.loop = false; playPauseButton.on('click',playPause); sArea.mousemove(function(event){ showHover(event); }); sArea.mouseout(hideHover); sArea.on('click',playFromClickedPos); $(audio).on('timeupdate',updateCurrTime); playPreviousTrackButton.on('click',function(){ selectTrack(-1);} ); playNextTrackButton.on('click',function(){ selectTrack(1);}); } initPlayer(); }); |
Выводы
Как создать аудио-проигрыватель на JS — такой вопрос задавали нам достаточно часто. Мы решили показать как можно создать его таким методом на момент написания статьи в 2018 году.
Такой плеер, это универсальное средство установки аудио у себя на сайте, кроме этого вы можете установить его в качестве прослушивания подкастов на сайте, что сейчас весьма популярно. Что скажете друзья?
Вот и все. Готово!
Читайте также:
Опубликовал Cooper 22.10.2018 в 09:20, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |