Компактный и в то же время функциональный аудиопроигрыватель со множеством настроек и большими возможностями. В силах проигрывателя проигрывать плейлисты, защита mp3 от скачивания, отображение контента в RSS–ленте, изменение ширины и цветовой схемы аудиоплеера, возможность оставлять аудиокомментарии на сайте и др.

Установка:

  1. Скачать плагин Audio Player с сайта по адресу - http://wpaudioplayer.com/download или с моего сервера по прямой ссылке.
  2. Установить и активировать плагин.

Использование:

Интеграция аудиопроигрывателя по умолчанию производится вставкой в запись в квадратных скобках тега audio с URL – адресом mp3 файла.

[audio:https://wordpress-book.ru/wp-content/audio/exKrediti.mp3]

Вставить аудио в запись можно вручную, а можно и инструментом визуального или HTML редактора WordPress. Для этого в редакторе нажмите на кнопку Добавить медиафайл. После выбора его на компьютере и загрузке на сервер, в открывшемся окне добавления аудио в запись, как видим, появилась новая кнопка  - Audio Player.Вставка аудио на сайт

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

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

Настройка:

В панели администратора перейдите Параметры → Audio Player.

General (Общие)

1. Replace [audiо] syntax (Заменить [audiо] синтаксис)

Эта опция включена по умолчанию и означает то, что проигрыватель встраивается для mp3 – файлов, заключенных в тег audio в квадратных скобках и позволяет выводить на странице материала болееВкладка General одного плеера.

2. Replace all links to mp3 files (Заменять все ссылки mp3-файлов)

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

3. Enable in comments  (Включить в комментарии)

Активация этой опции позволит посетителям оставлять аудиокомментарии или просто музыку. Для этого достаточно будет оставить ссылку на аудиофайл, аудиоплеер откроется в новом окне. Если активирована опция Replace all links to mp3 files , то плеер интегрируется в тело комментария.Вставить аудио в комментарий

4. Enclosure integration (Интеграция вложений)

Дает возможность вставить плеер через произвольные поля. Опция автоматически перемещает плеер в конец поста.

5.  Move enclosures to the beginning of posts (Переместить вложение в начало сообщения)

Перемещение плеера в начало поста (при активации опции Enclosure integration).

6. Default audio folder location (Папка аудио по умолчанию)

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

[audio:https://wordpress-book.ru/wp-content/audio/exKrediti.mp3]

нужно будет прописать

[audio:exKrediti.mp3]

В корне сайта создайте эту папку (по умолчанию audio) и нажмите на кнопку Verify. Если все сделано правильно, плагин подтвердит это зеленой иконкой.

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

Display (Отображение)

1. Player width (Ширина плеера)

Здесь можно задать нужную вам ширину плеера в пикселях или в процентах в активном состоянии.Вкладка Display

2. Colour scheme (Цветовая схема)

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

В поле Page background color: (Цвет фона страницы) можно установить цвет плеера, соответствующий фону страницы. Галочка Transparent (Прозрачный) сделает плеер прозрачным (не советую, так как не каждый браузер поддерживает эту опцию).

Options (Параметры)

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

4.  Показать оставшееся время - Отображение времени пойдет с обратным отсчетом.

5.  Отключить информацию о треке - Эта опция отключает отображение информации о названии трека, имени исполнителя.

6.  Переключиться к RTL режиму - все кнопки в плеере переставляет задом наперед или, если вы привыкли писать слева направо на арабском или иврите.

Feed options (Параметры канала)

На этой вкладке вы выберите то, что будут читать ваши RSS-подписчики касаемо аудиозаписей.Вкладка Feed options

В выпадающем списке Alternate content for feeds выберите одно из трех:

  • Ссылка на скачивание;
  • Ничего;
  • Пользовательский  – вместо аудиотекст, например: Аудио: доступно в статье на сайте.

Podcasting (Подкастинг)

Эта функция позволяет добавлять джинглы для треков. В этом блоке настроек вы можете добавить аудиозаписи, которые будут проигрываться в начале и/или в конце каждого трека. Это может быть аудиоВкладка Podcastingреклама или какая-нибудь инструкция для посетителей.

В поле Pre-appended audio clip URL: впишите адрес аудиозаписи, которая будет проигрываться перед воспроизведением каждой аудиозаписи на сайте.

В поле Post-appended audio clip URL: впишите адрес аудиозаписи для проигрывания после основного аудиофайла.

Advanced (Дополнительно)

1. Alternate content for excerpts (Альтернативный контент для выдержки) - альтернативный текст для цитат. Вывод специального сообщения, например : Аудио: доступно в полной версии статьи. Это, если вы установили какие-либо ограничения дляAudio Player - вставка аудио на сайт аудио.

2. Initial volume (Изначальная громкость)- Изменив значение Initial volume от 0 до 100, вы измените начальную громкость аудиоплеера.

3. Buffer time (Время буфера) - Если у вашей целевой аудитории низкая скорость подключения к интернету, здесь можно увеличить время буферизации плеера. По умолчанию оно – 5 сек.

4. Check for policy file (Проверить файл политики)  проверка наличия файла политики приватности. Перед активацией этой опции поместите в корневой каталог сайта, на котором размещены mp3 файлы, файл crossdomain.xml со следующим содержимым:

1
<!--?xml version="1.0" encoding="ISO-8859-1"?-->

www.yourdomain.com – домен, на котором размещен плеер.

5. Encode mp3 URLs (Шифрование) - Включите эту опцию, если хотите чтобы плагин шифровал URL ваших MP3. В HTML коде страницы путь к файлу будет зашифрован.

6. Remove all enclosures from feeds (Удалить все вложения из каналов RSS) - Эта опция удалит все ссылки на mp3 для проигрывания из ваших RSS-каналов.

В дополнение к настройкам:

Для отображения информации о треке, в синтаксис пропишите эту информацию:

[audio:https://wordpress-book.ru/wp-content/audio/exKrediti.mp3|titles=название песни|artists=имя исполнителя]

Параметром width можно изменить ширину для каждого проигрывателя:

[audio:https://wordpress-book.ru/wp-content/audio/exKrediti.mp3|width=100%]

Параметр autostart=yes дает команду на автоматическое воспроизведение аудиофайла при открытии страницы.

[audio:https://wordpress-book.ru/wp-content/audio/exKrediti.mp3|autostart=yes]

Загрузить несколько треков (плейлист) в плеер можно простым перечислением треков через запятую.

[audio:https://wordpress-book.ru/wp-content/audio/Pesnyri.mp3,https://wordpress-book.ru/wp-content/audio/exKrediti.mp3]

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

После добавления кода loop=yes, файлы будут воспроизводиться по кругу без остановки.

[audio:https://wordpress-book.ru/wp-content/audio/exKrediti.mp3|loop=yes]

Для расположения проигрывателя по центру страницы, перейдите Внешний вид → Редактор, откройте файл style.css и добавьте в него код:

p.audioplayer_container {
  text-align: center;
}

Для встраивания плеера, например в боковую панель, шапку или футер используйте этот код:

&lt;!--?php if (function_exists("insert_audio_player")) {
 insert_audio_player("
<span id="audioplayer_7" style="display: block; padding: 5px; border: 1px solid #dddddd; background: #f8f8f8;">Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version <a title="Download Adobe Flash Player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&amp;promoid=BIOW">here</a>. You also need to have JavaScript enabled in your browser.</span><script type="text/javascript">// <![CDATA[ AudioPlayer.embed("audioplayer_7", {soundFile:"aHR0cDovL3dwYXVkaW9wbGF5ZXIuY29tL2F1ZGlvLzpodHRwOi8vd3d3LmRvbWFpbi5jb20vcGF0aC90by9zb25nLm1wMw"}); // ]]></script>"); } &gt;

При этом в функции разрешено использовать все параметры расширения функциональности плеера (автостарт, изменение ширины, …).

Дорогой коллега, если статья для тебя была полезна, подпишись на обновления блога.

С уважением, Роман Ваховский.

Хороший человек всегда нажмет на кнопку!
Комментарий > Благодарность > Ссылка на секретную страницу блога

43 комментария: Audio Player - вставка аудио на сайт

Страница 1 из 11
  • Александр говорит:

    Пытаюсь загрузить Аудио плеер, никак не получается. При проигрывании мелодии пишет file not found, а при дефолтная папка audio не определяется. Честно говоря, наверное, уже все перепробовал. Подскажите, есть ли какие-то идеи.

    • admin говорит:

      Александр, названия загружаемых mp3 на сервер должны быть латинскими буквами. Как например exKrediti.мр3 вместо Потап_И_Настя_Каменских_-_Эх,_Кредиты.mp3. У меня поначалу тоже так было, пока не понял эту особенность плагина.

  • Виктория говорит:

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

    • admin говорит:

      На вкладке "Внешний вид" задайте ширину плеера 80 пикселей или меньше и тогда он не будет раскрываться.
      Но я бы оставил все как есть сейчас. Был у Вас на сайте, все очень красиво и приятно глазу (ушам тоже).

  • Виктория говорит:

    Спасибо за ответ!!) Наверное, не так выразилась. Как сделать, чтобы при воспроизведении mp3 (на другом ресурсе) не выскакивало окно скачки файла (оно выскакивает автоматически при воспроизведении трека)? Использую шаблон word press и плагин audio player...
    ЗЫ. За отзыв о сайте отдельное спасибо!!!

    • Алексей говорит:

      Запилю себе на блоге и аудиозаписи! Правда пока я его до ума доведу...а ведь еще делать не начал)) Спасибо за информацию

  • Алексей говорит:

    Спасибо огромное! Не мог найти как запустить автоматом, очень благодарен)) Заходи в гости, будем дружить! =): http://wtffreedom.com . Пиши, если потребуется помощь - чем смогу, помогу=)

  • Сергей говорит:

    Для встаивания плеера например в боковую панель, шапку или футер используйте этот код:
    кода нет

  • Сергей говорит:

    А как сделать чтобы плеер при переходе на другую страницу продолжал играть?

    • admin говорит:

      По отзывам шифрует надежно, при расшифровке без бутылки не разобраться :-).

  • Александр говорит:

    Автору статьи огромное спасибо. Побывал на многих сайтах, везде находил только настройки плагина и ни слова о дополнительных параметрах. Искал как сделать воспроизведение по кругу без остановки. Очень хорошо всё показали на примерах.
    Добавлю статью себе в закладки и порекомендую друзьям в Гугл+.

  • Юлия говорит:

    Установила все по инструкции, все работает, но есть проблема - музыка начинает воспроизводиться и при нахождении на главной странице, где выложены все посты подряд, а не только при переходе на страницу с треком. Что делать?

    • Андрей говорит:

      Юля, уберите код плеера "под кат" (после тега "more" - Читать далее). Тогда на главной странице он не появится.

  • Алексей говорит:

    Очень понравилось шифрование пути. Значит робот с функцией поиска пути файла и многократного скачивания множества файлов - не сможет завесить сайт. При добавлении плейлиста появляются кнопочки для листания файлов. Но это не очень видно для тех посетителей сайта, кто впервые видит такой плеер. Хотелось бы чтобы плейлист отображался. Можно ли приспособить к этому плагину другой файл swf?

    • Роман Ваховский говорит:

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

  • Алексей говорит:

    Может быть я неправильно выразился... Не проигрывать файлы swf. Сам плагин в себе содержит swf-файл-проигрыватель. Очень похожий проигрыватель попадался мне, когда я искал плееры, но только для вставки в HTML-код. А данный идет как плагин для wordpress. Вот я и подумал. К этому плагину возможно ли прилепить другой исполняющий swf файл?

  • Наталья говорит:

    привет. моя строка добавленного медиафайла в записи выглядит так.
    УРААААААААААААААААА!!!!
    подскажи, куда вставить автопуск, чтобы сама запускалась. спасибо.

    • Роман Ваховский говорит:

      Наташа, ссылку с твоего коммента удалил, была битая.
      Чтобы аудио трек сам запускался при открытии страницы, добавь параметр "autostart=yes" перед закрывающейся квадратной скобкой ]. Подробнее читай под "Дополнительно" в конце записи.

  • Ирина говорит:

    Доброе время суток,подскажите пожалуйста что могло случиться с плеером? перестал открываться и воспроизводить треки я ничего в настройках не трогала всё перестало работать само собой.

    • Роман Ваховский говорит:

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

  • Ирина говорит:

    Огромное спасибо за подсказку я сперва обновила кэш браузера попробовала и всё заработало. Другие плагины я даже не трогала.

  • Антон говорит:

    Реализовываю такой плагин под Joomla. Не совсем понятна опция шифрования и файла политики. Кто может пояснить? И как выглядит ссылка для скачивания?

  • Ульяна говорит:

    Подскажите, пожалуйста, выкладываю аудио размером 14,2 Мб и плеер при буферизации зависает и не играет, при меньшем размере аудио все нормально работает. Как это исправить?

    • Роман Ваховский говорит:

      На вкладке "Advanced" попробуйте увеличить время буферизации в двое или больше.

      • Ульяна говорит:

        Спасибо, пробовала все равно зависает на буферизции. Может где-то в коде плагина или css файлах есть ограничение по загрузке?

  • Татьяна говорит:

    Роман, доброго времени суток!
    у меня складывается ощущение, что я тормоз 🙂 объясню почему:
    я установила плагин аудио плеер для того, что бы размещать на своем сайте свои собственные треки, но на моем сайте вордпресс не позволяет размещать файлы размером больше 2 МБ... я уже пыталась выяснить почему, так и не дождалась ответа.
    может быть вы мне объясните, как сделать так, что бы мои файлы любого размера могли загружаться в библиотеку моего сайта?
    P.S.
    с видео-файлами и фото та же фигня
    Спасибо!

    • Роман Ваховский говорит:

      Вы Татьяна не тормоз! 🙂 Самокритика конечно хорошо, но не стоит себя слишком недооценивать :-). Я и сам себя иногда дураком называю и еще чем похлеще, повторять не буду хоть и цензура здесь отсутствует :-).
      Но я увлекся, попробую ответить по существу. Раньше уже задавался этот вопрос. В том случае вообще файлы у многих не загружались из админки. Почему так было, не знаю. Может в той версии WordPress разработчики чего то накосячили. У Вас, кстати, свежая версия WP? Я тогда советовал загружать файлы по ftp.
      Могу посоветовать опять же загрузку по ftp. Как это делать я писал в конце поста "Иконка для сайта", если вдруг не умеете.

      А увеличить размер загружаемого файла в WordPress можно одним этих способов:

      1. В functions.php Вашей темы (до файла, для его редактирования, можно добрать из админки: Внешний вид - Редактор - functions.php) добавляем:

      @ini_set( 'upload_max_size' , '64M' );
      @ini_set( 'post_max_size', '64M');
      @ini_set( 'max_execution_time', '300' );

      2. php.ini Создайте в корневой папке блога этот файл из обычного блокнота с содержимым:
      upload_max_filesize = 64M
      post_max_size = 64M
      max_execution_time = 300

      3. htaccess Добавьте в файл (находится в корне блога) следующее содержимое:

      php_value upload_max_filesize 64M
      php_value post_max_size 64M
      php_value max_execution_time 300
      php_value max_input_time 300

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

  • Наталья говорит:

    Добрый день! Подскажите, пожалуйста, у меня раньше загружались мои фото без проблем, А после ошибки 500. мне выслали копию сайта и фото загружаются только по УРЛу. А у моих то фото нет УРЛа или я чего то не понимаю?

    • Роман Ваховский говорит:

      Немного опять не по теме. Ну да ладно.
      Наталья, Ваши некоторые фото на сайте имеют слишком большой размер (у меня даже размера монитора не хватило) и вес. Измените размер до приемлемого и вес до минимального без потери качества изображения. Прочтите об этом тут - http://wordpress-book.ru/prodvizhenie/optimizaciya-izobrazheniya-neobxodimost-i-pravila-osushhestvleniya/. После этого фото будут нормально загружаться.

  • Наталья говорит:

    Да, большое спасибо за статью про robots.txt Очень понятная и подробная.Жаль, что раньше ее не прочитала.У меня вопрос. Я хост написала без www. Нужно внести изменения? Заранее спасибо за ответ!

  • massimo_indie говорит:

    Здравствуйте!
    Спасибо за пост, лишь здесь нашел, как сделать проигрывание мелодий друг за другом.
    Однако душа просит совершенства, поэтому вопрос: можно ли как-нибудь организовать список файлов и при желании выбрать желаемую мелодию, но в то же время при бездействии они должны играть автоматом по порядку?

    • Роман Ваховский говорит:

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

  • Alex говорит:

    При проигрывании пишет file not found. Название файла на латинице. Перепробовал все. Безрезультатно.

  • Роман говорит:

    Добрый день!
    Спасибо за статью, всё отлично, но получилось не всё.
    На странице сайта плееры вставились на ура. А вот главная страница состоит из виджетов темы. Соответственно если я в виджет вставляю код, который Вы приводите для встраивания плеера в боковую панель, шапку или футер, то у меня начало и конец кода видятся простым текстом перед и после плеера. Путем тупого отрезания лишнего у меня корректно отображается урезанный Ваш код следующего вида:
    Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.AudioPlayer.embed("audioplayer_7", {soundFile:"aHR0cDovL3dwYXVkaW9wbGF5ZXIuY29tL2F1ZGlvLzpodHRwOi8vd3d3LmRvbWFpbi5jb20vcGF0aC90by9zb25nLm1wMw"});
    Но файла плеер не видит. Подставляю прямую ссылку на файл в soundFile - все равно не видит. Подскажите пожалуйста, в чем мой косяк?
    С уважением, Роман.

  • Роман говорит:

    Код в предыдущем комменте отобразился некорректно.
    Перед плеером текстом отображается следующий код:
    < ?php if (function_exists("insert_audio_player")) {
    insert_audio_player("
    после него:
    });");

Страница 1 из 11

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

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

Поиск по блогу
Подписка тут
подписка

Все права защищены © 2011-2017. WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.