HTML5 Аудио плеер для сайта на WordPress, Blogger

Установить на сайт или блог стильный аудио плеер (blogger - blogspot)

Честно говоря не знаю окажется этот виджет кому-то полезным или нет, но все же он имеет право на существование. Помню когда я только начинал работать с blogger мне был нужен подобный плеер, правда я так и не нашел его, но выкрутился другим путем. Теперь же у новичков больше возможностей. Что могу сказать по нашему аудиоплееру, в общем он довольно симпатичный, функциональность процентов на девяносто. Не совсем удобно закидывать в него свои любимые хиты, но возможно со временем это измениться. Работает он только на платформе blogger (blogspot).


Итак, сперва обсудим, как его добавить на свой сайт или блог, а затем, как перебрасывать в него аудиозаписи. Для добавления аудиоплеера можно создать либо новый гаджет (HTML\Javascript) или же новую страницу (сообщение) и переключится на вкладку HTML. После вставляете туда код:

HTML

























    



     00:00 / 00:00
    






     
     
     
     
    

Сохраняете гаджет или страницу и проверяете как работает плеер. На данный момент в нем находиться четыре композиции.
A class=''play'' - это начало кода каждого трека
Data-album - к какому стилю относиться песня поп, кантри, блюз, рэп и т.д.
Data-albumart - служит для добавления постера исполнителя.
Data-artist - название группы или исполнителя.
Data-title - название песни
Data-url - ссылка с помощью которой проигрывается композиция.

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

Для этого переходим по ссылке: sites.google.com здесь мы создаем сайт, заполняем строку: Укажите название сайта, проходим проверку капчи и жмем красную кнопку Создать. В появившемся окне вверху, с правой стороны кликаем по значку Создать страницу. После создания откроется новая страница, где нужно кликнуть по Добавить файлы и загружаем со своего компьютера нужный трек. После загрузки увидим свой трек, а напротив него с правой стороны значок в виде стрелки при клике по которой можно скачать трек, нам же нужно кликнуть по нему правой кнопкой мыши скопировать ссылку, она будет иметь примерно такой вид:
/sites.google.com/site/skiseukdav4345/vayva/76b9ef6349fd.mp3?attredirects=0&d=1
в ней удаляем:
?attredirects=0&d=1
затем вставляем ссылку:
/sites.google.com/site/skiseukdav4345/vayva/76b9ef6349fd.mp3
в значение Data-url сохраняемся и наслаждаемся любимыми композициями. 

Переходим к просмотру видео: