ЖМК-301/2. Веб-дизайн. Практическое занятие №6. Прото-3D дизайн c аудиоплеером и extra-depth интерфейсом

Вам нужно создать страницу, реализованную по принципам прото-3D дизайна с extra-depth эффектом и работающим аудиоплеером. Для этого вам потребуется:

- две фоновых картинки: для самой страницы и для прото-3D макета плеера;

- иллюстрация исполнителя;

- аудио трек небольшого размера в формате mp3. Загрузите все в репозиторий.

I CSS

1) Задаем параметры стилей страницы и фоновую картинку. Укажите свою в параметре background-image:

html,

body {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  height: 100%;

  background-color: #f5e0e5;

  position: relative;

  font-family: "Roboto", sans-serif;

}

2) Создаем класс плеера с размерами extra-depth интерфейса. Здесь же по аналогии с предыдущим пунктом указываем фоновую картинку в интерфейсе. Отдельно обозначаем цвет тени, отбрасываемой 3D-объектом на основной фон. Выберите подходящий цвет:

.player {

  position: absolute;

  left: 50%;

  top: -50px;

  transform: translate(-50%, -50%);

  width: 330px;

  height: 530px;

  border-radius: 15px;

  box-shadow: 0 15px 20px 10px цветтени;

}

3) Задаем логику отображения инпутов и цвет строки воспроизводимого трека - укажите свой:

.player input[type=range] {

  -webkit-appearance: none !important;

  margin: 0px;

  padding: 0px;

  background: white;

  height: 5px;

  width: 150px;

  outline: none;

  cursor: pointer;

  overflow: hidden;

  border-radius: 5px;

}

.player input[type=range]::-ms-fill-lower {

  background: white;

}

.player input[type=range]::-ms-fill-upper {

  background: white;

}

.player input[type=range]::-moz-range-track {

  border: none;

  background: white;

}

  

.player input[type=range]::-webkit-slider-thumb {

  -webkit-appearance: none !important;

  background: цветзаполняемойстрокитрека;

  height: 5px;

  width: 5px;

  border-radius: 50%;

  box-shadow: -100vw 0 0 100vw DeepSkyBlue;

}

  

.player input[type=range]::-moz-range-thumb {

  background: #ff3677;

  height: 8px;

  width: 8px;

  border-radius: 100%;

}

  

.player input[type=range]::-ms-thumb {

  -webkit-appearance: none !important;

  background: #ff3677;

  height: 8px;

  width: 8px;

  border-radius: 100%;

}

4) Добавляем обложку плеера - продублируйте здесь цвет основной тени:

  

.player .cover {

  width: 150px;

  height: 150px;

  border-radius: 50%;

  overflow: hidden;

  position: absolute;

  left: 50%;

  top: 50px;

  transform: translateX(-50%);

  box-shadow: 0 15px 20px 10px цветтени;

 

}

5) Задаем параметры обложки и инфополя плеера:

  

.player .cover img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

  

.player .info {

  position: relative;

  left: 50%;

  top: 240px;

  transform: translateX(-50%);

  text-align: center;

}

6) Теперь цвет шрифта в названии. Укажите свой:

  

.player .info .title {

  font-size: 20px;

  font-weight: 600;

  margin-bottom: 2px;

}

7) Добавляем кнопки в плеер. При необходимости можете изменить их цвета:

  

.player .info .singer {

  font-size: 14px;

  font-weight: 600;

  color: white;

}

  

.player .btn-box {

  position: absolute;

  top: 330px;

  width: 100%;

  display: flex;

  justify-content: center;

}

  

.player .btn-box i {

  font-size: 24px;

  color: white;

  margin: 0 30px;

  cursor: pointer;

}

  

.player .btn-box i.active {

  color: RoyalBlue;

}

8) Инпуты громкости:

  

.player .volume-box {

  display: none;

  position: absolute;

  left: 50%;

  top: 295px;

  transform: translateX(-50%);

  z-index: 1;

  padding: 0 20px;

}

  

