Не скрою, любитель я послушать музыку! Спасибо вконтакте, prostopleer.com за предоставленную возможность экономия места на своей айсеровской машине. Но, если что-то сделано хорошо, то нужно разобраться, как сие устроено и заиметь опыт, не так ли?
Постановка задачи: воспроизведение аудио файлов в формате mp3 (уж как минимум), регулирование громкости, перемотка, плейлист, возможность переключения треков, разумеется html5 и, хотелось бы уже сказать: "Бе бе бе flash", но все таки поддержка flash при отсутствии html5.
Прозондировал почву, выбор пал на jPlayer, поверил в его кроссбраузерность. Работает на jQuery >= 1.3.2. Скачать можно здесь, почитать о нем можно здесь, здесь и здесь. Хотя я думаю данного поста будет вполне достаточно)
Характеристики и правда впечатляют:
HTML5: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm
Flash: mp3, m4a (AAC), m4v (H.264)
Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9 beta
OSX: Firefox, Chrome, Opera, Safari
iOS: Mobile Safari: iPad, iPhone, iPod Touch
Android: создатели не нашли девайс для тестирования. okay
Начнем по порядку. Подключаем скрипты. Не забываем, что все скрипты лучше подключать внизу страницы.
<script type="text/javascript" src="path/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="path/js/jplayer.playlist.min.js"></script>
<link
href="path/skin/blue.monday/jplayer.blue.monday.css"
rel="stylesheet"
type="text/css" />
Как видно, мы подключили скин. Их несколько стандартных в комплекте, все красивые, все дела, но мы же создаем плеер, как вконтакте! Так что мы его перерисуем. В той директории, где скрипт плеера хранится, есть папка skin. Создадим там папку "jplayer.vkontakte", кладем туда этот, этот, этот, этот и этот файл. Третью строчку смело заменим:
<link
href="path/skin/jplayer.vkontakte/jplayer.vkontakte.css"
rel="stylesheet"
type="text/css" />Так же мы подключили jplayer.playlist.min.js, который мы тоже любезно подправим и по пользуем. Добавим немного html кода. Не забывайте в отступы в 4 пробела, ибо дзен.
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<!--
В этом div будет распологаться плейлист и кнопочная форма.
-->
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>
<!--
Данный элемент отсутствует в документации.
Его предназначение: отображение названия играющей
композиции
-->
<label id="name-music-that-plays"></label>
</li>
<!-- translate.google.com :[ -->
<li>
<a href="javascript:;" class="jp-play" tabindex="1">play</a>
</li>
<li>
<a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
</li>
<li>
<a href="javascript:;" class="jp-previous" tabindex="1">previous</a>
</li>
<li>
<a href="javascript:;" class="jp-next" tabindex="1">next</a>
</li>
</ul>
<!-- Прогресс бар -->
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<!-- Регулятор громкости -->
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<!-- Остаток времени -->
<div class="jp-time-holder">
<div class="jp-current-time"></div>
</div>
<div class="clear"></div>
<!-- Кнопки повторения и перемешивания плейлиста -->
<ul class="jp-toggles">
<li>
<a
href="javascript:;"
class="jp-shuffle"
tabindex="1"
title="shuffle">
shuffle
</a>
</li>
<li>
<a
href="javascript:;"
class="jp-shuffle-off"
tabindex="1"
title="shuffle off">
shuffle off
</a>
</li>
<li>
<a
href="javascript:;"
class="jp-repeat"
tabindex="1"
title="repeat">
repeat
</a>
</li>
<li>
<a
href="javascript:;"
class="jp-repeat-off"
tabindex="1"
title="repeat off">
repeat off
</a>
</li>
</ul>
<div class="clear"></div>
</div>
<!-- Будущий плейлист -->
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
<!-- Сообщение об ошибке -->
<div class="jp-no-solution">
<span>Ой...</span>
Просим прощения, но вы зашли в интернет с камня. Скачайте
<a href="http://get.adobe.com/flashplayer/" target="_blank">
Flash plugin
</a>.
</div>
</div>
</div>Ниже пишем js код. Правильнее бы его вынести в отдельный файлик *.js и подключить. Но мы же плохие парни, да? =Р
$(document).ready(function(){
// Указываев id-шники контейнеров
var cssSelector = {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
};
// Создадим плейлист. Структура проста, как масло в холодильнике
var playlist = [
{
author:"TSP",
title:"Cro Magnon Man",
discription: "Привет, я описание",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
},
{
author:"Miaow",
title:"Tempered Song",
discription: "Уже можно подпевать",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
},
{
author:"Miaow",
title:"Hidden",
discription: "Привет, я описание",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
}
];
/*
Настройки. Подробнее о них в документации
*/
var options = {
swfPath: "js",
supplied: "oga, mp3",
wmode: "window",
smoothPlayBar: false,
keyEnabled: true
};
// Заводим ВАЗ 2110
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
// Просто, чтобы было.
getPlayList = function() {
return myPlaylist;
}
});Займемся плейлистом. Я дам сразу переделанный файлик, копировать с заменой. Добавил там формирование описания песен, подключил несколько строк, меняющие название композиции в том самом элементе label.
Важно отметить такую вещь: не стоит пихать аудио в каждый ваш сайт и, уж тем более, бесконтрольно включать музыку (таких вообще надо alert`ами лечить). Посетитель должен предсказуемо манипулировать всем и вся на странице, а не ложить печку от крика в наушниках)
Посмотреть и скачать пример можно по ссылкам ниже.
