Стильный аудиоплеер для сайта

Сегодня я расскажу, как сделать стильный аудиоплеер для сайта при помощи jQuery. Его особенностью является то, что его внешний вид определяется CSS-стилями, и может быть легко изменен в соответствии с дизайном Вашего сайта.

demosourse

Шаг 1.

Подключим фреймворк jQuery и плагин jquery.jplayer к нашему документу, прописав следующий код между тегами <head>:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>

Шаг 2.

Далее вставим следующий скрипт:


<script>
$(document).ready(function(){
$("#jquery_jplayer").jPlayer({
ready: function () {
$("#jquery_jplayer").change('01.mp3');
},
cssPrefix: "different_prefix_example"
});
$("#jquery_jplayer").jPlayerId("play", "player_play");
$("#jquery_jplayer").jPlayerId("pause", "player_pause");
$("#jquery_jplayer").jPlayerId("stop", "player_stop");
$("#jquery_jplayer").jPlayerId("loadBar", "player_progress_load_bar");
$("#jquery_jplayer").jPlayerId("playBar", "player_progress_play_bar");
$("#jquery_jplayer").jPlayerId("volumeMin", "player_volume_min");
$("#jquery_jplayer").jPlayerId("volumeMax", "player_volume_max");
$("#jquery_jplayer").jPlayerId("volumeBar", "player_volume_bar");
$("#jquery_jplayer").jPlayerId("volumeBarValue", "player_volume_bar_value");
$("#jquery_jplayer").onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
var myPlayedTime = new Date(playedTime);
var ptMin = (myPlayedTime.getMinutes() < 10) ? "0" + myPlayedTime.getMinutes() : myPlayedTime.getMinutes();
var ptSec = (myPlayedTime.getSeconds() < 10) ? "0" + myPlayedTime.getSeconds() : myPlayedTime.getSeconds();
$("#play_time").text(ptMin+":"+ptSec);
var myTotalTime = new Date(totalTime);
var ttMin = (myTotalTime.getMinutes() < 10) ? "0" + myTotalTime.getMinutes() : myTotalTime.getMinutes();
var ttSec = (myTotalTime.getSeconds() < 10) ? "0" + myTotalTime.getSeconds() : myTotalTime.getSeconds();
$("#total_time").text(ttMin+":"+ttSec);
});
$("#jquery_jplayer").onSoundComplete( function() {
$("#jquery_jplayer").play();
});
});
</script>

Шаг 3.

В отдельный файл CSS или между тегами <head> пропишем следующие стили (параметры этих стилей вы можете изменять по своему желанию):

