Добавление аудио файлов и создание плейлистов в WordPress

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

audio-playlist-wp

Поддерживаемые форматы аудио в WordPress

WordPress использует HTML5 тег audio для встраивания аудио-файлов. Он совместим с большинством современных браузеров и работает прекрасно на мобильных устройствах. Тег audio поддерживает форматы MP3, OGG и WAV.

MP3 – широко используемый и поддерживаемый формат аудио файлов, и мы рекомендуем использовать его по возможности.

Добавление отдельного аудио файла в WordPress

addaudiofile1

Добавление отдельного аудио файла или музыкального трека к записи или странице WordPress не представляет собой ничего сложного. Просто щелкните по кнопке Add Media на экране редактирования записи.

Далее вы увидите всплывающее окно, позволяющее выбрать медиа файл. Вам нужно щелкнуть по кнопке «Загрузить файл», чтобы выбрать и загрузить ваш аудио файл. После того, как он будет загружен, вам нужно будет щелкнуть кнопку «Вставить в запись».

WordPress добавит ваш аудио файл в запись. Если вы используете визуальный редактор записей, то в таком случае вы можете видеть встроенный в запись файл. Если вы используете текстовый редактор, вы увидите аудио шорткод.

audiofileineditor

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

single-audio-track

Другой простой способ добавить аудио файл – загрузить файл в медиа библиотеку. После этого просто скопируйте URL файла и вставьте его в визуальный редактор.

WordPress автоматически встроит аудио по URL. Это напоминает встраивание видео в WordPress, когда вы просто вставляете URL-адрес видео с YouTube, и WordPress встраивает его.

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

Как и в случае с галереями изображений, вы можете легко добавить аудио плейлисты к вашим записям WordPress с помощью медиа загрузчика. Просто щелкните по кнопке Add Media, чтобы загрузить ваши аудио файлы.

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

audioplaylist1

Теперь вы можете перетаскивать песни, чтобы изменить их порядок следования в плейлисте. Вы можете также включить отображение названия трека, имени артиста, а также изображения. Эта информация встраивается в мета-теги IDT вашего MP3 файла и автоматически выводится в WordPress.

playlist-settings

Как только вы сделаете это, просто щелкните по кнопке Insert Audio Playlist. Ваш плейлист будет добавлен к вашей записи, и вы сможете просмотреть его в визуальном редакторе. Теперь вы можете сохранить вашу запись и просмотреть ваш плейлист.

preview-playlist

Редактирование мета-информации аудио файлов в WordPress

WordPress может автоматически получать мета-информацию из ваших MP3 файлов. Однако если ваш файл не имеет мета-данных, или если вы хотите изменить их, то в таком случае вы можете сделать следующее в медиа загрузчике.

Щелкните по кнопке Add Media для вызова медиа загрузчика. Вы можете загрузить новый аудио файл или отредактировать уже имеющийся. Для этого щелкните по нему в медиа библиотеке.

Как только аудио файл будет выбран, вы увидите столбец с деталями вложения с правой стороны. Именно здесь задается заголовок трека, имя артиста, название альбома, подпись, а также короткое описание трека. Эта информация будет выводиться в плейлистах, а также на страницах с отдельными вложениями.

audio-meta-info

Если аудио файл, который вы загрузили, имеет встроенное изображение (обложка альбома), то в таком случае это изображение будет автоматически извлечено WordPress. Оно будет храниться в вашей медиа библиотеке и будет использоваться в том случае, когда этот трек добавляется в плейлист.

Однако если ваш файл не имеет изображения, то в таком случае вы можете отредактировать его в WordPress и загрузить к нему изображение. Просто перейдите к Media » Library, выберите файл, который вы хотите отредактировать, после чего щелкните по ссылке Edit под ним.

editaudiofile-listview

Если вы просматриваете медиа библиотеку в grid представлении, то в таком случае щелчок по аудио приведет к появлению всплывающего окна. Вы можете щелкнуть по ссылке Edit more details в самом низу всплывающего окна для редактирования файла.

editmoredetails

Вы перейдете к странице Edit Media, где вы можете не только отредактировать всю мета-информацию вашего аудио-файла, но и загрузить к нему изображение. Это изображение будет использоваться тогда, когда ваш файл добавлен в плейлист.

editmediapage

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

По умолчанию WordPress не встраивает автоматически аудио файлы по URL. Для начала нам надо включить автоматическое встраивание в текстовых виджетах, после чего нам нужно будет включить шорткоды. Просто вставьте следующий код в functions.php вашей темы:

add_filter( 'widget_text', array( $wp_embed, 'run_shortcode' ), 8 );
add_filter( 'widget_text', array( $wp_embed, 'autoembed'), 8 );
add_filter( 'widget_text', 'do_shortcode');

Теперь загрузите файл в вашу медиа библиотеку и скопировать его URL. Добавьте текстовый виджет в сайдбар WordPress и вставьте в него URL.

WordPress автоматически превратит URL адрес в готовый к проигрыванию медиа файл.

Чтобы добавить плейлист, вам нужно использовать шорткод [ playlist ] (без пробелов) с ID медиа файлов, которые вы хотите включить в плейлист.

