Как очень быстро и яростно добавить музыкальный трек на страницу

Всё для семьи

Как очень быстро и яростно добавить музыкальный трек на страницу

Что делаем: добавляем любой 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. Настраиваем плеер по вкусу

Вот что ещё можно сделать:

  • настроить элементы управления;
  • подтянуть обложку и сделать её кликабельной, чтобы она тоже запускала трек;
  • добавить несколько треков в плейлист;
  • поставить ссылку на любое время в треке, чтобы, например, перейти к конкретному фрагменту подкаста;
  • скрыть или показать оставшееся время воспроизведения;
  • обрабатывать запуск трека как угодно, ведь это просто объект на странице.

Если что-то из этого нужно, почитайте, как это сделать, в блоге Ильи Бирмана или на странице в Гитхабе.

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

Вам может быть интересно
Кнопка в виде ЛОДКИ
Кнопка в виде ЛОДКИ

Просто дурь на CSS. Разок можно.

easy
Большой разбор: ИИ научился играть в динозаврика из Chrome
Большой разбор: ИИ научился играть в динозаврика из Chrome

Тот редкий случай, когда хочешь остаться без интернета.

medium
Домашний кинотеатр на Raspberry Pi
Домашний кинотеатр на Raspberry Pi

Превращаем любой телевизор в умный гаджет.

easy
Как добавить интерактивную карту на сайт
Как добавить интерактивную карту на сайт

Задача на три минуты

easy
Программируем скринсейвер для Илона
Программируем скринсейвер для Илона

Анимация движения звёзд на JavaScript.

medium
Прокачиваем генератор лабиринтов: оптимизируем код и добавляем выходы
Прокачиваем генератор лабиринтов: оптимизируем код и добавляем выходы

Для тех, кто соскучился по серьёзному программированию

hard
Объективный таймер обратного отсчёта на PHP
Объективный таймер обратного отсчёта на PHP

Если нужно взять дату напрямую с сервера

medium
Ставим Invoke AI — сразу 12 нейросетей для работы с картинками с удобным веб-интерфейсом
Ставим Invoke AI — сразу 12 нейросетей для работы с картинками с удобным веб-интерфейсом

Поднимите мне сети

hard
Как работает язык SQL
Как работает язык SQL

Управляем базой данных из командной строки

medium
easy