vachevskiy.ru

Как вставить аудио на сайт? (на сайт HTML, WordPress и другие)

Буквально два дня назад я писал о том, как вставить видео на сайт. Сегодняшняя статья будет немножко похожая, только вместо видео мы будем вставлять аудио.

как вставить аудио на сайт

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

Вставить аудио на сайт можно тремя способами:

  1. Вставка с помощью тегов HTML
  2. Вставка с помощью плагинов (на примере WordPress)
  3. Вставка с помощью стороннего сервиса.

Я советую вам использовать именно последний способ, и не в коем случаи не загружать аудио на хостинг. Во-первых, аудиозапись занимает немало места, а на хостинге, как правило, место ограничено. И во-вторых, страница с вашем аудио будет долго загружаться.

Вставка с помощью тегов HTML

В отличии от предыдущих версий, пятая версия HTML позволяет вставить аудио напрямую, без всяких танцев с бубном. Понятное дело, для начала, вам нужно будет загрузить файл на хостинг (или получить ссылку с другого сайта, поскольку нет прямой необходимости, загружать файл на свой хостинг). Ну а дальше вам нужно прописать следующий код:

код для вставки видео

Давайте посмотрим, какие здесь есть параметры:

autostart — как и видно из названия, обозначает, нужно ли сразу воспроизводить трек при загрузке. Если да, пишем значение true, если нет, то false.

loop — установка бесконечного проигрывания. Также принимает значения true и false. (хорошо подходит, если нужно пустить определенный звуковой фон на сайте, тогда включаем эту опцию).

volume — громкость. Вы можете установить значение от 1 до 100. 

Установка аудиплейера на сайт WordPress

Если ваш сайт работает на самой популярной CMS, то здесь у вас есть больше настроек. И вы можете использовать плагины. Ну а плагины, могут позволять проигрывать сразу плейлист.

Понятное дело, вначале нужно файлы загрузить на хостинг (или взять их URL адреса). В вордпресс вы можете загрузить аудио точно также, как и картинки, то есть, через встроенный менеджер медиа файлов.

Ну а дальше вам нужно установить плагин.

Установка аудиплейера на сайт вордпресс

Настройка плагина.

После установки и активации этого плагина, нужно его настроить.

Настпройка плагина вордпресс

Ну а теперь переходим непосредственно к созданию плейера.

Создание нового плейера в вордпресс

Теперь нам предлагается выбрать скин плейера. Но увы, выбирать скины можно только в платной версии. В бесплатной досупен только скин по умолчанию. Ну и после этого, прописываем его название его размеры и отмечаем, что нужно использовать плей листы (при необходимости).

Установка размера в аудио плейре

Добавляем треки.

Добавление треков в плейлист аудио плейера

Плагин выдаст шорткод, который затем нужно будет вставить в нужно место.

Вставка шорткода плейера

Ну а вот как плейер будет выглядеть на сайте.

аудио плейер на сайте

Установка с помощью сторонних сервисов.

Итак, мы решили, что будем вставлять видео на сайт через сторонний сервис. Этих сервисов в интернете есть много, но я выбрал podfm.ru, мне он понравился больше всего :smile:.

Для работы нужно сначала пройти небольшую регистрацию. У меня уже есть аккаунт, но для наглядности создам еще один, чтобы все подробно вам показать. На главной странице сайта нажимаем на кнопку «регистрация». Здесь нужно ввести логин, E-mail, дважды пароль, капчу, согласиться с условиями и нажать на кнопку «регистрация»:

регистрация на podfm.ru

После регистрации необходимо заполнить информацию о себе: загрузить аватар, указать имя, пол, дату рождения, страну, город и т. д. И я советую это сделать обязательно, чтобы в будущем не было проблем с модерацией.

Дальше можно добавить свой первый подкаст. Для этого в меню нажмите на кнопку «добавить», которая расположена возле надписи «подкасты»:

разместить аудио

Здесь у нас есть три варианта для добавления подкаста:

  1. Загрузить с компьютера;
  2. Загрузить с интернета;
  3. Импортировать с RSS ленты.

Вы можете выбрать любой вариант, но я загружу свой подкаст с компьютера. Его я записал с помощью программы Castmania Studio. Для загрузки просто нажимаю на кнопку «Выбрать файл», нахожу файл на компьютере и нажимаю «Открыть». Теперь нужно немного подождать пока файл закачается. Да и еще одно, ниже кнопки «Выбрать файл» вы можете увидеть такую надпись «только формат .mp3, размер до 100Мб», обратите на это внимание:

опубликовать подкаст

После загрузки аудиозаписи вам нужно заполнить некоторые поля. И их необходимо заполнить обязательно, иначе добавить подкаст вам не получиться. Итак, что нужно указать:

  • Номер выпуска. Здесь укажите номер своего аудио;
  • Название. Введите название английскими буквами;
  • Краткое описание и описание я обычно делаю одинаковыми;
  • Изображение – можете загрузить изображение со своего компьютера;
  • Выберите ленту, где будет храниться аудиозапись;
  • Укажите рубрику.

В самом низу нам предлагают поставить два чекбокса. Если подкаст не содержит ненормативную лексику, то первый чекбокс не ставим. И второй пункт отвечает за скачивание. Я обычно галочку не ставлю, пусть скачивают люди аудио на здоровье. В конце нажмите на кнопку «Сохранить подкаст».

сохранить подкаст

Ниже кнопок социальных сетей вы увидите надпись «Разместить плеер (код плеера)». Выбираем HTML или WordPress, как я понял – это не имеет никакого значения. Дальше копируем этот код:

HTML код аудиозаписи

Теперь нам остается сделать последний шаг. Открываем любую страницу, куда нам нужно вставить аудиозапись, переходим в режим HTML и вставляем в любое место наш код:

как вставить аудио на сайт

Вот и все. После обновления страницы вы увидите примерно такую картинку.

вставить аудио на сайте

 Аудиозапись можно также выровнять по центру, сделать отступы, разместить в начале или в середине поста и т. д. Кроме этого в самом коде есть тег width и height, выглядит это так: width="450" height="53". Это значит что ширина аудиозаписи 450 пикселей, а высота 53. Данные числа вы можете легко изменить, для примера указать так: width="350" height="33". Можете подстраивать под свой дизайн блога.

На этом я данную статью заканчиваю. Теперь вы знаете, как вставить аудио на сайт. Всем пока!

1 звезда2 звезды3 звезды4 звезды5 звезд (1 оценок, среднее: 5.00 из 5)


  1. Анатолий пишет:

    Ну а где демонстрация? 🙂

  2. vachevskiy пишет:

    Анатолий, решил просто сделать скриншот :smile:.

  3. Денис пишет:

    не, ну демонстрацию палюбому надо

  4. Елена пишет:

    А на этот сайт только файлы с моим авторством можно загружать?

  5. Андрей пишет:

    Не все так просто, как написано в статье, что бы добавить подкаст, нужно создать ленту. которая почему то не хочет создаваться.

Leave a Reply to Анатолий