Для начала вам нужно загрузить аудио файлы, которые вы хотите добавить в плейлист – сделать это можно по ссылке Media » Add New.

Затем вам нужно будет отредактировать каждый аудио файл, который вы хотите добавить в плейлист. Просто щелкните по ссылке edit под файлом в медиа библиотеке или щелкните по ссылке edit more details, если вы просматриваете медиа библиотеку в grid-режиме.

На странице Edit Media вы можете получить ID медиа файла.

attachmentid

Теперь, когда у вас есть ID нужных файлов, которые вы хотите добавить в плейлист, просто воспользуйтесь шорткодом:

[ playlist ids=”14,24,36″ ]

Не забудьте заменить ID на ваши собственные ID файлов. Вы можете использовать этот шорткод в текстовом виджете. Вот как это выглядит на тестовом сайте:

playlist-widget

Источник: wptavern.com

Блог про WordPress
Комментарии: 17
  1. Александр

    Спасибо, удружили!
    Давно искал возможность вставлять аудио-файлы в статьи блога, теперь буду знать как.

  2. Сергей

    Делаю все как написано появляется плэер в просмотре тоже он есть а вот на сайте только ссылка на музыку! Что делать?

  3. Дмитрий (автор)

    Проверьте, чтобы шорткод вида [ playlist ids=”14,24,36″ ] не имел пробелов между квадратными скобками. Я так написал, чтобы он у меня сразу в плейлист не преобразился, а вообще пробелы перед квадратными скобками не нужны.

  4. Василий

    Спасиб!

  5. Горя

    А можно как нибудь поменять цвет плэйлиста?а то он не вписывается в тему сайта.

    1. Дмитрий (автор)

      Нужно смотреть стили плейлиста (правой кнопкой на странице — проинспектировать элемент).

      На Wp.com советуют следующие стили:

      .wp-playlist-light {
          background: #f4710a !important;
      }

      Тут меняете цвет фона на свой.

  6. Lera

    Спасибо за статью! А вот что делать, если не загружаются песни в библиотеку? HTTP error. Как сделать плейлист с ссылками со стороннего сайта?

    1. Дмитрий (автор)

      Там уже надо смотреть, можно ли встраивать. Встраивать можно с помощью плагинов, стандартный плейлист тут не сработает. Пример плагина для SoundCloud: https://wordpress.org/plugins/html5-soundcloud-player-with-playlist/

  7. Интман

    Спасибо интресная и подробная информация. Скажите каким образом можно поменять дизайн стандартного видео плеера вордпресс

  8. Елена

    Здравствуйте! А как сделать, чтобы еще и скачать можно было аудиофайл с сайта?

  9. Юля

    Добрый вечер. Спасибо за статью. А как сделать чтобы пользователи могли скачать понравившиеся треки? Как это сделать в плейлисте

    1. Дмитрий (автор)

      Без написания дополнительного кода это не сделать.

      Посмотрите тут: https://wordpress.stackexchange.com/questions/292585/adding-a-download-link-to-native-wordpress-playlist

  10. Александр

    Подскажите как сделать на сайте две рубрики с аудио файлами ?
    Первая -мои песни,и вторая -песни других композиторов исполненные мной.
    в Описании должно присутствовать -певец-Автор Стихов-Автор музыки-Автор аранжировки.На каждую песню.
    С Уважением,Александр Погорелкин.

    1. Дмитрий (автор)

      Можно сделать это как страницы.
      Две страницы — и дальше их просто в меню выводить. А на каждую отдельную страницу вставлять соответствующий плейлист.
      Более сложные решения уже платные, да и сейчас их не оплатить никак, т.к. зарубежные.
      Как пример: https://barn2.com/blog/wordpress-audio-library/
      Здесь вот целую аудиотеку делают. Увы, но в российском сегменте я не видел ничего подобного.

      1. Александр

        Благодарю Вас за ответ.Мне особые навороты не нужны.Буду пробовать.

  11. Анна

    Отличная статья! Я давно искала простой способ добавить аудиофайлы на сайт WordPress, и здесь все шаги объяснены очень доступно. Особенно понравилось, что можно легко создать плейлисты прямо в админке — это действительно упрощает работу с аудиоконтентом. Интересно, если добавить аудиофайлы через медиа-библиотеку, не замедлит ли это загрузку страницы?

    1. Эдвард

      Здравствуйте, Анна! Я тут мимо проходил и увидел Ваш вопрос. Насчёт списков по умолчанию и утяжеления страницы не уверен, но, скорее всего, замедлит.

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

      Но, к сожалению, в нём нет возможности создавать списки. Хотя оно и не нужно: просто разместить можно несколько проигрывателей подряд под одним заголовком. Смотрится это примерно так — https://easy-music-learning.ru/lichnoe/moi-muzykalnye-narabotki/#album1

      Кстати, проигрыватель по умолчанию у меня почему-то не работает.
      На страницу он добавляется, но вот воспроизводить звук отказывается. :)

Добавить комментарий для Дмитрий Отменить ответ

Получать новые комментарии по электронной почте.