Aquí esta lo que compone ese repro:
CSS
.featured-player {
background: url("https://lh6.googleusercontent.com/-dEYFCYerXRs/UHt1Q20z1PI/AAAAAAAAEM4/GgrX3x6v0aQ/s92/player_top_bg.png") repeat-x scroll 0 top rgba(0, 0, 0, 0);
padding-top: 9px;
width: 100%;
}
.featured-player .container {
display: none;
padding: 0;
position: relative;
}
.featured-player .background {
background: url("https://lh4.googleusercontent.com/-L_IXRuAG3yk/UHt1QoB-yAI/AAAAAAAAEMo/rhaJXDFi_RI/s10/player_bottom_bg.png") repeat-x scroll 0 bottom #333333;
padding: 11px 0 19px;
width: 100%;
}
.jp-controls, .jp-audio, .jp-controls-holder {
float: left;
overflow: hidden;
}
.jp-controls li {
float: left;
}
.jp-controls a {
background: url("https://lh5.googleusercontent.com/-bFm7jJEAGz8/UHt1Q2w6d2I/AAAAAAAAEMw/tSj0hnVMUx4/s244/player_controls.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
margin-right: 5px;
}
.jp-controls .jp-play, .jp-controls .jp-pause {
height: 61px;
width: 60px;
}
.jp-controls .jp-play {
background-position: -42px 0;
}
.jp-controls .jp-play:hover {
background-position: -42px -61px;
}
.jp-controls .jp-pause {
background-position: -42px -122px;
}
.jp-controls .jp-pause:hover {
background-position: -42px -183px;
}
.jp-controls .jp-previous, .jp-controls .jp-next {
cursor: pointer;
float: left;
height: 43px;
margin-top: 9px;
width: 42px;
}
.jp-controls .jp-next {
background-position: -102px 0;
}
.jp-controls .jp-next:hover {
background-position: -102px -43px;
}
.jp-controls .jp-previous:hover {
background-position: 0 -43px;
}
.jp-playlist, .featured-player .playlist {
display: none;
}
.jp-info {
float: right;
margin: 9px 0 0 15px;
width: 641px;
}
.without-button .jp-info {
width: 766px;
}
.jp-title {
color: #FFFFFF;
display: block !important;
float: left;
width: 80%;
}
.jp-time, .jp-title {
line-height: 20px;
text-shadow: 0 -1px 0 #262626;
}
.jp-time {
color: #CCCCCC;
float: right;
width: 20%;
}
.jp-time div {
float: right;
margin-left: 5px;
}
.jp-progress {
background: none repeat scroll 0 0 #252525;
border: 1px solid #1E1E1E;
cursor: pointer;
height: 12px;
margin-top: 5px;
}
.jp-progress .jp-play-bar {
background: url("https://lh4.googleusercontent.com/-uP6u2I28UDk/UHt1RIvYu0I/AAAAAAAAEM0/McapzSujcRQ/s12/progress_bar_bg.png") repeat-x scroll 0 0 #EE3450;
border-right: 1px solid #1E1E1E;
height: 12px;
}
.featured-player .featured-player-button {
position: absolute;
right: 0;
top: 7px;
}
.featured-player .button-container {
border: 4px solid #272727;
border-radius: 6px;
overflow: hidden;
}
.featured-player .button {
display: block;
}
.featured-player .button span {
font-size: 15px;
line-height: 36px;
padding: 0 12px;
}
input[type="submit"], input[type="button"], .button {
background: none repeat scroll 0 0 #EE3450;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 2px;
color: #FFFFFF !important;
cursor: pointer;
display: inline-block;
position: relative;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
text-transform: uppercase;
white-space: nowrap;
word-spacing: 0.2em;
}
.button span, input[type="submit"], input[type="button"] {
font-family: 'Oswald',Arial,Helvetica,sans-serif;
line-height: 24px;
padding: 0 12px;
}
.button span {
background: url("https://lh3.googleusercontent.com/-KkpaBwF5CcY/UHt1PYpu7yI/AAAAAAAAEMQ/CgePy7q6CeM/s1/button_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
display: block;
overflow: hidden;
}
.button:hover span {
background-color: rgba(255, 255, 255, 0.05);
}
.button:active span {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.button.small {
font-size: 11px;
}
.button.large {
font-size: 1.3em;
}
---------------------------------------------------------------------------------
HTML
<div class="featured-player with-button">
<div class="background">
<div class="container" style="display: block;">
<div id="jp_container" class="jp-audio">
<div class="jp-type-playlist">
<div id="jquery_jplayer" class="jp-jplayer" style="width: 0px; height: 0px;">
<img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
<audio id="jp_audio_0" preload="metadata" src="https://dl.dropbox.com/u/105975187/Basic%20Element.mp3"></audio>
</div>
<div class="jp-gui">
<div class="jp-interface">
<div class="jp-info">
<div class="jp-title" style="display: none;">
<ul>
<li>Basic Element</li>
</ul>
</div>
<div class="jp-time">
<div class="jp-current-time">00:00</div>
<div>/</div>
<div class="jp-duration">03:09</div>
</div>
<div class="clear"></div>
<div class="jp-progress">
<div class="jp-seek-bar" style="width: 100%;">
<div class="jp-play-bar" style="width: 0%;"></div>
</div>
</div>
</div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li>
<a class="jp-previous" tabindex="1" href="javascript:;"></a>
</li>
<li>
<a class="jp-play" tabindex="1" href="javascript:;"></a>
</li>
<li>
<a class="jp-pause" tabindex="1" href="javascript:;" style="display: none;"></a>
</li>
<li>
<a class="jp-next" tabindex="1" href="javascript:;"></a>
</li>
</ul>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value" style="width: 80%;"></div>
</div>
<div class="jp-playlist">
<ul style="">
<li class="jp-playlist-current">
<div>
<a class="jp-playlist-item-remove" href="javascript:;" style="display: none;">×</a>
<a class="jp-playlist-item jp-playlist-current" tabindex="1" href="javascript:;">Basic Element</a>
</div>
</li>
<li>
<div>
<a class="jp-playlist-item-remove" href="javascript:;" style="display: none;">×</a>
<a class="jp-playlist-item" tabindex="1" href="javascript:;">On a good day</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution" style="display: none;">
<span>Update Required</span>
To play the media you will need to update your browser to a recent version.
</div>
</div>
</div>
<div class="playlist">
<a href="https://dl.dropbox.com/u/105975187/Basic%20Element.mp3">Basic Element</a>
<a href="https://dl.dropbox.com/u/105975187/On%20a%20Good%20Day.mp3">On a good day</a>
</div>
<div class="featured-player-button">
<div class="button-container ">
<a class="button" target="_blank" href="#">
<span>Download</span>
</a>
</div>
</div>
Ahi veras como lo implementas en la plantilla
.
