Stylish jPlayer
A Pen by Jacob Lucado on CodePen.
<div class="music-player"> | |
<div class="info"> | |
<div class="center"> | |
<div class="jp-playlist"> | |
<ul> | |
<li></li> | |
</ul> | |
</div> | |
</div> | |
<div class="progress"></div> | |
</div> | |
<center> | |
<div class="controls"> | |
<div class="current jp-current-time">00:00</div> | |
<div class="play-controls"> | |
<a href="javascript:;" class="icon-previous jp-previous" title="previous"></a> | |
<a href="javascript:;" class="icon-play jp-play" title="play"></a> | |
<a href="javascript:;" class="icon-pause jp-pause" title="pause"></a> | |
<a href="javascript:;" class="icon-next jp-next" title="next"></a> | |
</div> | |
<div class="volume-level"> | |
<a href="javascript:;" class="icon-volume-up" title="max volume"></a> | |
<a href="javascript:;" class="icon-volume-down" title="mute"></a> | |
</div> | |
</div> | |
<div id="jquery_jplayer" class="jp-jplayer"></div> | |
</div> |
Stylish jPlayer
A Pen by Jacob Lucado on CodePen.
//Don't Steal My Shit -Jacob Lucado | |
$(document).ready(function(){ | |
var playlist = [{ | |
title:"NoiseFM", | |
artist:"Stream", | |
mp3:"http://noisefm.ru:8000/play&autoplay=1", | |
poster: "https://i.imgur.com/yrbCBdq.jpg" | |
},{ | |
title:"NoiseFM", | |
artist:"Stream", | |
mp3:"http://noisefm.ru:8000/play", | |
poster: "https://i.imgur.com/yrbCBdq.jpg" | |
},{ | |
title:"HOT 108 JAMZ", | |
artist:"Stream", | |
mp3: "http://108.61.30.179:4030/;stream.mp3", | |
poster: "https://i.imgur.com/yrbCBdq.jpg" | |
},{ | |
title:"DubBaseFM", | |
artist:"Stream", | |
mp3:"http://stream.dubbase.fm:7004/;stream.mp3", | |
poster: "https://i.imgur.com/yrbCBdq.jpg" | |
}]; | |
var cssSelector = { | |
jPlayer: "#jquery_jplayer", | |
cssSelectorAncestor: ".music-player" | |
}; | |
var options = { | |
swfPath: "https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf", | |
supplied: "ogv, m4v, oga, mp3", | |
volumechange: function(event) { | |
$( ".volume-level" ).slider("value", event.jPlayer.options.volume); | |
}, | |
timeupdate: function(event) { | |
$( ".progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute); | |
} | |
}; | |
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options); | |
var PlayerData = $(cssSelector.jPlayer).data("jPlayer"); | |
// Volume Slider | |
$( ".volume-level" ).slider({ | |
animate: "fast", | |
max: 1, | |
range: "min", | |
step: 0.01, | |
value : $.jPlayer.prototype.options.volume, | |
slide: function(event, ui) { | |
$(cssSelector.jPlayer).jPlayer("option", "muted", false); | |
$(cssSelector.jPlayer).jPlayer("option", "volume", ui.value); | |
} | |
}); | |
// Progress Slider | |
$( ".progress" ).slider({ | |
animate: "fast", | |
max: 100, | |
range: "min", | |
step: 0.1, | |
value : 0, | |
slide: function(event, ui) { | |
var sp = PlayerData.status.seekPercent; | |
if(sp > 0) { | |
$(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp)); | |
} else { | |
// Timeout check | |
setTimeout(function() { | |
$( ".progress" ).slider("value", 0); | |
}, 0); | |
} | |
} | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/jquery.jplayer.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/add-on/jplayer.playlist.min.js"></script> |
html { | |
min-height: 100%; | |
} | |
body { | |
background: #eee url("https://i.imgur.com/yrbCBdq.jpg") no-repeat center; | |
background-size: cover; | |
font-family: "Open Sans", sans-serif; | |
} | |
.music-player { | |
position: relative; | |
width: 350px; | |
height: 290px; | |
margin: 150px auto; | |
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8); | |
border-radius: 10px; | |
background: #2a363b; | |
overflow: hidden; | |
z-index: 0; | |
} | |
.music-player img { | |
position: absolute; | |
top: 0px; | |
left: 0px; | |
bottom: 0px; | |
right: 0px; | |
z-index: -1; | |
display: block; | |
width: 100% !important; | |
height: 100% !important; | |
-webkit-filter: blur(2px); | |
filter: blur(2px); | |
} | |
.music-player .info { | |
width: 100%; | |
height: 100px; | |
background: #e3e3e3; | |
background: rgba(0, 0, 0, 0.8); | |
text-align: center; | |
position: relative; | |
} | |
.music-player .info .jp-playlist li { | |
display: none; | |
} | |
.music-player .info .jp-playlist li a { | |
font-size: 30px; | |
font-weight: 300; | |
text-decoration: none; | |
color: #fff; | |
color: rgba(225, 225, 225, 0.4); | |
} | |
.music-player .info .jp-playlist li a span { | |
font-size: 14px; | |
display: block; | |
margin-top: 10px; | |
} | |
.music-player .info .jp-playlist li.jp-playlist-current { | |
display: block; | |
text-align: center; | |
} | |
.music-player .info .jp-playlist li .jp-free-media, | |
.music-player .info .jp-playlist li .jp-playlist-item-remove { | |
display: none; | |
} | |
.music-player .info .center { | |
padding: 5px 35px 0 0; | |
text-align: center; | |
} | |
.music-player .progress, | |
.music-player .volume-level { | |
width: 100%; | |
height: 5px; | |
display: block; | |
background: #000; | |
position: absolute; | |
bottom: 0px; | |
cursor: pointer; | |
border: none; | |
} | |
.music-player .progress .ui-slider-range, | |
.music-player .volume-level .ui-slider-range { | |
display: block; | |
background: #ed553b; | |
height: 5px; | |
border-radius: 0; | |
} | |
.music-player .progress .ui-slider-handle, | |
.music-player .volume-level .ui-slider-handle { | |
position: absolute; | |
top: -8px; | |
width: 8px; | |
height: 22px; | |
background: url("https://i.imgur.com/tsqwz1N.png") no-repeat center; | |
border: none; | |
outline: none; | |
margin: 0 0 0 -3px; | |
cursor: move; | |
} | |
.music-player .controls { | |
text-align: center; | |
width: 100%; | |
height: 190px; | |
background: #982e4b; | |
background: rgba(42, 54, 59, 0.9); | |
} | |
.music-player .controls .current { | |
font-size: 48px; | |
color: #fff; | |
color: rgba(225, 225, 225, 0.4); | |
padding: 15px 0 20px; | |
} | |
.music-player .controls .play-controls a { | |
display: inline-block; | |
width: 35px; | |
height: 40px; | |
margin: 0 30px; | |
} | |
.music-player .controls .volume-level { | |
position: relative; | |
bottom: auto; | |
width: 200px; | |
height: 2px; | |
margin: 30px auto 0; | |
background: rgba(225, 225, 225, 0.3); | |
} | |
.music-player .controls .volume-level .ui-slider-range { | |
height: 2px; | |
} | |
.music-player .controls .volume-level .ui-slider-handle { | |
top: -8px; | |
margin-left: -9px; | |
width: 22px; | |
height: 22px; | |
background-image: url("https://i.imgur.com/V5i67V2.png"); | |
} | |
.music-player .controls .volume-level .icon-volume-up, | |
.music-player .controls .volume-level .icon-volume-down { | |
position: absolute; | |
right: -34px; | |
top: -8px; | |
width: 22px; | |
} | |
.music-player .controls .volume-level .icon-volume-down { | |
right: auto; | |
left: -27px; | |
} | |
[class^="icon-"] { | |
width: 18px; | |
height: 18px; | |
background: no-repeat center; | |
display: block; | |
} | |
.icon-previous { | |
background-image: url("https://i.imgur.com/LIqj0nr.png"); | |
} | |
.icon-play { | |
background-image: url("https://i.imgur.com/xlBv5aR.png"); | |
} | |
.icon-pause { | |
background-image: url("https://i.imgur.com/lIhwduj.png"); | |
} | |
.icon-next { | |
background-image: url("https://i.imgur.com/Mb6Nzj5.png"); | |
} | |
.icon-volume-up { | |
background-image: url("https://i.imgur.com/qqdoddi.png"); | |
} | |
.icon-volume-down { | |
background-image: url("https://i.imgur.com/3iirf2f.png"); | |
} |
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" /> |