Устанавливаем простой аудиоплеер для сайта со скриптом и плагином

Здравствуйте, уважаемые посетители.

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

Также рассмотрим вариант плагина, если у вас сайт на WordPress. Ниже вы можете увидеть пример плеера, который установим в данной статье (это вариант без плагина). Можете кликнуть на кнопку "Play" и прослушать трек.

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

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

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

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

  1. с помощью скрипта, который можно установить на любой сайт;
  2. с помощью плагина для движка wordpress.

Второй вариант будет полезен, у кого аудио-подкасты чуть ли не основной тип контента. Теперь давайте установить аудиоплеер на сайт.

Скрипт

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

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

В архиве будут 2 файла. Их нужно загрузить в папку на хостинге. Куда загружать, решать вам, но я предпочел закинуть в папку "audioplayer", которую создал в корневом каталоге сайта.

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

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

В данном коде вам нужно изменить мой путь к файлам плеера на хостинге и путь к аудиофайлу, который будет проигрываться. Там всего лишь 3 части нужно изменить. В коде вы их можете найти по названию моего домена kostyakhmelev.ru.

Код размещаем в html режиме конечно же. Проигрыватель будет работать абсолютно на любом сайте, но необходима поддержка flash на компьютере, чтобы им воспользоваться. Поэтому, для страховки вы можете под проигрывателем написать "если аудио не воспроизводится, установите последнюю версию flash плеера". Но, обычно такие ситуации не возникают, так как интернет-браузер всегда предлагает его установить.

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

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

Переходим ко второму плееру, который делается только для сайта на движке WordPress.

к содержанию ↑

Плагин Audio player

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

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

Выглядит он следующим образом: [Audio: имя файла с расширением]

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

Аудиофайл также нужно загружать в определенную папку, а не в любой каталог. Это также выставляется в настройках, к которым мы позже перейдем. По умолчанию в настройках выставлено значение, которое подразумевает расположение аудифайлов в папке "audio", расположенной в корне сайта. Это и нужно сделать - создать в корне сайта такую папку и туда загружать звуковые дорожки. Тут ничего сложного нет. Все делается, как и в предыдущем случае со скриптом проигрывателя.

Переходим к настройкам. Находятся они в пункте "Настройки - Audio player".

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

Начнем с общих настроек. Сначала даю скриншоты, а затем описание всех параметров.

  • Заменить [ audio ] - синтаксис - параметр необходимо включать и он стоит по умолчанию. Нужно в том случае, если на одной странице аудиоплеер будет использоваться ни один раз;
  • Заменять все ссылки mp3-файлов - если на какой-то странице вы дали ссылку на мп3-файл, то ссылка преобразуется в аудиоплеер. Полезная вещь, если вы ранее не использовали проигрыватель и все звуковые дорожки давали в виде ссылки на скачивание;
  • Включить в комментариях - будет ли работать проигрыватель в комментариях? Если необходимо вам это, то ставьте. Может посетители будут делиться каким-то аудио-подкастами;
  • Интеграция вложений - не разобрался с данным пунктом и его не трогал. Вам он также вряд ли будет, судя по всему. По идее, если вы добавляете аудиофайл, как вложение в сообщение, то вместо вложения будет аудиоплеер и находится он будет в конце записи;
  • Переместить вложение в начало сообщения - относится к предыдущему пункту и перемещает вложение с конца записи в начало;
  • Папка аудио по умолчанию - указываем папку, откуда плеер будет загружать файлы. По умолчанию стоит папка "audio", которую мы создали ранее. Можно создать и другой каталог.

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

В настройках параметра канала я рекомендую выбрать параметр "Ничего", чтобы не добавлять плеер в rss ленту.

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

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

В дополнительных настройках мне также не все понятно. Да и использовать там не все нужно.

Что здесь стоит объяснить так это следующие параметры.

  • Изначальная громкость - так как в данном плеере имеется функция регулятора громкости, то данный параметр выставляет на каком уровне будет находится ползунок громкости при воспроизведении файла. По умолчанию стоит 60%. Я же рекомендую поставить процентов 30-40, чтобы уберечь уши посетителей от перепадов громкости, если их наушники или колонки настроены не тихо. А там они уже сами смогут добавить громкость на нужный уровень;
  • Время буфера - аудиофайлы могут быть большого размера да и интернет не у всех быстрый. Если вы знаете, что у вашей аудитории имеется проблемы со скоростью загрузки, то можно поставить задержку перед воспроизведением аудио, во время которой будет происходить загрузка файла. Сколько будет идти эта задержка и выставляется в данном пункте;
  • Шифрование - пожалуй, последний параметр, который стоит включить в данном разделе настроек. Нужно, чтобы посетители не скачивали файлы с сайта какими-то способами, а только слушали их.

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

В окончание данного материала хочу дать еще одну подсказку. Плеер, используемый с плагином, может воспроизводить файлы не только из папки хостинга, но и со сторонних сайтов. Для этого в коде, который мы размещаем внутри странице, нужно прописывать не просто имя файла, лежащего в папке, а полный путь к аудио-дорожке. Например, вот так:

На этом все, ребята. Пишите в комментариях какие-то свои решения для проигрывания музыки на сайте.

Используете ли вы в своей деятельности данный вид контента вообще и планируете ли?

Все. Пока!

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 1
  • Почему-то не получается контакта с облаком яндекс-диском, не воспроизводит при смене пути

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

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