Tạo HTML5 Mp3 Player đơn giản

  Bài viết hay nhất1
HTML:

<audio controls="controls" id="player2" preload="none" src="http://sound30.mp3slash.net/320/indian/freakyali/02%20-%20Parinda%20Hai%20Parinda%20-%20Freaky%20Ali%20[Songs.PK].mp3" style="height: 100%; width: 100%;" type="audio/mp3">

</audio>





CSS:

.audioplayer
{
margin-top:150px;
height: 2.5em; /* 40 */
color: #fff;
font-family: "Roboto" sans-serif;
text-shadow: none;
position: relative;
z-index: 100;
background: #000;
box-shadow: 0 1px 2px rgba(0,0,0,.3);

}
.audioplayer-mini
{
width: 2.5em; /* 40 */
margin: 0 auto;
}
.audioplayer > div
{
position: absolute;
}
.audioplayer-playpause
{
width: 2.5em; /* 40 */
height: 100%;
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: 0;
left: 0;
}
.audioplayer:not(.audioplayer-mini) .audioplayer-playpause
{
border-right: 1px solid #363733;
}
.audioplayer-mini .audioplayer-playpause
{
width: 100%;
}
.audioplayer-playpause:hover,
.audioplayer-playpause:focus
{
background-color: #f05c38;
}
.audioplayer-playpause a
{
display: block;
}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a
{
width: 0;
height: 0;
border: 0.5em solid transparent; /* 8 */
border-right: none;
border-left-color: #fff;
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -0.5em 0 0 -0.25em; /* 8 4 */
}
.audioplayer-playing .audioplayer-playpause a
{
width: 0.75em; /* 12 */
height: 0.75em; /* 12 */
position: absolute;
top: 50%;
left: 50%;
margin: -0.375em 0 0 -0.375em; /* 6 */
}
.audioplayer-playing .audioplayer-playpause a:before,
.audioplayer-playing .audioplayer-playpause a:after
{
width: 40%;
height: 100%;
background-color: #fff;
content: '';
position: absolute;
top: 0;
}
.audioplayer-playing .audioplayer-playpause a:before
{
left: 0;
}
.audioplayer-playing .audioplayer-playpause a:after
{
right: 0;
}
.audioplayer-time
{
width: 4em; /* 70 */
height: 100%;
line-height: 2.375em; /* 38 */
text-align: center;
font-size:1rem;
z-index: 2;
top: 0;
}
.audioplayer-time-current
{
color:#fff;
border-right: 1px solid #363733;
left: 2.5em; /* 40 */
}
.audioplayer-time-duration
{
border-right: 1px solid #363733;
border-right-color: #363733;
right: 2.5em; /* 40 */
}
.audioplayer-novolume .audioplayer-time-duration
{
border-right: 0;
right: 0;
}
.audioplayer-bar
{
height: 0.5em; /* 14 */
background-color: #999;
cursor: pointer;
z-index: 1;
top: 50%;
right: 6.875em; /* 110 */
left: 6.875em; /* 110 */
margin-top: -0.2em; /* 7 */
}
.audioplayer-novolume .audioplayer-bar
{
right: 4.375em; /* 70 */
}
.audioplayer-bar div
{
width: 0;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.audioplayer-bar-loaded
{
background-color: #555;
z-index: 1;
}
.audioplayer-bar-played
{
background: -moz-linear-gradient(39deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(3,169,244,1)), color-stop(100%, rgba(255,0,255,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(39deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(39deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(39deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* ie10+ */
background: linear-gradient(51deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03A9F4', endColorstr='#ff00ff',GradientType=1 ); /* ie6-9 */
z-index: 2;
}
.audioplayer-volume
{
width: 2.5em; /* 40 */
height: 100%;
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 11111;
top: 0;
right: 0;
}
.audioplayer-volume:hover,
.audioplayer-volume:focus
{
background-color: #999;
}
.audioplayer-volume-button
{ background:#000;
width: 100%;
height: 100%;

}
.audioplayer-volume-button:hover,
.audioplayer-volume-button:focus
{
background-color: #f05c38;}
.audioplayer-volume-button a
{
width: 0.313em; /* 5 */
height: 0.375em; /* 6 */
display: block;
position: relative;
z-index: 1;
top: 40%;
left: 35%;
}
.audioplayer-volume-button a:before,
.audioplayer-volume-button a:after
{
content: '';
position: absolute;
}
.audioplayer-volume-button a:before
{
width: 0;
height: 0;
border: 0.5em solid transparent; /* 8 */
border-left: none;
border-right-color: #fff;
z-index: 2;
top: 50%;
right: -0.25em;
margin-top: -0.5em; /* 8 */
}
.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after
{
width: 0.313em; /* 5 */
height: 0.313em; /* 5 */
border: 0.25em double #fff; /* 4 */
border-width: 0.25em 0.25em 0 0; /* 4 */
left: 0.563em; /* 9 */
top: -0.063em; /* 1 */
-webkit-border-radius: 0 0.938em 0 0; /* 15 */
-moz-border-radius: 0 0.938em 0 0; /* 15 */
border-radius: 0 0.938em 0 0; /* 15 */
-webkit-transform: rotate( 45deg );
-moz-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
-o-transform: rotate( 45deg );
transform: rotate( 45deg );
}
.audioplayer-volume-adjust
{
height: 6.25em; /* 100 */
cursor: default;
position: absolute;
left: 0;
right: 0;
top: -9999px;
background: #111;

}
.audioplayer-volume:not(:hover) .audioplayer-volume-adjust
{
opacity: 0;
}
.audioplayer-volume:hover .audioplayer-volume-adjust
{
top: auto;
bottom: 100%;
}
.audioplayer-volume-adjust > div
{
width: 9%;
height: 80%;
background-color: #999;
cursor: pointer;
position: relative;
z-index: 1;
margin: 30% auto 0;
}
.audioplayer-volume-adjust div div
{
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: -moz-linear-gradient(89deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,0,255,1)), color-stop(100%, rgba(3,169,244,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(89deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(89deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(89deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* ie10+ */
background: linear-gradient(1deg, rgba(3,169,244,1) 0%, rgba(255,0,255,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff00ff', endColorstr='#03A9F4',GradientType=0 ); /* ie6-9 */

}
.audioplayer-novolume .audioplayer-volume
{
display: none;
}

.audioplayer-play,
.audioplayer-pause,
.audioplayer-volume a
{
-webkit-filter: drop-shadow( 1px 1px 0 #000 );
-moz-filter: drop-shadow( 1px 1px 0 #000 );
-ms-filter: drop-shadow( 1px 1px 0 #000 );
-o-filter: drop-shadow( 1px 1px 0 #000 );
filter: drop-shadow( 1px 1px 0 #000 );
}

.audioplayer-bar,
.audioplayer-volume-adjust > div
{

}
.audioplayer-volume-adjust div div,
.audioplayer-bar-played
{
-webkit-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
-moz-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
}
.audioplayer-volume-adjust
{
-webkit-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
-moz-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
}
.audioplayer *,
.audioplayer *:before,
.audioplayer *:after
{
-webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
-moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
-ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
-o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
transition: color .25s ease, background-color .25s ease, opacity .5s ease;
}



JS:

$( function() { $( 'audio' ).audioPlayer(); } );
Bạn không có quyền trả lời bài viết