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

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

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

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

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

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

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

[mp3j track="audio.mp3"]

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

[mp3j track="udulessig.mp3" autoplay="y"]

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

[mp3j track="Название трека@track.mp3" caption="Дополнительный текст к названию"]

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

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

[mp3-jplayer tracks="track01.mp3, track02.mp3, http"//site.com/audio.mp3"]

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

[mp3-jplayer tracks="FEED:/mp3/project"]

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

[mp3-jplayer tracks="Название01@track01.mp3, Название02@track02.mp3" autoplay="y" vol="65" loop="y"]

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

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

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

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

[dl1 dlurl=”http://sjward.org/jplayer-for-wordpress” name=”MP3-jPlayer”]

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

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

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

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

Ваш электронный адрес не будет опубликован.


*