Буквально два дня назад я писал о том, как вставить видео на сайт. Сегодняшняя статья будет немножко похожая, только вместо видео мы будем вставлять аудио.
Я постараюсь пошагово написать, как это сделать, чтобы не нагружать свой ресурс дополнительными плагинами и тем самим не замедлять загрузку.
Вставить аудио на сайт можно тремя способами:
- Вставка с помощью тегов HTML
- Вставка с помощью плагинов (на примере WordPress)
- Вставка с помощью стороннего сервиса.
Я советую вам использовать именно последний способ, и не в коем случаи не загружать аудио на хостинг. Во-первых, аудиозапись занимает немало места, а на хостинге, как правило, место ограничено. И во-вторых, страница с вашем аудио будет долго загружаться.
Вставка с помощью тегов HTML
В отличии от предыдущих версий, пятая версия HTML позволяет вставить аудио напрямую, без всяких танцев с бубном. Понятное дело, для начала, вам нужно будет загрузить файл на хостинг (или получить ссылку с другого сайта, поскольку нет прямой необходимости, загружать файл на свой хостинг). Ну а дальше вам нужно прописать следующий код:
Давайте посмотрим, какие здесь есть параметры:
autostart — как и видно из названия, обозначает, нужно ли сразу воспроизводить трек при загрузке. Если да, пишем значение true, если нет, то false.
loop — установка бесконечного проигрывания. Также принимает значения true и false. (хорошо подходит, если нужно пустить определенный звуковой фон на сайте, тогда включаем эту опцию).
volume — громкость. Вы можете установить значение от 1 до 100.
Установка аудиплейера на сайт WordPress
Если ваш сайт работает на самой популярной CMS, то здесь у вас есть больше настроек. И вы можете использовать плагины. Ну а плагины, могут позволять проигрывать сразу плейлист.
Понятное дело, вначале нужно файлы загрузить на хостинг (или взять их URL адреса). В вордпресс вы можете загрузить аудио точно также, как и картинки, то есть, через встроенный менеджер медиа файлов.
Ну а дальше вам нужно установить плагин.
Настройка плагина.
После установки и активации этого плагина, нужно его настроить.
Ну а теперь переходим непосредственно к созданию плейера.
Теперь нам предлагается выбрать скин плейера. Но увы, выбирать скины можно только в платной версии. В бесплатной досупен только скин по умолчанию. Ну и после этого, прописываем его название его размеры и отмечаем, что нужно использовать плей листы (при необходимости).
Добавляем треки.
Плагин выдаст шорткод, который затем нужно будет вставить в нужно место.
Ну а вот как плейер будет выглядеть на сайте.
Установка с помощью сторонних сервисов.
Итак, мы решили, что будем вставлять видео на сайт через сторонний сервис. Этих сервисов в интернете есть много, но я выбрал podfm.ru, мне он понравился больше всего :smile:.
Для работы нужно сначала пройти небольшую регистрацию. У меня уже есть аккаунт, но для наглядности создам еще один, чтобы все подробно вам показать. На главной странице сайта нажимаем на кнопку «регистрация». Здесь нужно ввести логин, E-mail, дважды пароль, капчу, согласиться с условиями и нажать на кнопку «регистрация»:
После регистрации необходимо заполнить информацию о себе: загрузить аватар, указать имя, пол, дату рождения, страну, город и т. д. И я советую это сделать обязательно, чтобы в будущем не было проблем с модерацией.
Дальше можно добавить свой первый подкаст. Для этого в меню нажмите на кнопку «добавить», которая расположена возле надписи «подкасты»:
Здесь у нас есть три варианта для добавления подкаста:
- Загрузить с компьютера;
- Загрузить с интернета;
- Импортировать с RSS ленты.
Вы можете выбрать любой вариант, но я загружу свой подкаст с компьютера. Его я записал с помощью программы Castmania Studio. Для загрузки просто нажимаю на кнопку «Выбрать файл», нахожу файл на компьютере и нажимаю «Открыть». Теперь нужно немного подождать пока файл закачается. Да и еще одно, ниже кнопки «Выбрать файл» вы можете увидеть такую надпись «только формат .mp3, размер до 100Мб», обратите на это внимание:
После загрузки аудиозаписи вам нужно заполнить некоторые поля. И их необходимо заполнить обязательно, иначе добавить подкаст вам не получиться. Итак, что нужно указать:
- Номер выпуска. Здесь укажите номер своего аудио;
- Название. Введите название английскими буквами;
- Краткое описание и описание я обычно делаю одинаковыми;
- Изображение – можете загрузить изображение со своего компьютера;
- Выберите ленту, где будет храниться аудиозапись;
- Укажите рубрику.
В самом низу нам предлагают поставить два чекбокса. Если подкаст не содержит ненормативную лексику, то первый чекбокс не ставим. И второй пункт отвечает за скачивание. Я обычно галочку не ставлю, пусть скачивают люди аудио на здоровье. В конце нажмите на кнопку «Сохранить подкаст».
Ниже кнопок социальных сетей вы увидите надпись «Разместить плеер (код плеера)». Выбираем HTML или WordPress, как я понял – это не имеет никакого значения. Дальше копируем этот код:
Теперь нам остается сделать последний шаг. Открываем любую страницу, куда нам нужно вставить аудиозапись, переходим в режим HTML и вставляем в любое место наш код:
Вот и все. После обновления страницы вы увидите примерно такую картинку.
Аудиозапись можно также выровнять по центру, сделать отступы, разместить в начале или в середине поста и т. д. Кроме этого в самом коде есть тег width и height, выглядит это так: width="450" height="53". Это значит что ширина аудиозаписи 450 пикселей, а высота 53. Данные числа вы можете легко изменить, для примера указать так: width="350" height="33". Можете подстраивать под свой дизайн блога.
На этом я данную статью заканчиваю. Теперь вы знаете, как вставить аудио на сайт. Всем пока!
Ну а где демонстрация? 🙂
Анатолий, решил просто сделать скриншот :smile:.
не, ну демонстрацию палюбому надо
А на этот сайт только файлы с моим авторством можно загружать?
Не все так просто, как написано в статье, что бы добавить подкаст, нужно создать ленту. которая почему то не хочет создаваться.