Меню
Спросить
???

Как сделать плеер? Часть 2.

11 сентября 2017
Как сделать плеер? Часть 2.

Всем привет. Многие задаются вопросом, как стилизовать тег audio? Ответ очень прост - его нельзя стилизовать. Максимум, что мы можем сделать своими кривыми руками с тегом audio, так это изменить его длину и ширину. Поэтому, чтобы сделать свой красивый плеер, нам не понадобится тег audio и по этой причине мы его и не писали в первой части. Сегодня мы будем делать внешний вид той кучи говна, которую написали, в стилях css. Поехали!

Подключаем стили

Для того, чтобы менять стили сайта, нам нужно их подключить к нашей странице. Можно писать стили и в самом документе html, но я подключу отдельный файл css. Для этого создаем файл style.css и открываем его,а так же открываем наш index.html. В index.html прописываем в теге head тег link в котором укажем три атрибута, необходимых для подключения стилей. Если ты не знаешь как подключать стили, прочитай эту статью.
И так подключаем наши стили:

  1. <head>
  2.     <title>Мой плеер</title>
  3.     <link type="text/css" rel="stylesheet" href="style.css">
  4. </head>

Отлично, теперь закрываем index.html, он нам больше не понадобится сегодня. Переходим в style.css

html, body

Первое, что мы простилизуем - это теги html и body.
Тут все просто:
задаем ширину и длину на сто процентов, относительно родителя, и обнуляем внутренние и внешние отступы.

  1. html,body{
  2.     width:100%;
  3.     height:100%;
  4.     padding:0;
  5.     margin:0;
  6. }

Поехали дальше.

.wrp

В первую очередь расположим этот блок с классом wrp по середине. Как расположить блок по середине? Заметем, что именно по середине, а не по центру. Кстати о центрировании элементов есть отдельная статья.
Так вот, для того, чтобы элемент расположить по середине родителя, нужно указать ему конкретную ширину и задать внешние отступы со значением нуль и auto.

  1. .wrp{
  2.     width:700px;
  3.     margin:0 auto;
  4. }

Поехали дальше, задаем внешний отступ сверху на 20 пикселей, указываем длину в 70% относительно родителя, задаем тень и скругление углов.

  1. .wrp{
  2.     width:700px;
  3.     margin:0 auto;
  4.     margin-top:20px;
  5.     height:70%;
  6.     box-shadow:0 0 15px rgba(0,0,0,0.2);
  7.     border-radius:5px;
  8. }

.player, .song

У этих двух элементов будут схожие стили, поэтому задаем стили одновременно для двух блоков с классами player и song. Чуть позже мы изменим некоторые стили для элемента с классом song.
Первым свойством задаем позиционирование relative, для того чтобы дочерние элементы с position: absolute, не вылезали за рамки данного родителя.
Дальше задаем ширину и длинувнутренние отступы по 10 пикселей с каждой стороны, внешние отступы укажем со всех сторон по нулям, но с низу укажем 20 пикселей. В конце укажем цвет фона и зададим скругление верхних углов - правого верхнего и левого верхнего.

  1. .player, .song{
  2.     position:relative;
  3.     width:680px;
  4.     height:50px;
  5.     padding:10px;
  6.     margin:0 0 20px 0;
  7.     background:#e74c3c;
  8.     border-radius:5px 5px 0 0
  9. }

.play-pause, .play-pause_song

Теперь стилизуем кнопки воспроизведения и паузы музыки. Эти два блока тоже будут иметь схожие стили, но для класса play-pause_song стили изменим чуть ниже.
Для начала прижмем кнопку к левому краю, для того чтобы другие элементы ее обтекали справа.
Далее мы добавим в фон элемента цвет и картинку(иконка или значок), тобишь укажем путь до нее и зададим параметр не повторять. Потом укажем размер картинки в 40 пикселей и позицию - относительно левого края 8 пикселей и относительно верха тоже 8 пикселей.
Потом укажем ширину и длину, а так же скругление углов, то есть сделаем из квадрата кружок.

  1. .play-pause,.play-pause_song{
  2.     float:left;
  3.     background:#c0392b url(play.png) no-repeat;
  4.     background-size:40px;
  5.     background-position:8px 8px;
  6.     width:50px;
  7.     height:50px;
  8.     border-radius:50px;
  9. }

.nameSong, .settings, .nameSong_song

Дальше займемся тремя элементами, это будут три класса.
.nameSong - название песни в плеере;
.nameSong_song - название песни в списках песен;
.settings - настройки плеера.
Указываем абсолютное позиционированиецвет шрифтавнутренние отступы, положение относительно верха и левого края. В конце укажем размер шрифта.

  1. .nameSong,.settings,.nameSong_song{
  2.     position:absolute;
  3.     color:#ecf0f1;
  4.     padding:5px;
  5.     top:0;
  6.     left:340px;
  7.     font-size:18px
  8. }

