• pda
  • 29.05.2018

  • 09:53

  • 84

  • 0

Green Audio Player на HTML5 и CSS3

1.0

Проголосовало

3
Оценить мод
Аудио-плеер на основе технологии HTML5 и CSS3. Он состоит из следующих элементов: основные элементы управления (воспроизведение / пауза), два ползунка (интерфейс jQuery): ползунок громкости и ползунок длительности трека. В данном плеерене используется специальнаю разметка элемента <audio>.Управление плеером производится с использованием обработчиков событий созданного (в JavaScript) аудио элемента. Плеер можно настроить под свой сайт, так как внешний вид построен исключительно на CSS. Установка очень проста и не займет много времени. 



Установка: 
Для начала подключаем стили

Код
<ol>
  <li><code><style>.audio.green-audio-player { </code></li>
  <li><code>        width: 400px; </code></li>
  <li><code>        min-width: 300px; </code></li>
  <li><code>        height: 56px; </code></li>
  <li><code>        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07); </code></li>
  <li><code>        display: flex; </code></li>
  <li><code>        justify-content: space-between; </code></li>
  <li><code>        align-items: center; </code></li>
  <li><code>        padding-left: 24px; </code></li>
  <li><code>        padding-right: 24px; </code></li>
  <li><code>        border-radius: 4px; </code></li>
  <li><code>        user-select: none; </code></li>
  <li><code>        -webkit-user-select: none; </code></li>
  <li><code>        background-color: #fff; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .play-pause-btn { </code></li>
  <li><code>        display: none; </code></li>
  <li><code>        cursor: pointer; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .spinner { </code></li>
  <li><code>        width: 18px; </code></li>
  <li><code>        height: 18px; </code></li>
  <li><code>        background-image: url(http://webmaster-ucoz.ru/ucoz/img/img/loading.png); </code></li>
  <li><code>        background-size: cover; </code></li>
  <li><code>        background-repeat: no-repeat; </code></li>
  <li><code>        animation: spin 0.4s linear infinite; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .slider { </code></li>
  <li><code>        flex-grow: 1; </code></li>
  <li><code>        background-color: #D8D8D8; </code></li>
  <li><code>        cursor: pointer; </code></li>
  <li><code>        position: relative; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .slider .progress { </code></li>
  <li><code>        background-color: #44BFA3; </code></li>
  <li><code>        border-radius: inherit; </code></li>
  <li><code>        position: absolute; </code></li>
  <li><code>        pointer-events: none; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .slider .progress .pin { </code></li>
  <li><code>        height: 16px; </code></li>
  <li><code>        width: 16px; </code></li>
  <li><code>        border-radius: 8px; </code></li>
  <li><code>        background-color: #44BFA3; </code></li>
  <li><code>        position: absolute; </code></li>
  <li><code>        pointer-events: all; </code></li>
  <li><code>        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32); </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .controls { </code></li>
  <li><code>        font-family: 'Roboto', sans-serif; </code></li>
  <li><code>        font-size: 16px; </code></li>
  <li><code>        line-height: 18px; </code></li>
  <li><code>        color: #55606E; </code></li>
  <li><code>        display: flex; </code></li>
  <li><code>        flex-grow: 1; </code></li>
  <li><code>        justify-content: space-between; </code></li>
  <li><code>        align-items: center; </code></li>
  <li><code>        margin-left: 24px; </code></li>
  <li><code>        margin-right: 24px; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .controls .slider { </code></li>
  <li><code>        margin-left: 16px; </code></li>
  <li><code>        margin-right: 16px; </code></li>
  <li><code>        border-radius: 2px; </code></li>
  <li><code>        height: 4px; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .controls .slider .progress { </code></li>
  <li><code>        width: 0; </code></li>
  <li><code>        height: 100%; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .controls .slider .progress .pin { </code></li>
  <li><code>        right: -8px; </code></li>
  <li><code>        top: -6px; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .controls span { </code></li>
  <li><code>        cursor: default; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .volume { </code></li>
  <li><code>        position: relative; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .volume .volume-btn { </code></li>
  <li><code>        cursor: pointer; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .volume .volume-btn.open path { </code></li>
  <li><code>        fill: #44BFA3; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .volume .volume-controls { </code></li>
  <li><code>        width: 30px; </code></li>
  <li><code>        height: 135px; </code></li>
  <li><code>        background-color: rgba(0, 0, 0, 0.62); </code></li>
  <li><code>        border-radius: 7px; </code></li>
  <li><code>        position: absolute; </code></li>
  <li><code>        left: -3px; </code></li>
  <li><code>        bottom: 52px; </code></li>
  <li><code>        flex-direction: column; </code></li>
  <li><code>        align-items: center; </code></li>
  <li><code>        display: flex; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .volume .volume-controls.hidden { </code></li>
  <li><code>        display: none; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .volume .volume-controls .slider { </code></li>
  <li><code>        margin-top: 12px; </code></li>
  <li><code>        margin-bottom: 12px; </code></li>
  <li><code>        width: 6px; </code></li>
  <li><code>        border-radius: 3px; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .volume .volume-controls .slider .progress { </code></li>
  <li><code>        bottom: 0; </code></li>
  <li><code>        height: 100%; </code></li>
  <li><code>        width: 6px; </code></li>
  <li><code>} </code></li>
  <li><code>.audio.green-audio-player .volume .volume-controls .slider .progress .pin { </code></li>
  <li><code>        left: -5px; </code></li>
  <li><code>        top: -8px; </code></li>
  <li><code>} </code></li>
  <li><code>@keyframes spin { </code></li>
  <li><code>        from { </code></li>
  <li><code>        transform: rotateZ(0); </code></li>
  <li><code>        } </code></li>
  <li><code>        to { </code></li>
  <li><code>        transform: rotateZ(1turn); </code></li>
  <li><code>        } </code></li>
  <li><code>} </code></li>
  <li><code></style></code></li>
</ol>



Где хотите видеть аудио плеер вставляете код: 

Код
<ol>
  <li><code><div class="audio green-audio-player"> </code></li>
  <li><code>        <div class="loading"> </code></li>
  <li><code>        <div class="spinner"></div> </code></li>
  <li><code>        </div> </code></li>
  <li><code>        <div class="play-pause-btn">        </code></li>
  <li><code>        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24"> </code></li>
  <li><code>        <path fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon" id="playPause"/> </code></li>
  <li><code>        </svg> </code></li>
  <li><code>        </div> </code></li>
  <li><code>               </code></li>
  <li><code>        <div class="controls"> </code></li>
  <li><code>        <span class="current-time">0:00</span> </code></li>
  <li><code>        <div class="slider" data-direction="horizontal"> </code></li>
  <li><code>        <div class="progress"> </code></li>
  <li><code>        <div class="pin" id="progress-pin" data-method="rewind"></div> </code></li>
  <li><code>        </div> </code></li>
  <li><code>        </div> </code></li>
  <li><code>        <span class="total-time">0:00</span> </code></li>
  <li><code>        </div> </code></li>
  <li><code>               </code></li>
  <li><code>        <div class="volume"> </code></li>
  <li><code>        <div class="volume-btn"> </code></li>
  <li><code>        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> </code></li>
  <li><code>        <path fill="#566574" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" id="speaker"/> </code></li>
  <li><code>        </svg> </code></li>
  <li><code>        </div> </code></li>
  <li><code>        <div class="volume-controls hidden"> </code></li>
  <li><code>        <div class="slider" data-direction="vertical"> </code></li>
  <li><code>        <div class="progress"> </code></li>
  <li><code>        <div class="pin" id="volume-pin" data-method="changeVolume"></div> </code></li>
  <li><code>        </div> </code></li>
  <li><code>        </div> </code></li>
  <li><code>        </div> </code></li>
  <li><code>        </div> </code></li>
  <li><code>               </code></li>
  <li><code>        <audio crossorigin> </code></li>
  <li><code>        <source src="http://webmaster-ucoz.ru/ucoz/demo/mp3/ljosha_binom-v_nebesakh.mp3" type="audio/mpeg"> </code></li>
  <li><code>        </audio> </code></li>
  <li><code></div></code></li>
</ol>



И в нижнюю часть перед </body> вставляете код: 

Код
<ol>
  <li><code><script>'use strict'; </code></li>
  <li><code>var audioPlayer = document.querySelector('.green-audio-player'); </code></li>
  <li><code>var playPause = audioPlayer.querySelector('#playPause'); </code></li>
  <li><code>var playpauseBtn = audioPlayer.querySelector('.play-pause-btn'); </code></li>
  <li><code>var loading = audioPlayer.querySelector('.loading'); </code></li>
  <li><code>var progress = audioPlayer.querySelector('.progress'); </code></li>
  <li><code>var sliders = audioPlayer.querySelectorAll('.slider'); </code></li>
  <li><code>var volumeBtn = audioPlayer.querySelector('.volume-btn'); </code></li>
  <li><code>var volumeControls = audioPlayer.querySelector('.volume-controls'); </code></li>
  <li><code>var volumeProgress = volumeControls.querySelector('.slider .progress'); </code></li>
  <li><code>var player = audioPlayer.querySelector('audio'); </code></li>
  <li><code>var currentTime = audioPlayer.querySelector('.current-time'); </code></li>
  <li><code>var totalTime = audioPlayer.querySelector('.total-time'); </code></li>
  <li><code>var speaker = audioPlayer.querySelector('#speaker'); </code></li>
  <li> </li>
  <li><code>var draggableClasses = ['pin']; </code></li>
  <li><code>var currentlyDragged = null; </code></li>
  <li> </li>
  <li><code>window.addEventListener('mousedown', function (event) { </code></li>
  <li> </li>
  <li><code>        if (!isDraggable(event.target)) return false; </code></li>
  <li> </li>
  <li><code>        currentlyDragged = event.target; </code></li>
  <li><code>        var handleMethod = currentlyDragged.dataset.method; </code></li>
  <li> </li>
  <li><code>        this.addEventListener('mousemove', window[handleMethod], false); </code></li>
  <li> </li>
  <li><code>        window.addEventListener('mouseup', function () { </code></li>
  <li><code>        currentlyDragged = false; </code></li>
  <li><code>        window.removeEventListener('mousemove', window[handleMethod], false); </code></li>
  <li><code>        }, false); </code></li>
  <li><code>}); </code></li>
  <li> </li>
  <li><code>playpauseBtn.addEventListener('click', togglePlay); </code></li>
  <li><code>player.addEventListener('timeupdate', updateProgress); </code></li>
  <li><code>player.addEventListener('volumechange', updateVolume); </code></li>
  <li><code>player.addEventListener('loadedmetadata', function () { </code></li>
  <li><code>        totalTime.textContent = formatTime(player.duration); </code></li>
  <li><code>}); </code></li>
  <li><code>player.addEventListener('canplay', makePlay); </code></li>
  <li><code>player.addEventListener('ended', function () { </code></li>
  <li><code>        playPause.attributes.d.value = "M18 12L0 24V0"; </code></li>
  <li><code>        player.currentTime = 0; </code></li>
  <li><code>}); </code></li>
  <li> </li>
  <li><code>volumeBtn.addEventListener('click', function () { </code></li>
  <li><code>        volumeBtn.classList.toggle('open'); </code></li>
  <li><code>        volumeControls.classList.toggle('hidden'); </code></li>
  <li><code>}); </code></li>
  <li> </li>
  <li><code>window.addEventListener('resize', directionAware); </code></li>
  <li> </li>
  <li><code>sliders.forEach(function (slider) { </code></li>
  <li><code>        var pin = slider.querySelector('.pin'); </code></li>
  <li><code>        slider.addEventListener('click', window[pin.dataset.method]); </code></li>
  <li><code>}); </code></li>
  <li> </li>
  <li><code>directionAware(); </code></li>
  <li> </li>
  <li><code>function isDraggable(el) { </code></li>
  <li><code>        var canDrag = false; </code></li>
  <li><code>        var classes = Array.from(el.classList); </code></li>
  <li><code>        draggableClasses.forEach(function (draggable) { </code></li>
  <li><code>        if (classes.indexOf(draggable) !== -1) canDrag = true; </code></li>
  <li><code>        }); </code></li>
  <li><code>        return canDrag; </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function inRange(event) { </code></li>
  <li><code>        var rangeBox = getRangeBox(event); </code></li>
  <li><code>        var rect = rangeBox.getBoundingClientRect(); </code></li>
  <li><code>        var direction = rangeBox.dataset.direction; </code></li>
  <li><code>        if (direction == 'horizontal') { </code></li>
  <li><code>        var min = rangeBox.offsetLeft; </code></li>
  <li><code>        var max = min + rangeBox.offsetWidth; </code></li>
  <li><code>        if (event.clientX < min || event.clientX > max) return false; </code></li>
  <li><code>        } else { </code></li>
  <li><code>        var min = rect.top; </code></li>
  <li><code>        var max = min + rangeBox.offsetHeight; </code></li>
  <li><code>        if (event.clientY < min || event.clientY > max) return false; </code></li>
  <li><code>        } </code></li>
  <li><code>        return true; </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function updateProgress() { </code></li>
  <li><code>        var current = player.currentTime; </code></li>
  <li><code>        var percent = current / player.duration * 100; </code></li>
  <li><code>        progress.style.width = percent + '%'; </code></li>
  <li> </li>
  <li><code>        currentTime.textContent = formatTime(current); </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function updateVolume() { </code></li>
  <li><code>        volumeProgress.style.height = player.volume * 100 + '%'; </code></li>
  <li><code>        if (player.volume >= 0.5) { </code></li>
  <li><code>        speaker.attributes.d.value = 'M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z'; </code></li>
  <li><code>        } else if (player.volume < 0.5 && player.volume > 0.05) { </code></li>
  <li><code>        speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z'; </code></li>
  <li><code>        } else if (player.volume <= 0.05) { </code></li>
  <li><code>        speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667'; </code></li>
  <li><code>        } </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function getRangeBox(event) { </code></li>
  <li><code>        var rangeBox = event.target; </code></li>
  <li><code>        var el = currentlyDragged; </code></li>
  <li><code>        if (event.type == 'click' && isDraggable(event.target)) { </code></li>
  <li><code>        rangeBox = event.target.parentElement.parentElement; </code></li>
  <li><code>        } </code></li>
  <li><code>        if (event.type == 'mousemove') { </code></li>
  <li><code>        rangeBox = el.parentElement.parentElement; </code></li>
  <li><code>        } </code></li>
  <li><code>        return rangeBox; </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function getCoefficient(event) { </code></li>
  <li><code>        var slider = getRangeBox(event); </code></li>
  <li><code>        var rect = slider.getBoundingClientRect(); </code></li>
  <li><code>        var K = 0; </code></li>
  <li><code>        if (slider.dataset.direction == 'horizontal') { </code></li>
  <li> </li>
  <li><code>        var offsetX = event.clientX - slider.offsetLeft; </code></li>
  <li><code>        var width = slider.clientWidth; </code></li>
  <li><code>        K = offsetX / width; </code></li>
  <li><code>        } else if (slider.dataset.direction == 'vertical') { </code></li>
  <li> </li>
  <li><code>        var height = slider.clientHeight; </code></li>
  <li><code>        var offsetY = event.clientY - rect.top; </code></li>
  <li><code>        K = 1 - offsetY / height; </code></li>
  <li><code>        } </code></li>
  <li><code>        return K; </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function rewind(event) { </code></li>
  <li><code>        if (inRange(event)) { </code></li>
  <li><code>        player.currentTime = player.duration * getCoefficient(event); </code></li>
  <li><code>        } </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function changeVolume(event) { </code></li>
  <li><code>        if (inRange(event)) { </code></li>
  <li><code>        player.volume = getCoefficient(event); </code></li>
  <li><code>        } </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function formatTime(time) { </code></li>
  <li><code>        var min = Math.floor(time / 60); </code></li>
  <li><code>        var sec = Math.floor(time % 60); </code></li>
  <li><code>        return min + ':' + (sec < 10 ? '0' + sec : sec); </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function togglePlay() { </code></li>
  <li><code>        if (player.paused) { </code></li>
  <li><code>        playPause.attributes.d.value = "M0 0h6v24H0zM12 0h6v24h-6z"; </code></li>
  <li><code>        player.play(); </code></li>
  <li><code>        } else { </code></li>
  <li><code>        playPause.attributes.d.value = "M18 12L0 24V0"; </code></li>
  <li><code>        player.pause(); </code></li>
  <li><code>        } </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function makePlay() { </code></li>
  <li><code>        playpauseBtn.style.display = 'block'; </code></li>
  <li><code>        loading.style.display = 'none'; </code></li>
  <li><code>} </code></li>
  <li> </li>
  <li><code>function directionAware() { </code></li>
  <li><code>        if (window.innerHeight < 250) { </code></li>
  <li><code>        volumeControls.style.bottom = '-54px'; </code></li>
  <li><code>        volumeControls.style.left = '54px'; </code></li>
  <li><code>        } else if (audioPlayer.offsetTop < 154) { </code></li>
  <li><code>        volumeControls.style.bottom = '-164px'; </code></li>
  <li><code>        volumeControls.style.left = '-3px'; </code></li>
  <li><code>        } else { </code></li>
  <li><code>        volumeControls.style.bottom = '52px'; </code></li>
  <li><code>        volumeControls.style.left = '-3px'; </code></li>
  <li><code>        } </code></li>
  <li><code>} </code></li>
  <li><code></script></code></li>
</ol>
Порядок установки:
Ссылка
BB-Code
HTML-код
:)