.player .volume-box .volume-down {

  position: absolute;

  left: -15px;

  top: 50%;

  transform: translateY(-50%);

  cursor: pointer;

  color: #72646f;

}

  

.player .volume-box .volume-up {

  position: absolute;

  right: -15px;

  top: 50%;

  transform: translateY(-50%);

  cursor: pointer;

  color: #72646f;

}

  

.player .volume-box .volume-up::selection {

  background-color: unset;

}

  

.player .volume-box input[type=range] {

  height: 5px;

  width: 150px;

  margin: 0 0 15px 0;

}

  

.player .volume-box.active {

  display: block;

}

  

.player .music-box {

  position: absolute;

  left: 50%;

  top: 385px;

  transform: translateX(-50%);

}

  

.player .music-box input[type=range] {

  height: 5px;

  width: 230px;

  margin: 0 0 10px 0;

}

  

.player .music-box input[type=range]::-webkit-slider-thumb {

  height: 5px;

  width: 7px;

}

9) Поля времени со счетчиком минут и секунд:

  

.player .music-box .current-time {

  position: absolute;

  left: -35px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 12px;

  color: white;

}

  

.player .music-box .duration {

  position: absolute;

  right: -35px;

  top: 50%;

  transform: translateY(-50%);

  font-size: 12px;

  color: white;

}

  

.player .music-box .play,

.player .music-box .pause {

  position: absolute;

  left: 50%;

  top: 55px;

  transform: translateX(-50%);

  width: 50px;

  height: 50px;

  border-radius: 50px;

  background-color: white;

  cursor: pointer;

  transition: all 0.4s;

}

  

.player .music-box .play i,

.player .music-box .pause i {

  font-size: 36px;

  color: #72646f;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-48%, -50%);

}

  

.player .music-box .pause i {

  font-size: 32px;

  transform: translate(-50%, -50%);

}

II HTML 

10) Открываем типовые теги страницы:

<html lang="en">

  <head>

    <meta charset="UTF-8"></meta>

    <title>Ваш заголовок</title>

11) Подключаем шрифт и иконки. При необходимости используйте свои:

<link href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" rel="stylesheet"></link>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>

12) Подключаем CSS, закрываем </head>, внутри <body> открываем классы плеера и обложки:

<div class="player">

<div class="cover">

13) в теге <img> встраиваем обложку альбома или портрет исполнителя, закрываем </div> обложки.

14) Открываем класс инфоблока, в заголовке указываем название трека, в классе исполнителя - его имя:

        <div class="info">

            <div class="title">название трека</div>

            <div class="singer">исполнитель</div>

15) Закрываем класс инфоблока </div>, добавляем классы кнопок запуска трека, повтора, громкости:

        <div class="volume-box">

            <span class="volume-down"><i class="material-icons">remove</i></span>

            <input class="volume-range" max="100" min="0" oninput="music.volume = this.value/100" step="1" type="range" value="80" />

            <span class="volume-up"><i class="material-icons">add</i></span>

        </div>

        <div class="btn-box">

            <i class="material-icons repeat" onclick="handleRepeat()">repeat</i>

            <i class="material-icons volume" onclick="handleVolume()">volume_up</i>

        </div>

        <div class="music-box">

            <input class="seekbar" max="100" min="0" oninput="handleSeekBar()" step="1" type="range" value="0" />

16) Получаем ссылку на mp3 трек из репозитория. Чтобы получить корректную ссылку, скопируйте ее по адресу view raw. Ссылка приобретет вид:

https://github.com/Dmitrykonn/имя репозитория/raw/refs/heads/main/имя файла.mp3

Рабочая ссылка должна быть преобразована следующим образом:

https://raw.githubusercontent.com/Dmitrykonn/имя репозитория/refs/heads/main/имя файла.mp3

17) Открываем HTML5-тег для аудио и указываем в нем ссылку на файл:

            <audio class="music-element">

                <source src="ссылка на аудио" type="audio/mp3"></source>

            </audio>

