Главная » Ведение блога » Как вставить аудио на сайт? Делаем это правильно!

Как вставить аудио на сайт? Делаем это правильно!

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

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

Вставить аудио на сайт можно двумя способами, как и в случае с видео. Первый способ — это загрузить запись на собственный хостинг и уже с помощью дополнительных плагинов типа «Audio Player» разместить в статью. И второй способ – это загрузить на сторонний сервис, а на свой блог уже вставить только сам код через HTML редактор.

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

Итак, мы решили, что будем вставлять видео на сайт через сторонний сервис. Этих сервисов в интернете есть много, но я выбрал 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". Можете подстраивать под свой дизайн блога.

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

vachevskiy 13 марта 2014
  1. Ну а где демонстрация? :smile:

  2. vachevskiy

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

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

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

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