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

Дата публикации:Июль 20, 2014

До расцвета 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

Поделиться

13 комментариев

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

    • Дмитрий Алёшин says:

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

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

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

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

    • Дмитрий Алёшин says:

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

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

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

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

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

  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 . Я облазит сеть нигде подобного не нашел, чтобы в редакторе отображалось, а в новости нет…просто ума не приложу, может Вы чего подскажете куда копать? с ув. Андрей

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

      • Дмитрий says:

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

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

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

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

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

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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