Что делаем: добавляем любой mp3-файл на страницу, чтобы его можно было включить и послушать.
Время: 4 минуты
С чем работаем: HTML-страница и jQuery
Что понадобится: Жуэль — плеер для веба Ильи Бирмана.
1. Подключаем jQuery
Чтобы плеер работал, ему нужна винтажная библиотека jQuery. Подключаем её на странице, где хотим добавить трек:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.mi
n.js"></script>
Многие фронтендеры говорят, что jQuery в 2021 году — это фу. Но если тебе нужна конкретная библиотека, которая требует jQuery, у тебя, по сути, нет другого выхода. Фронтендеры, расслабьтесь.
2. Подключаем Жуэль
Сразу же после jQuery добавляем в HTML-файл код подключения плеера и его CSS-стилей:
<script src="https://github.com/ilyabirman/Jouele/blob/master/dist/jouele.min.js"></script>
<link href="https://github.com/ilyabirman/Jouele/blob/master/dist/jouele.min.css" rel="stylesheet"/>3. Добавляем файл на сервер
Чтобы плеер мог проиграть файл, мы должны указать путь к этому файлу. Проще всего залить нужные треки себе на сервер и скопировать путь оттуда. Но можно и использовать файлы с чужих серверов, если есть прямой адрес mp3-файла.
👉 Если вы не знаете, как добавить файл на сервер, то почитайте нашу статью про хостинг.
4. Добавляем плеер на страницу
Теперь у нас всё готово, можем делать красиво. Фишка в том, что Каждая ссылка с классом "jouele" превратится в плеер mp3-файла, на который она ведёт:
<a href="http://audio.ilyabirman.ru/Ilya Birman - News.mp3" class="jouele">Ilya
Birman: News</a>
5. Настраиваем плеер по вкусу
Вот что ещё можно сделать:
- настроить элементы управления;
- подтянуть обложку и сделать её кликабельной, чтобы она тоже запускала трек;
- добавить несколько треков в плейлист;
- поставить ссылку на любое время в треке, чтобы, например, перейти к конкретному фрагменту подкаста;
- скрыть или показать оставшееся время воспроизведения;
- обрабатывать запуск трека как угодно, ведь это просто объект на странице.
Если что-то из этого нужно, почитайте, как это сделать, в блоге Ильи Бирмана или на странице в Гитхабе.
