Используем и настраиваем аудио-плеер в WordPress

До расцвета HTML5 не существовало стандартов для проигрывания аудио-файлов на веб-страницах. Большинство решений основывались на flash-проигрывателях, которые работали только в том случае, если вы установили плагин Flash-плеера на своем компьютере. Данная проблема привела к разработке новое стандарта для медиа данных, которые бы работали в любом браузере.

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

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

Поддержка со стороны браузеров

На момент написания статьи существуют браузеры, которые поддерживают новый HTML-элемент audio. Вот их список:

  • Internet Explorer 9+
  • Firefox
  • Opera
  • Chrome
  • Safari

Базовая разметка HTML

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

Вот как выглядит разметка:

<audio controls>
    <source src="audiofile.ogg" type="audio/ogg">
    <source src="audiofile.mp3" type="audio/mpeg">
    Your browser does not support the audio element
</audio>

Эта статья не ставит своей целью разъяснить HTML, который вы видите выше, однако я кратко опишу его, чтобы вы получили некоторые базовые навыки.

Элемент audio, определяющий звуковой контент, задан с опцией controls. Она позволяет вывести элементы управления для медиа-плеера по умолчанию. Ваши пользователи получат элементы управления, которые позволяют поставить проигрывание на паузу или заново включить его, а также скорректировать другие параметры, такие как громкость.

Элемент является ссылкой на актуальный медиа-файл, который вы хотите вывести на экран. Вы можете отметить, что в коде задано два элемента. Они требуются для поддержки всех современных браузеров. Мы поставили ссылку на два типа аудио – ogg и mp3. Еще один тип аудио, с которым вы можете связаться — wav.

Поддержка WordPress

Возможность воспроизведения аудио в WordPress позволяет вам встраивать аудио-файлы и проигрывать их. Эта возможность появилась в WordPress 3.6.

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

Стандартный шорткод имеет следующий вид:

[ audio ]

Чтобы поставить ссылку на файл, который вы хотите взять в качестве источника для воспроизведения, просто пропишите следующий параметр в шорткоде:

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

This is my latest song

http://mywebsite/media/songs/sweetsong(.audioextension)

Some more content

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

[ audio mp3=»audio.mp3″ ogg=»audio.mp3″ wav=»audio.wav» ]

Обратите внимание, что атрибут src был отброшен, и вместо него стали использоваться новые атрибуты. В данном случае это mp3, ogg, wav.

Опции для воспроизведения

Шорткод audio допускает некоторые опции, связанные с воспроизведением аудио.

src [ audio src=» » ]

src – необязательное поле, однако оно оказывается очень удобным, если вы хотите реализовать поддержку многочисленных браузеров. Следующие значения могут быть заданы, чтобы реализовать корректные откаты в том случае, если определенный браузер не может обработать определенный тип аудио.

  • mp3
  • mp4
  • ogg
  • wav
  • wma

loop

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

[ audio loop=»on» ]

Или

[ audio loop=»off» ]

autoplay

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

[ audio autoplay=»on» ]

Или

[ audio autoplay=»off» ]

preload

Иногда полезной оказывается предзагрузка аудио. Если вы решили ее использовать, то вам доступны следующие опции:

  • [ audio preload=»none» ] – значение по умолчанию. Аудио не будет загружаться при загрузке страницы.
  • [ audio preload=»auto» ] – аудио будет загружаться вместе со страницей.
  • [ audio preload=»metadata» ] – при загрузке страницы загрузятся только метаданные.

Добавление аудио в запись

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

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

insert-rich-media

Как только вы добавите аудио, вы можете создать и настроить свою запись в блоге. Внутрь записи мы поместим аудио, которое будет выведено в следующем виде:

add-post-1024x1010

Затем уже, после публикации, запись будет иметь следующий вид (со стандартными настройками):

post-live-1024x781

Заключение

Элемент audio – прекрасный способ разнообразить свои записи блога. Сейчас блоги все чаще добавляют подкасты. Подкасты могут быть легко загружены на ваш сайт и легко добавлены в записи. Новый элемент audio в HTML5, объединенный с WordPress, значительно упрощает добавление и воспроизведение аудио файлов, предлагая вашим пользователям быстрый доступ к динамическому и привлекательному контенту.

Источник: www.elegantthemes.com/blog