Теперь затронем отдельно элемент с классом settings, его нужно переместить относительно левого края, чуть ближе.

  1. .settings{
  2.     left:80px
  3. }

.settings div, .mute, .volume

Теперь изменим стили для настроек плеера.

  1. .settings div{
  2.     float:left;
  3.     margin-right:5px
  4. }
  5. .mute, .volume{
  6.     font-size:20px;
  7.     margin:0 10px
  8. }

.bar

Дальше займемся трек линией, а конкретно начнем с ее родителя - класс bar.
Здесь тоже нет ничего сверхъестественного.
Указываем позиционирование, прижать к левому краю, цвет фона, ширина и длина, внешние и внутренние отступы. В конце параметр, которые отвечает за показ содержимого в родительском контейнере, указываем значение скрывать элементы которые выходят за рамки родителя.

  1. .bar{
  2.     position:relative;
  3.     float:left;
  4.     background:rgba(0,0,0,0);
  5.     width:540px;
  6.     height:40px;
  7.     margin:10px;
  8.     padding:0;
  9.     overflow:hidden;
  10. }

Дальше дочерние элементы класса bar.

.setTime

Этот блок будет всплывать при наведении курсора на трек линию и указывать внутри себя значение в секундах.
Тут тоже все как обычно, единственное мы его скроем, он будет появляться только в тот момент, когда пользователь наведет курсор на трек линию, чтобы перемотать песню.

  1. .setTime{
  2.     position:absolute;
  3.     top:0;
  4.     background:#1abc9c;
  5.     color:#ecf0f1;
  6.     font-size:12px;
  7.     padding:3px;
  8.     display:none
  9. }

.range, .progress, .load

Эти три элемента схожи по стилям в некоторых местах, но различия между ними все таки есть. Для чего же они предназначены?
.range - это сама полоса трека;
.progress - это полоса, которая будет двигаться при воспроизведении музыки;
.load - это полоса, которая будет двигаться при загрузке музыки.
Вообще это можно было сделать с помощью тега input с типом range, но я решил как обычно изобрести велосипед.
Укажем сначала общие стили:

  1. .range,.progress,.load{
  2.     height:10px;
  3.     margin:25px 0;
  4.     padding:0;
  5.     width:100%
  6. }

У них будет одинаковая длина, ширина и отступы.
Это будут три линии разных цветов, линия трека будет стоять всегда на месте, а вот линии процесса и загрзки будут выдвигаться соответственно секундам, воспроизведенных и загруженных.
Если не понятно что это будет все таки будет, то не переживайте еще все поймете, а пока что просто стилизуем.
Теперь изменим стили у полос, которые будут выдвигаться.

  1. .progress,.load{
  2.     position:absolute;
  3.     top:0;
  4.     left:-100%
  5. }

Ну и зададим для каждой полосы свой цвет.

  1. .range{
  2.     background:rgba(192,57,43,0.5)
  3. }
  4. .progress{
  5.     background:#1abc9c;
  6.     z-index:3;
  7. }
  8. .load{
  9.     background:rgb(192,57,43)
  10. }

Так же полоса загрузки имеет параметр z-index, для того чтобы она была по оси z на первом плане, а остальные две полосы за ней.

.time, .duration_song

Теперь зададим стили для текущее времени в плеера - блок с классом .time и стили для продолжительности песни в списке песен.

  1. .time,.duration_song{
  2.     float:left;
  3.     font-size:20px;
  4.     margin:15px 0 0 15px;
  5.     color:#ecf0f1
  6. }

Дело осталось за малым, ну нужно лишь добавить или изменить стили у самого вида песни.

  1. .song{
  2. height:25px;
  3. background:rgb(26,188,156);
  4. color:#ecf0f1;
  5. float:left;
  6. border-radius:0
  7. }
  8. .song:hover{
  9. background:rgba(26,188,156,0.8)
  10. }
  11. .play-pause_song{
  12. background:#16a085 url(play.png) no-repeat;
  13. background-size:20px;
  14. background-position:4px 4px;
  15. width:25px;
  16. height:25px
  17. }
  18. .nameSong_song,.duration_song{
  19. font-size:14px
  20. }
  21. .nameSong_song{
  22. top:10px;
  23. left:80px
  24. }
  25. .duration_song{
  26. float:right;
  27. margin-top:5px
  28. }

Вот и все, вот такой плеер у меня получился

Плеер для сайта

Заключение

На этом все. Не обязательно делать точно такой же плеер, главное поймите суть, что мы не можем стилизовать тег audio, но можем нарисовать свой плеер и управлять им. Желаю всем создать свой шикарный плеер. До следующей части.
Всем спасибо за урок, пока =)

Следующая статьяПредыдущая статья