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

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

Всё для семьи

Что делаем: добавляем любой 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

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

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

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

easy
UX-тест простого калькулятора на JavaScript
UX-тест простого калькулятора на JavaScript

Что скажут UX-тестировщики про наш проект

easy
Как добавить кнопки «Поделиться» на страницу
Как добавить кнопки «Поделиться» на страницу

Простой рецепт от Яндекса.

easy
Прогаем в Экселе: автомобиль в кредит или по подписке?
Прогаем в Экселе: автомобиль в кредит или по подписке?

Программерский подход, подручные средства.

easy
Как сделать таймер
Создаём собственный таймер-напоминалку

Таймеров и трекеров полно, но мы сделаем такой, какой нужен именно вам. Это легко.

medium
Как добавить плавающий блок на страницу
Как добавить плавающий блок на страницу

Иногда это и правда нужно.

easy
Подключаем нейросеть к веб-камере

Готовьтесь — искусственный интеллект уберёт вас из кадра.

medium
Пинг-понг против компьютера на JavaScript

Лёгкая версия

easy
Что означает ошибка SyntaxError: missing formal parameter
Что означает ошибка SyntaxError: missing formal parameter

Ты объявляешь функцию, но ты делаешь это без уважения.

easy
Как сгенерировать нейросетью любые картинки
Как сгенерировать нейросетью любые картинки

А также каким будет Half-Life 3

medium
Улучшаем автоматизацию новостей
Улучшаем автоматизацию новостей

И получаем готовый рабочий продукт.

easy
easy