18) Добавляем счетчик трека:

            <span class="current-time">0:00</span><span class="duration">0:00</span>

            <span class="play" onclick="handlePlay()">

                <i class="material-icons">play_arrow</i>

            </span>

        </div>

    </div>

III JavaScript

19) Добавляем код плеера: 

var music = document.querySelector('.music-element')

var playBtn = document.querySelector('.play')

var seekbar = document.querySelector('.seekbar')

var currentTime = document.querySelector('.current-time')

var duration = document.querySelector('.duration')

function handlePlay() {

    if (music.paused) {

        music.play();

        playBtn.className = 'pause'

        playBtn.innerHTML = '<i class="material-icons">pause</i>'

    } else {

        music.pause();

        playBtn.className = 'play'

        playBtn.innerHTML = '<i class="material-icons">play_arrow</i>'

    }

    music.addEventListener('ended', function () {

        playBtn.className = 'play'

        playBtn.innerHTML = '<i class="material-icons">play_arrow</i>'

        music.currentTime = 0

    });

}

music.onloadeddata = function () {

    seekbar.max = music.duration

    var ds = parseInt(music.duration % 60)

    var dm = parseInt((music.duration / 60) % 60)

    duration.innerHTML = dm + ':' + ds

}

music.ontimeupdate = function () { seekbar.value = music.currentTime }

handleSeekBar = function () { music.currentTime = seekbar.value }

music.addEventListener('timeupdate', function () {

    var cs = parseInt(music.currentTime % 60)

    var cm = parseInt((music.currentTime / 60) % 60)

    currentTime.innerHTML = cm + ':' + cs

}, false)

20) Скрипт повтора воспроизведения:

var repIcon = document.querySelector('.repeat')

function handleRepeat() {

    if (music.loop == true) {

        music.loop = false

        repIcon.classList.toggle('active')

    }

    else {

        music.loop = true

        repIcon.classList.toggle('active')

    }

}

21) И скрипт громкости плеера:

var volIcon = document.querySelector('.volume')

var volBox = document.querySelector('.volume-box')

var volumeRange = document.querySelector('.volume-range')

var volumeDown = document.querySelector('.volume-down')

var volumeUp = document.querySelector('.volume-up')

function handleVolume() {

    volIcon.classList.toggle('active')

    volBox.classList.toggle('active')

}

volumeDown.addEventListener('click', handleVolumeDown);

volumeUp.addEventListener('click', handleVolumeUp);

function handleVolumeDown() {

    volumeRange.value = Number(volumeRange.value) - 20

    music.volume = volumeRange.value / 100

}

function handleVolumeUp() {

    volumeRange.value = Number(volumeRange.value) + 20

    music.volume = volumeRange.value / 100

}

22) Закрываем оставшиеся теги </body> и </html>

Опубликуйте задание в своем блоге. Если все верно, то ваш проект будет выглядеть похожим образом: https://konoplevdesign3.blogspot.com/p/music-player-html-body-padding-0-margin.html

Ссылки на выполненное задание принимаются в комментариях к этому посту для ЖМК-302 до 17:00 13 марта, для ЖМК-301 до 17:00 16 марта.

РЕЗУЛЬТАТЫ (данные обновляются):

Акимкина Олеся - 5

Ананина Виктория - 5

Андрюк Анастасия - 5

Ахрарова Виктория - 5

Власов Максим - 5

Гостева Полина - 5

Григорьева Екатерина - 5

Добышева Таисия - 5

Зубко Сабина - 5

Козилова Елизавета - 5

Климович Мария - 5

Куликова Мария - 5

Маханек Вера - 5

Новая Валентина - 5

Орлова Арина - 5

Слободская Елизавета - 5

Хайруддинов Тимур - 5

Цветкова Виктория - 5

Чугунова Елизавета - 5

Шабалина Виктория - 5

Широкоумова Полина - 5