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

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

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

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

Блоки HTML

Для начала создадим файл index.html и напишем пустой документ, укажем что он на русском языке и зададим тег тайтл.

  1. <!doctype html>
  2. <html lang="ru">
  3. <head>
  4. <title>Мой плеер</title>
  5. </head>
  6. <body>
  7. </body>
  8. </html>

Дальше будем работать в теле сайта, то есть в теге body. Для начала в нем создадим родительский блок, который будет содержать в себе плеер и список песен. Укажем ему класс wrp. В нем создадим блок с классом player - это будет наш плеер.

  1. <div class="wrp">
  2.     <div class="player"></div>
  3. </div>

Теперь будем создавать элементы плеера.
Кнопка запуска и останова песни - блок с классом play-pause, так же у него будет атрибут id, который будет содержать в себе номер песни. Это нужно для того, чтобы мы, когда кликаем по блоку он нам будет передавать данный айди, если ни чего не понятно то можешь закрывать статью не волноваться, в дальнейшем все будет понятно и ясно как дважды два.
После кнопки будет блок с классом nameSong, он будет содержать в себе название песни.
Третий элемент, это блок с классом settings, в нем будут настройки плеера.
Дальше блок с классом bar, он будет представлять из себя трек песни, то есть та штука в которой будет двигаться линия когда песня играет.
И последний блок с классом time будет содержать в себе текущее время при воспроизведении.
Пишем!

  1. <div class="wrp">
  2.     <div class="player">
  3.          <div class="play-pause" id="-1"></div>
  4.          <div class="nameSong">Название песни</div>
  5.          <div class="settings"></div>
  6.          <div class="bar"></div>
  7.          <div class="time">0:00</div>
  8.     </div>
  9. </div>

Так готово, теперь перейдем в блок настроек плеера, который мы создали выше, с классом settings. Работаем там.
Делаем две кнопки, которые будут отвечать за переключение к предыдущей или следующей песне. Класс у них будет одинаковый - sledbtn, айди будут различаться, кнопка "предыдущей" песни будет содержат в себе айди pred, а кнопка "следующая" соответственно айди sled. Так же там будут значки, простые стрелочки, вы можете поместить туда другие значки или же картинки. И еще один атрибут data-id, он будет содержать в себе айди соответствующих песен, на которые нужно будет переключиться.
После этих двух кнопок будет кнопка выключения/включения звука. Блок с классом mute и я добавлю в него значок ноты.
Последнее это будет регулятор громкости, его мы сделаем с помощью тега input с типом range. Этот тип представляет из себя трек с ползунком. Класс будет называться volume, так же будут значения минимума и максимума и текущее значение будет равно значению максимума, то есть звук будет на полной. Пишем.

  1. <div class="wrp">
  2.     <div class="player">
  3.          <div class="play-pause" id="-1"></div>
  4.          <div class="nameSong">Название песни</div>
  5.          <div class="settings">
  6.              <div class="sledbtn" id="pred" data-id="-1">◄</div> <!--Кнопка предыдущая песня-->
  7.              <div class="sledbtn" id="sled" data-id="-1">►</div><!--Кнопка следующая песня-->
  8.              <div class="mute">♪</div><!--Кнопка выключения/включения звука-->
  9.              <input type="range" class="volume" min="0" max="100" value="100"><!--Регулятор громкости-->
  10.          </div>
  11.          <div class="bar"></div>
  12.          <div class="time">0:00</div>
  13.     </div>
  14. </div>

Теперь займемся блоком с классом bar, добавим в него следующие элементы:
Первый блок, который будет в нем, это блок с классом setTime, это будет у нас штучка, которая будет вылазить при наведении курсора на трек и будет показывать нам секунды на которых находится курсор.
Второй блок будет непосредственно сама трек линия, с классом range, она будет содержать в себе еще два блока с классами progress и load соответственно, это буду линии воспроизведения музыки и загрузки музыки. Поехали =)

  1. <div class="wrp">
  2.     <div class="player">
  3.          <div class="play-pause" id="-1"></div>
  4.          <div class="nameSong">Название песни</div>
  5.          <div class="settings">
  6.              <div class="sledbtn" id="pred" data-id="-1">◄</div>
  7.              <div class="sledbtn" id="sled" data-id="-1">►</div>
  8.              <div class="mute">♪</div>
  9.              <input type="range" class="volume" min="0" max="100" value="100">
  10.          </div>
  11.          <div class="bar">
  12.              <div class="setTime"></div>
  13.              <div class="range">
  14.                  <div class="progress"></div>
  15.                  <div class="load"></div>
  16.              </div>
  17.          </div>
  18.          <div class="time">0:00</div>
  19.     </div>
  20. </div>

C плеером закончили, теперь сделаем вид песенки.
Это будет блок с классом song и он будет располагаться после блока player.
В нем будет три элемента:
Первый это блок с классом play-pause_song, кнопка включения/выключения песни.
Вторая кнопка с классом nameSong_song, тут будет название песни.
Ну и последний блок это элемент с классом duration_song, это будет продолжительность песни.
Сам блок с классом song будет содержать в себе атрибут айди в котором будет записан номер соответствующей ему песни. Пишем =)

  1. <div class="song" id="">
  2.     <div class="play-pause_song"></div>
  3.     <div class="nameSong_song">Название песни</div>
  4.     <div class="duration_song">0:00</div>
  5. </div>

С html кодом на сегодня все, в дальнейшем возможно будут правки.

Заключение

И у этой части есть конец, большинству конечно еще не понятно совсем, что я здесь накалякал, но это моя структура и то что она вам не понятна, эта естественно, особенно если ты новичок. Зато теперь ты можешь написать свой плеер на html и больше не будешь спрашивать как написать свой плеер на html.
Все, в следующей части будем придавать внешний вид нашему плееру и уже будет более понятно что да как.
Всем спасибо, пока  =).

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