n-wp.ru — блог о WordPress
MP3-jPlayer - HTML5-плагин для воспроизведения MP3 во всех браузерах | n-wp.ru

MP3-jPlayer — HTML5-плагин для воспроизведения MP3 во всех браузерах

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

Борьба с совместимостью аудио форматов и разных браузеров привела меня к мысли, что нужно найти универсальный плеер, способный воспроизводить MP3 без дополнительных ухищрений во всех браузерах, и желательно это делать с помощью разметки HTML5. Поиски вывели меня сначала на jQuery-скрипт jPlayer, а потом и на плагин для WordPress, его использующий — MP3-jPlayer.

MP3-jPlayer - HTML5-плагин для воспроизведения MP3 во всех браузерах (5)

Сам скрипт, лежащий в основе плагина, использует разметку HTML5, и позволяет проигрывать аудио и видео файлы, совместимые с браузерами. Подробнее о совместимости разных браузеров и HTML5 медиа я писал в посте Аудио/Видео HTML5 плеер: MediaElement.js – HTML5 Video & Audio Player. Вы можете использовать MP3, но приготовьтесь к тому, что этот популярный формат файлов будет воспроизводиться только в Internet Explorer и Google Chrome, а вот Firefox его играть откажется. Для того, чтобы продемонстрировать аудио в Firefox, придется сделать копию файла в формате OGG. Ну а для воспроизведения аудио в Safari нужно будет сделать и копию в формате M4A. Итого получится три файла примерно одинакового размера, и вместо того, чтобы закачать в блог один файл, вам нужно будет потратить в три раза больше места. Меня такой подход не устроил, и поэтому я обратился к плагину MP3-jPlayer — он хоть и сделан на основе скрипта jPlayer, но использует его только для воспроизведения MP3. То есть в Google Chrome и Internet Explorer MP3 будет воспроизводиться нативно, без использования посредников, используя лишь разметку HTML5. А вот для Firefox плагин подключить специальный флешевый модуль, который и обеспечит воспроизведение MP3 в этом браузере, а так же и во всех других, которые не поддерживают HTML5 аудио в этом формате. Таким образом вы будете избавлены от закачивания трех вариантов одного и того же файла в разных форматах — достаточно одного MP3.

MP3-jPlayer имеет три темы оформления, но для знакомых с CSS и PHP не составит труда сделать свой скин. Тем же, кто не хочет заморачиваться с оформлением, советую использовать текстовый скин — он действительно хорош.

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

Если вы хотите, чтобы трек проигрывался автоматически сразу после загрузки страницы, то используйте параметр autoplay:

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

MP3-jPlayer - HTML5-плагин для воспроизведения MP3 во всех браузерах (1)

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

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

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

Ну и напоследок — удобный бонус: плеер можно открыть в отдельном всплывающем окне. Это поможет избежать закрытия страницы и прерывания воспроизведения — вы откроете плеер и сможете случать треки в фоновом режиме.

MP3-jPlayer - HTML5-плагин для воспроизведения MP3 во всех браузерах (6)

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

MP3-jPlayer - HTML5-плагин для воспроизведения MP3 во всех браузерах (4) MP3-jPlayer - HTML5-плагин для воспроизведения MP3 во всех браузерах (3) MP3-jPlayer - HTML5-плагин для воспроизведения MP3 во всех браузерах (2)

Скачать
MP3-jPlayer
вы перейдете по ссылке http://sjward.org/jplayer-for-wordpress

Еще записи по этой теме по этой теме:

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

Комментировать

/* ]]> */