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

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

Всё для семьи

Что делаем: добавляем любой 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. Разок можно.

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

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

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

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

Чёртовы психи: как добавить снежинок на любой сайт одной строкой

Ну ладно, тремя строками. Это, считай, одна.

Проверяем текст в Главреде
Проверяем текст в Главреде

Добавляем новые возможности через API.

Что означает ошибка ReferenceError: Invalid left-hand side in assignment
Что означает ошибка ReferenceError: Invalid left-hand side in assignment

Скорее всего, вы используете оператор присваивания вместо сравнения.

Конец ретроградному Меркурию! Пишем собственный гороскоп на Python

Наш гороскоп точен и прост! Сбросим иго астрологов!

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

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

Успокаивающие звуки на любой странице
Успокаивающие звуки на любой странице

Тревожное время требует кода на JavaScript.

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

Всё для семьи

Делаем эффектную фотогалерею на сайте
Делаем эффектную фотогалерею на сайте

Красивый трёхмерный виджет с несложным кодом

Uncaught SyntaxError: Unexpected end of input — что это значит?
Uncaught SyntaxError: Unexpected end of input — что это значит?

Скорее всего, вы забыли закрыть скобки при объявлении функции.

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

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

easy