HTML5 Player

Langoliers

Давно я тут
621
67 / 2
Если б Я изучал людей, то был бы паразитологом

Приветствую! Уже давно я нашел бесплатный аудио плеер - http://www.speakker.com
Это не расширение для Joomla - это просто скрипт плеера на HTML5 и JQuery.
Но он прекрасно подойдет к любому сайту, так как прилипает к нижней части сайта.
Воспроизводит mp3 и ogg файлы.
Скачать можно с официального сайта.
Но я взял на себя смелость и немного изменил плеер, а так же разобрался с организацией плей листа, на что признаться потратил больше всего времени.
Вкратце:
- русифицировал кнопки соц сетей
- убрал нижнюю полосу, содержащую ссылку на сайт разработчика (не беспокойтесь ссылка осталась в коде, так что я пиратством не занимался)
- убрал не функционирующую ссылку загрузки файлов. (она предлагала загрузить файл плей листа)
Скриншот моей, измененной версии плеера:

Спойлер

[свернуть]

Итак, для создания плей листа большого плеера нам нужно создать вот такой php файл:

Спойлер

[свернуть]

Что есть что думаю понятно. Тип файла, заголовок (да, нужно вводить вручную, т.к. плеер не поддерживает теги к сожалению) и обложка.
Для того чтобы вывести большой плеер нам нужно вставить следующий код, предварительно разместив файлы плеера в index.php:

Код


<script type="text/javascript">
$(document).ready(function() {
    $().speakker({
        file: 'myplaylist.php',
        playlist: true,
        theme: 'light',
    });
});
</script>

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

Цитировать

<script type="text/javascript" src="speakker/jquery.min.js"></script>
<link rel="stylesheet" href="css/speakker.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mspeakker.css" type="text/css" media="screen">
<script type="text/javascript" src="js/projekktor.min.js"></script>
<script type="text/javascript" src="js/speakker.min.js"></script>

Для изменения текста выводимого в Твиттер и Фейсбук при "расшаривании" нужно исправить код в файле speakker.min.js а именно:

Цитировать

d={plugins:((b.length>0)?["Display","Controlbar","Share"]:["Display","Controlbar","Share","Schedule"]),height:false,width:false,controls:true,continuous:true,poster:c.poster,enableFullscreen:false,plugin_share:{links:[{domId:"twitter",text:"I like new tracks.",code:"http://twitter.com/share?url={pageurl}&text={text}&via=yazow"},{domId:"facebook",text:"I like new tracks",code:"http://www.facebook.com/sharer.php?u={pageurl}&t={text}"}

^{после текста выводимого в твиттер можно вывести параметр "с помощью" я вывел свой твиттер, измините или уберите данный параметр &via=yazow}
Скачать мою версию аудио плеера

« Последнее редактирование: 30.05.2012, 12:37:09 от Langoliers »

Записан