Сегодня я расскажу, как сделать стильный аудиоплеер для сайта при помощи jQuery. Его особенностью является то, что его внешний вид определяется CSS-стилями, и может быть легко изменен в соответствии с дизайном Вашего сайта.
демо | исходник
Шаг 1.
Подключим фреймворк jQuery и плагин jquery.jplayer к нашему документу, прописав следующий код между тегами :
Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>
Шаг 2.
Далее вставим следующий скрипт:
Quote
<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 или между тегами пропишем следующие стили (параметры этих стилей вы можете изменять по своему желанию):
Code
#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.
В нужном нам месте вставим блок самого плеера:
Code
<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-файла плеер работать не будет.
Готово! Приятной Вам музыки!
Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: www.happyworm.com