Блог про WordPress
Комментарии: 22
  1. Андрей

    Добрый вечер!
    Подскажите пож-та реализована ли в этом плеере не только прослушивание трека, но и его скачивание? Как это реализовать, чтобы юзер мог выбрать или скачать или слушать он-лайн? Может есть другие плагины, главное чтобы они не грузили сервер! Спасибо заранее!

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

      Самый продвинутый плеер, работающий на всех устройствах:

      https://wordpress.org/plugins/html5-jquery-audio-player/

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

  2. Александр

    Подскажите пожалуйста, если WP 4.1.1, к примеру, поддерживает [audio] и вставку аудиофайлов в записи, то сторонние плагины с плеерами не нужны?

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

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

  3. Александр

    Удалил плагин с плеером, не отображается теперь плеер вообще :(
    Хотя сам код [audio] на месте, в тексте

  4. Александр

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

  5. Александр

    Разобрался. Почему-то в wp-include/media.php в строке стояло ‘style’ => ‘width: 100%; visibility: hidden;’ Изменил на visible — все отображается!

  6. Андрей

    Доброго времени суток ув. Дмитрий. Подскажите пож-та как можно реализовать скачивание MP3 файлов в плейлисте. Например orthodoxvera.ru здесь 17 файлов, каждый можно скачать по отдельности или же прослушать это очень хорошо, но как например скачать их все вместе нажав на одну кнопку, типо скачать всю аудиокнигу. Заранее спасибо за внимание к моему вопросу.

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

      Такой опции в ядре WP нет, придется писать отдельное решение для этого или ставить плагины для организации воспроизведения плейлистов. Вот варианты: https://wordpress.org/plugins/html5-jquery-audio-player/
      Также вариант: https://wordpress.org/plugins/easy-media-download/

      Этот плагин позволяет управлять закачками.

  7. Андрей

    Дмитрий большое вам спасибо за ответ. С ув.Андрей

  8. священник Андрей

    Добрый вечер Дмитрий! У меня ни с того ни с сего образовалась проблема плейлисты созданные инструментами консоли перестали отображаться в новости. Т.е. в редакторе они есть, а при переходе на саму новость белый квадрат и все вместо плейлиста MP3. Никаких не делал изменений и все работало до недавнего времени. Вот как выглядит сейчас http://pixs.ru/showimage/DlyaFozziJ_6502349_22362969.jpg . Для сами можете просмотреть http://orthodoxvera.ru/deti/5734-vilgelm-gauf-xolodnoe-serdce-valentin-klementev-aleksej-zhirov-mixail-sheluxin-sergej-xarlov-evgenij-kindinov-2003-g-128-kbps-mp3.html . Я облазит сеть нигде подобного не нашел, чтобы в редакторе отображалось, а в новости нет…просто ума не приложу, может Вы чего подскажете куда копать? с ув. Андрей

    1. священник Андрей

      Заранее БОЛЬШОЕ СПАСИБО

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

        Здравствуйте, возможно, что проблема связана либо с каким-нибудь обновлением, которое ставится автоматом (правда, в эти дни не выходило обновлений для wp).

        Другие возможные причины:

        Плагин кэширования (если стоит). Попробуйте сбросить кэш.

        Возможно, что какие-либо коллизии с плагинами. Бывает, что какой-то один из плагинов мешает нормально работать функционалу. Ставили ли вы какие-либо плагины в недавнем времени?

        Иногда такое бывает с плагином jetpack. У вас он установлен?

        Попробуйте также другие плееры для аудио (есть много бесплатных плагинов).

  9. Konstantin

    Тема еще жива?

    Кто-нибудь знает как можно выводить названия треков, которые лежат в одном mp3 файле (например радио-шоу), во время его проигрывания.

    Допустим я могу сделать CUE Sheet.

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

      Насколько я понимаю, вам потребуется плагин https://wordpress.org/plugins/cue/

  10. Константин

    Да, я натыкался на него. Говорящее название, но кажется всего лишь обычный аудио-плеер. Так и не понял как можно cue файлы в нем использовать…

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

      Я думаю, вам стоит спросить у разработчиков: https://wordpress.org/support/plugin/cue

      Я не нашел такой опции.

  11. Эдвард

    Здравствуйте, Дмитрий! И снова я пишу Вам. Работал над сайтом на локальном сервере, устанавливал плагины нужные и сейчас обнаружил, что у меня не работает встроенные в WordPress проигрыватель медиафайлов. Пробовал отключать все плагины — всё равно не работает. Нажимаю на кнопку Play и идёт как будто бесконечная загрузка. Можете подсказать в чём может быть дело? Или поменять его на другой? Я делаю сайт по музыкальной тематике и мне как воздух нужен проигрыватель, но среди плагинов я не нашёл достойного. Лучше поискать ещё? Благодарю за прочтение.

  12. Эдвард

    Обстановка ещё хуже, чем я думал. Ни один из проигрывателей не воспроизводит аудио какой бы плагин я не устанавливал. Видимо, какая-то настройка в WordPress сбилась.

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

      Очень странно. Если даже ни один плагин не воспроизводит, похоже, что надо переустановить WordPress.

  13. Эдвард

    Нашёл в чём проблема и её решение оказалось проще, чем я думал! Недавно я закончил обустраивать защиту сайта и вспомнил, что я для защиты папки с медиафайлами и запрета запуска нежелательных сценариев, загруженных в неё, создал в корне файл .htaccess с кодом:

    Allow from all

    Deny from all
    Взял на каком-то сайте и без изменений скопировал. А ведь нужно было добавить mp3 в строчку с расширениями. Сделал это и всё заработало.

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

      Да, бывают такие неожиданные мелочи. Спасибо за уточнения!

Добавить комментарий

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