#player_container {
position: relative;
background-color:#eee;
width:418px;
height:100px;
border:1px solid #009be3;
}
#player_container ul#player_controls {
list-style-type:none;
padding:0;
margin: 0;
}
#player_container ul#player_controls li {
overflow:hidden;
text-indent:-9999px;
}
#player_play,
#player_pause {
display: block;
position: absolute;
left:40px;
top:20px;
width:40px;
height:40px;
cursor: pointer;
}
#player_play {
background: url("images/spirites.jpg") 0 0 no-repeat;
}
#player_play.different_prefix_example_hover {
background: url("images/spirites.jpg") -41px 0 no-repeat;
}
#player_pause {
background: url("images/spirites.jpg") 0 -42px no-repeat;
}
#player_pause.different_prefix_example_hover {
background: url("images/spirites.jpg") -41px -42px no-repeat;
}
#player_stop {
position: absolute;
left:90px;
top:26px;
background: url("images/spirites.jpg") 0 -83px no-repeat;
width:28px;
height:28px;
cursor: pointer;
}
#player_stop.different_prefix_example_hover {
background: url("images/spirites.jpg") -29px -83px no-repeat;
}
#player_progress {
position: absolute;
left:130px;
top:32px;
background-color: #eee;
width:122px;
height:15px;
}
#player_progress_load_bar {
background: url("images/bar_load.gif") top left repeat-x;
width:0px;
height:15px;
cursor: pointer;
}
#player_progress_load_bar.different_prefix_example_buffer {
background: url("images/bar_buffer.gif") top left repeat-x;
}
#player_progress_play_bar {
background: url("images/bar_play.gif") top left repeat-x ;
width:0px;
height:15px;
}
#player_volume_min {
position: absolute;
left:274px;
top:32px;
background: url("images/spirites.jpg") 0 -170px no-repeat;
width:18px;
height:15px;
cursor: pointer;
}
#player_volume_max {
position: absolute;
left:346px;
top:32px;
background: url("images/spirites.jpg") 0 -186px no-repeat;
width:18px;
height:15px;
cursor: pointer;
}
#player_volume_min.different_prefix_example_hover {
background: url("images/spirites.jpg") -19px -170px no-repeat;
}
#player_volume_max.different_prefix_example_hover {
background: url("images/spirites.jpg") -19px -186px no-repeat;
}
#player_volume_bar {
position: absolute;
left:292px;
top:37px;
background: url("images/volume_bar.gif") repeat-x top left;
width:46px;
height:5px;
cursor: pointer;
}
#player_volume_bar_value {
background: url("images/volume_bar_value.gif") repeat-x top left;
width:0px;
height:5px;
}
#player_playlist_message {
position: absolute;
left:0;
bottom:0;
width:338px;
padding:5px 40px 10px 40px;
font-family: Arial, Helvetica, sans-serif;
line-height:1.4em;
height:1em;
background-color:#ccc;
}
#song_title {
float:left;
margin:0 5px 0 0;
padding:0;
font-weight:bold;
}
#play_time,
#total_time {
padding-top:.3em;
font-weight:normal;
font-style:oblique;
font-size:.7em;
}
#play_time {
float:left;
}
#total_time {
float:right;
text-align: right;
}
.miaow {
font-size:.8em;
color:#999;
}
.miaow a:link, a:visited, a:hover, a:focus, a:active {
color:#009be3;

Шаг 4.

В нужном нам месте вставим блок самого плеера:

<div id="jquery_jplayer"></div>
<div id="player_container">
<ul id="player_controls">
<li id="player_play"><a href="#" onClick="$('#jquery_jplayer').play(); return false;" title="play"><span>play</span></a></li>
<li id="player_pause"><a href="#" onClick="$('#jquery_jplayer').pause(); return false;" title="pause"><span>pause</span></a></li>
<li id="player_stop"><a href="#" onClick="$('#jquery_jplayer').stop(); return false;" title="stop"><span>stop</span></a></li>
<li id="player_volume_min"><a href="#" onClick="$('#jquery_jplayer').volume(0); return false;" title="min volume"><span>min volume</span></a></li>
<li id="player_volume_max"><a href="#" onClick="$('#jquery_jplayer').volume(100); return false;" title="max volume"><span>max volume</span></a></li>
</ul>
<div id="player_progress">
<div id="player_progress_load_bar">
<div id="player_progress_play_bar"></div>
</div>
</div>
<div id="player_volume_bar">
<div id="player_volume_bar_value"></div>
</div>
<div id="player_playlist_message">
<div id="song_title">Bubble</div>
<div id="play_time"></div>
<div id="total_time"></div>
</div>
</div>

В параметре song_title измените название музыкальной композиции на свое.

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

Готово! Приятной Вам музыки!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.happyworm.com
Перевел: Сергей Патин
Урок создан: 12 Мая 2009
Просмотров: 82424
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 12 Мая 2009 23:19
    Lardok
    ...песня отличная :)
  • 13 Мая 2009 01:36
    zimorodok
    По правде говоря, стильного я ничего не увидел. Просто плоский плеер. Это стиль? Конечно, на вкус и цвет товарищей нет, но при таком объеме кода, и такое что-то плоское?... В чем его преимущество перед другими проигрывателями? А за песню спасибо. Может я что-то не понимаю?
  • 13 Мая 2009 08:30
    dima
    красиво конечно это всё... но если хостинг не поддерживает gz-компрессию, а без сжатия эта библиотека и подключаемые скрипты ох..)) как много весят!!)) то думаю жертвовать весом ради красоты не стоит(( А на некоторых бесплатных хостингах прям так и написано: не включайте в своих скриптах опцию сжатия исходящих данных, эти функции заблокированы и их использование может помешать работе вашего сайта.
  • 13 Мая 2009 09:09
    Kirill
    вот стиль - http://www.underbarsuperlounge.com/ как сделать такое?
    • 14 Декабря 2011 15:46
      kill_windows
      Может и поздновато но вот http://www.flamplayer.com/
  • 13 Мая 2009 10:17
    Сергей_Патин
    Kirill, Ну там сайт полностью на флэше. И плеер, скорее всего, является частью сайта, т.е. его оттуда никак не выдернуть.
  • 13 Мая 2009 11:59
    alchimik
    А как песенка то называется?
  • 13 Мая 2009 12:17
    dima
    а как скачать песенку? нашел в коде вот это упоминание: $("#jquery_jplayer").change('01.mp3'); как поставить свою компазицию к примеру?
  • 13 Мая 2009 13:29
    Сергей_Патин
    Dima. Да. Правильно путь к песне указывается в параметре change.
  • 13 Мая 2009 13:32
    Сергей_Патин
    Скачать данную композицию можно с официального сайта. http://www.miaowmusic.com/
  • 13 Мая 2009 14:15
    animhotep
    + в том что это не флеш)) ну и можно легко стиль менять а на счет веса никто не сравнивал с флеш плейером что тяжелее?
  • 13 Мая 2009 18:29
    Максим
    Ребята Зацените в сайдбаре появилось облако меток!!! Евгений респект и уважуха Вам!!! Супер! Если у Вас получится не могли бы вы сделать урок по созданию такого облачка на сайте для нас?
  • 13 Мая 2009 20:02
    kickerps
    О, я себе лучше такой на сайт поставлю. Кста када музон заиграл, у миня колонки на полную были врублены, а сабик просто разрывался =)
  • 13 Мая 2009 21:09
    dima
    kickerps, ха)) ну ты как всегда отжигаешь! ^^) по поводу меток(тэгов) тока щас заметил) поддерживаю! нужен урок)
  • 3 Июля 2009 17:32
    batia
    Доброго времени суток! Если не возражаете я без сленга. Вопрос к создателям скрипта такой: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jplayer.js"></script> что сдесь "js/jquery.js" и "js/jquery.jplayer.js", вернее спросить, что за скрипт должен быть в этих файлах? Не работает. И еще при запуске скрипта получаю ошибку типа "предполагается наличие объекта" и указывается на знак($) первой переменной. Что не так или, что не так делаю? вообще вижу только прямоугольник с названием песни.
  • 10 Июля 2009 17:26
    skint
    А можно еще как-то сделать добавление новых треков и переход от трека к треку, типа плэй-листа???
  • 6 Сентября 2009 14:31
    paragraph
    Мне нужно добавить несколько песен на сайт.. Как єто сделать?
  • 6 Декабря 2009 13:24
    Игорь
    Огромное спасибо... давно искал подобное....
  • 18 Декабря 2009 10:26
    www
    batia проверь путь к песне, которую тебе надо воспроизвести. skint список можно сделать, с помощью баз данных. можно и по другому, но сбазами если делать то это очень легко сделать. paragraph создаешь базу данных в нее закидываешь название песни, путь к ней, исполнителя. потом на своем сайте выводишь инфу из базы как список песен. и все........
  • 13 Сентября 2010 01:21
    Virsson
    Мне нужно добавить несколько песен на сайт.. Как єто сделать?
  • 13 Сентября 2010 09:39
    orion
    Чего то я не понял а где сам муз файл прописывать?
  • 15 Октября 2010 03:49
    postal
    orion, $("#jquery_jplayer").change('01.mp3'); в этой строке вместо 1.mp3 www, спасибо за идею о базе данных, действительно просто!!!
  • 15 Октября 2010 04:46
    postal
    нашел такой же плеер с плейлистом на этой странице http://prvision.net/blog/jplayer/
  • 21 Января 2011 19:30
    reftih
    <PRE>Уважаемый Евгений! Помогите чайнику великовозрастному в создании такого плеера с плейлистом. Ну не догоняю и ВСЕ!!! <BR></PRE>
    • 10 Сентября 2011 01:16
      kuzroman
      а кто говорил что просто будет))
  • 19 Мая 2011 21:03
    arsen9631
    люди подскажиту как добавить аудиплеер ко всем музыкальным файлам на сайте
    • 10 Сентября 2011 01:16
      kuzroman
      делай плейлист
  • 5 Июля 2011 11:39
    burn
    Сергей у меня проблемка проявилась change поставил свою музыку html css и jquery проверял все сделал на локальном серве а музыка так и не хочет играть. В чем может быть броблема?? (заранее спасибо)
  • 25 Июля 2011 20:23
    MediaMaster
    Привет, помогите решить проблему, решил сделать плей лист к данному плееру вот что получилось смотрите ниже: собственно загвоздка в то что нужно менять путь к файлу "change('audio/03.mp3')" на значение переменной "audioUrl" каждый раз когда происходит выбор в плейлесте тоесть клик, как это можно реализовать ???
    $(document).ready(function(){ $('#player_container_list strong').click(function(){ var listText = $(this).text(); $('#song_title').text(listText); $('#dowload').attr('href',"audio/" + listText); var audioUrl = "'audio/" + listText + "'"; });	$("#jquery_jplayer").jPlayer({	ready: function () {	$("#jquery_jplayer").change('audio/03.mp3');	},	cssPrefix: "different_prefix_example"	});	$("#jquery_jplayer").jPlayerId("play", "player_play");	$("#jquery_jplayer").jPlayerId("pause", "player_pause");	$("#jquery_jplayer").jPlayerId("stop", "player_stop");	$("#jquery_jplayer").jPlayerId("loadBar", "player_progress_load_bar");	$("#jquery_jplayer").jPlayerId("playBar", "player_progress_play_bar");	$("#jquery_jplayer").jPlayerId("volumeMin", "player_volume_min");	$("#jquery_jplayer").jPlayerId("volumeMax", "player_volume_max");	$("#jquery_jplayer").jPlayerId("volumeBar", "player_volume_bar");	$("#jquery_jplayer").jPlayerId("volumeBarValue", "player_volume_bar_value");	$("#jquery_jplayer").onProgressChange( function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {	var myPlayedTime = new Date(playedTime);	var ptMin = (myPlayedTime.getMinutes() < 10) ? "0" + myPlayedTime.getMinutes() : myPlayedTime.getMinutes();	var ptSec = (myPlayedTime.getSeconds() < 10) ? "0" + myPlayedTime.getSeconds() : myPlayedTime.getSeconds();	$("#play_time").text(ptMin+":"+ptSec);	var myTotalTime = new Date(totalTime);	var ttMin = (myTotalTime.getMinutes() < 10) ? "0" + myTotalTime.getMinutes() : myTotalTime.getMinutes();	var ttSec = (myTotalTime.getSeconds() < 10) ? "0" + myTotalTime.getSeconds() : myTotalTime.getSeconds();	$("#total_time").text(ttMin+":"+ttSec);	});	$("#jquery_jplayer").onSoundComplete( function() {	$("#jquery_jplayer").play();	});
    });
    </script>
    <div id="jquery_jplayer"></div>
    <div id="player_container">	<ul id="player_controls">	<li id="player_play"><a href="#" onclick="$('#jquery_jplayer').play(); return false;" title="play"><span>play</span></a></li>	<li id="player_pause"><a href="#" onclick="$('#jquery_jplayer').pause(); return false;" title="pause"><span>pause</span></a></li>	<li id="player_stop"><a href="#" onclick="$('#jquery_jplayer').stop(); return false;" title="stop"><span>stop</span></a></li>	<li id="player_volume_min"><a href="#" onclick="$('#jquery_jplayer').volume(0); return false;" title="min volume"><span>min volume</span></a></li>	<li id="player_volume_max"><a href="#" onclick="$('#jquery_jplayer').volume(100); return false;" title="max volume"><span>max volume</span></a></li>	</ul>	<div id="player_progress">	<div id="player_progress_load_bar">	<div id="player_progress_play_bar"></div>	</div>	</div>	<div id="player_volume_bar">	<div id="player_volume_bar_value"></div>	</div>	<div id="player_playlist_message">	<div id="song_title">Выберете композицыю</div> <a id="dowload" href="audio/01.mp3" style="padding-left:20px; text-decoration:none; color:#39C">Скачать</a>	<div id="play_time"></div>	<div id="total_time"></div>	</div>
    </div> <div id="player_container_list"> Плей_лист<br> <strong id="list">01.mp3</strong><br> <strong id="list">02.mp3</strong><br> <strong id="list">03.mp3</strong><br> <strong id="list">04.mp3</strong><br> <strong id="list">05.mp3</strong><br> <strong id="list">06.mp3</strong><br> <strong id="list">07.mp3</strong><br> <strong id="list">08.mp3</strong><br> <strong id="list">09.mp3</strong><br> <strong id="list">10.mp3</strong><br> <strong id="list">11.mp3</strong><br> <strong id="list">12.mp3</strong><br> <strong id="list">13.mp3</strong><br> </div>
    </div>
    </div> 
    • 19 Мая 2013 16:12
      Axel13Cool
      function change(song){
      $("#jquery_jplayer").change(song);
      }
      </script>
      <div onclick="change(01.mp3)">01.mp3</div>
      
  • 3 Августа 2011 05:24
    Dimond_R
    Не работает. На официальном сайте тоже был, попробовал по их примерам сделать тоже не получилось. Плеер вообще не отображается. Лучше uppod поставить минут 10 уйдёт, а не пять часов бестолковой возни.
    • 10 Сентября 2011 01:15
      kuzroman
      Бестолковый ты а не плейер, будешь тек легко бросать то что начал, так им и останешься.
      • 19 Января 2012 20:28
        FINESTGOL
        А он и не говорил что плеер бестолковый! Он сказал про бестолковую возню...Зачем других сразу-же оскорбляешь.
  • 10 Сентября 2011 01:14
    kuzroman
    бл.. час сижу колдую над английской документацией к плейеру, а у Евгения уже есть описание урока на сайте. Спасибки.
  • 10 Сентября 2011 01:39
    kuzroman
    через открытие html-файла плеер работать не будет??? Чушь еще как будет.
  • 13 Сентября 2011 10:53
    Lena2332
    Этот плеер перестал работать в IE9, если кто-то знает подскажите в чем проблема?
  • 2 Декабря 2011 16:44
    Мишель Вега
    Трек Miaow - Bubble
  • 14 Декабря 2011 19:39
    reanima
    Подскажите пожалуйста как сделать автоплей в этой версии плеера?
  • 20 Апреля 2012 10:26
    kalbac
    Не поленитесь и почитайте документацию на официальном сайте http://www.jplayer.org/latest/developer-guide/ Там все методы описаны. Плеер отлично работает, даже при небольшом знании jQuery можно всё реализовать. Я на своём сайте http://kalbac.ru даже бродкаст сделал.
  • 25 Марта 2013 21:43
    alicemak
    Народ, кто разобрался, как в данном случае при проигрывание mp3, сделать автостарт?
    • 11 Октября 2013 19:58
      Axel13Cool
      Легко. Как документ готов вызови jplayer.play
  • 26 Марта 2013 16:33
    alicemak
    Данная ссылка http://www.jplayer.org/latest/developer-guide/ предназначена для новой версии плеера, не для той, что указана в статье. :)
  • 11 Апреля 2013 23:00
    rpokidin
    Не работает в IE9
  • 13 Сентября 2013 12:33
    Фотограф Алишейх Шах
    как сделать чтобы музыка играла и при переходе на другую станицу ???
    • 11 Октября 2013 19:59
      Axel13Cool
      ajax переходы
^ Наверх ^