Как вставить на сайт аудио файл (музыку) с помощью HTML5
Здравствуйте, дорогие читатели блога. Не удивительно, что в последнее время медийные сайты становятся всё более популярными. На таких сайтах очень интересно находится, например можно посмотреть какое нибудь видео или же послушать отличную музыку. Но в этот раз мы будем с Вами слушать музыку, а именно научимся вставлять аудио файлы на наш сайт с помощью HTML5.
Как оказывается, что HTML5 поддерживает аудио теги, и таким образом музыку вставить на сайт очень просто. Правда, что не все старые браузеры воспроизводят аудио файл, но все современные браузеры это делают на ура.
Демо
Поддержка браузеров
Все браузеры, которые поддерживают тег — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.
Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.
Chrome после 6 версии поддерживает практически все форматы.
Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.
С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.
Safari поддерживает все форматы аудио кроме ogg.
Добавление аудио файла на сайт
Чтобы добавить аудио файл на Ваш сайт нужно между тегами указать прямую ссылку на файл. Ссылка указывается с помощью тега . Вот как будет выглядеть готовый код:
Как видите, что тут добавлено сразу 3 файла, таким образом если какой то браузер не поддерживает mp3 он автоматически воспроизведёт тот формат который поддерживает и так далее.
А если браузер вообще не поддерживает тег то выскочит вот это сообщение «Ваш браузер не поддерживает аудио».
Друзья, а вот пример наших трудов. Простой проигрыватель браузер подставляет сам.
Демо
Вот и всё, дорогие друзья. Если у Вас возникнут вопросы или трудности спрашивайте в комментариях. До скорых встреч.
Как добавить аудио или музыку на сайт?
Вы можете использовать сервис SoundCloud (блок T153 из раздела «Другое»), или другой проигрыватель, который можно поставить через html (инструкция Вставка html кода).
В материале Сервисы и виджеты для сайта, вы найдёте примеры сервисов, которые можно использовать:
Пример использования Soundcloud читайте в Справочном центре: Добавление музыки через SoundCloud.
Похожие вопросы
- Как добавить ссылку на конкретное место на странице (якорь)?
- Как добавить кнопку?
- Как добавить свой HTML, CSS или Javascript-код?
- Как сделать всплывающее окно?
- Как добавить видео?
Аудио-отзывы в Тильде
Код работает нестабильно. Аудио-дорожки могут не работать на ПК, в хроме на андройде и в сафари. Пока не нашел решение проблемы.
Задача: сделать аудио-отзывы Тильде. Сейчас нормального механизма с аудио-отзывами в тильде нет.
Пол-года газад назад я планировал переходить на Тильду, но из-за того, что нет аудио — отказался, аудио-отзывы важная штука. Так же мне многие писали, что хотели бы добавить аудио-отзывы, чтобы было 2 кнопки — воспроизведение, пауза.
Обычные html-плееры нельзя будет свободно передвигать по зеро-блоку и их всегда нужно будет делать html-кодом, что ограничивает нас в дизайне.
Решение: прячем все аудио-плееры, в дизайне оставляем 2 кнопки: плей, пауза. Связываем их через ссылку и некоторые изменения в коде.
Этот вариант подходит, если вы не хотите сильно ковыряться в коде, нужно будет подправить пару параметров.
Пошаговая инструкция
1 шаг — иконки
Находим две иконки для ваших отзывов. Должна быть иконка воспроизведения и паузы.
2 шаг — ставим ссылки
Кликаем по элементу ставим ссылку #js-audio-play-1.
То же самое делаем у иконки паузы, только ссылка #js-audio-pause-1.
1 — номер отзыва. Он важен, потому что номер связывает кнопки и аудио.
3 шаг — кладем иконки друг под друга
Показываться будет одна. Во время паузы или воспроизведения одна из иконок всегда будет скрыта. Выделяете две иконки и выравниваете с помощью инструментов тильды.
4 шаг — вставляете js и css код
Создаете блок T123 и вставляете туда код.
Для продвинутых: вы можете вставить css и js в общий код. А теги аудио разместить на конкретной странице.
Код
/* скрываем аудио-плееры браузера */ .audio-review < position: absolute; opacity: 0; top: -9999px; >/* скрываем элементы с началом класса js-audio */ .js-tn-elem-audio /* показываем элементы с началом класса js-audio и классом is-show*/ .js-tn-elem-audio.is-show 5 шаг — генерируем ссылки
Если файлы на сервере → Переходите к шагу 6
Если файлы отзывов на компьютере:
Закидываем аудио-файлы отзывов в гугл-диск. Нажимаем на файле правой кнопкой мыши, затем « Получить ссылку».
Копируете ссылку в поле ниже и после конвертации копируете нижнюю ссылку.
Cсылку на файл в гугл-драйве
Прямая ссылка на файл ссылка
6 шаг — меняем код
- Заходим в код
- Копируем блок audio
- Меняем номер
- Добавляем ссылку из предыдущего шага
- Меняем тип формата. Если файл mp3 — ставим mpeg, если ogg — ogg
7 шаг — добавляем еще отзывы
Если вы захотели добавить еще отзывов, вы должны:
- Откопировать ваши иконки,
- Заменить там номера в ссылке
- Загрузить файл в гугл диск и конверировать ссылку
- Откопировать блок аудио и проставить: номер, ссылку, тип файла
Как это работает на выходе
Если вы установили код себе — пожалуйста напишите в комментариях адрес сайта.
Чем я могу помочь
Для заказа пишите в телеграм — @daniilpostnov
Полная интеграция — 5000₽
Созвонимся, обсудим на какую страницу нужно загрузить аудио. Вам нужно будет предоставить иконки, загрузить аудио на гугл-диск. Бонусом отправлю видео-инструкцию по добавлению новых отзывов.
Видео-урок — 1500₽
Отправлю видео-урок по интеграции. Сможете самостоятельно интегрировать и добавлять новые аудио.
Консультация — 1000₽/час
Подскажу, если что-то не получается.
Как вставить аудио плеер html5 для Tilda
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
Связаться с нами
Задать вопрос
Купить шаблон
Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)
Заказать установку примера
Стоимость услуги от 3000 руб
Вы можете заказать интеграцию данного примера, его модификацию под свои задачи, комбинацию для другой модификации или разработку кастомного решения.