<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>音乐播放器</title>
<link rel="stylesheet" href="css/stylesheets/style.css">
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body class="keBody">
<h1 class="keTitle">音乐播放器</h1>
<div class="kePublic">
<!--效果html开始-->
<div id="background"></div>
<div id="player">
<div class="cover"></div>
<div class="ctrl">
<div class="tag">
<strong>Title</strong>
<span class="artist">Artist</span>
<span class="album">Album</span>
</div>
<div class="control">
<div class="left">
<div class="rewind icon"></div>
<div class="playback icon"></div>
<div class="fastforward icon"></div>
</div>
<div class="volume right">
<div class="mute icon left"></div>
<div class="slider left">
<div class="pace"></div>
</div>
</div>
</div>
<div class="progress">
<div class="slider">
<div class="loaded"></div>
<div class="pace"></div>
</div>
<div class="timer left">0:00</div>
<div class="right">
<div class="repeat icon"></div>
<div class="shuffle icon"></div>
</div>
</div>
</div>
</div>
<ul id="playlist"></ul>
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/index.js"></script>
<!--效果html结束-->
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
font: 14px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: #333;
color: #ff3c3c;
}
a {
outline: none;
text-decoration: none;
}
.button {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding:0.25em 0.6em 0.3em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));
background: -moz-linear-gradient(top, #ed1c24, #A51715);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
background: #b61318;
background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
background: -moz-linear-gradient(top, #c9151b, #a11115);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
color:#fff;
}
.red:active {
color: #de898c;
background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
background: -moz-linear-gradient(top, #aa1317, #ed1c24);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
.cor_bs,.cor_bs:hover{
color:#fff;
}
.keTitle{
height:50px;
line-height:120px;
font-size:30px;
font-family:'微软雅黑';
color:#FFF;
text-align:center;
/*background:url(../images/bodyBg3.jpg) repeat-x bottom left;*/
font-weight:normal
}
.kePublic{
background:#302f37;
padding:50px;
}
.keBottom{
color:#FFF;
padding-top:25px;
line-height:28px;
text-align:center;
font-family:'微软雅黑';
background:url(../images/bodyBg2.jpg) repeat-x top left;
padding-bottom:25px
}
.keTxtP{
font-size:16px;
color:#fff;
}
.keUrl{
color:#FFF;
font-size:30px;
}
.keUrl:hover{
text-decoration: underline;
color: #FFF;
}
.mKeBanner,.mKeBanner div{
text-align:center;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
/*#background {*/
/*background-size: cover;*/
/*position: fixed;*/
/*top: 0;*/
/*left: 0;*/
/*width: 100%;*/
/*height: 100%;*/
/*-moz-user-select: none;*/
/*-khtml-user-select: none;*/
/*-webkit-user-select: none;*/
/*-o-user-select: none;*/
/*user-select: none;*/
/*}*/
#player {
width: 500px;
height: 120px;
padding: 25px;
margin: 50px auto 30px;
position: relative;
}
#player .cover {
background: rgba(0, 0, 0, 0.5);
border: 1px solid #ccc;
position: absolute;
top: 25px;
left: 25px;
overflow: hidden;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 30px;
width: 130px;
height: 130px;
-moz-box-shadow: 0 2px 10px black;
-webkit-box-shadow: 0 2px 10px black;
-o-box-shadow: 0 2px 10px black;
box-shadow: 0 2px 10px black;
}
#player .cover img {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
width: 130px;
height: 130px;
}
#player .ctrl {
margin-left: 155px;
text-shadow: 0 1px 2px #000;
line-height: 16px;
}
#player .ctrl .tag strong, #player .ctrl .tag span {
display: block;
text-overflow: ellipsis;
}
#player .ctrl .tag span {
font-size: 12px;
margin-top: 5px;
color: #ccc;
}
#player .ctrl .icon {
background-repeat: no-repeat;
background-position: center;
display: inline-block;
opacity: 0.6;
cursor: pointer;
width: 24px;
height: 24px;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
#player .ctrl .icon:hover, #player .ctrl .icon.enable {
opacity: 1;
}
#player .ctrl .icon:active {
opacity: 0.3;
}
#player .ctrl .control {
margin-top: 10px;
height: 25px;
}
#player .ctrl .control .rewind {
background-image: url(../images/rewind.png);
}
#player .ctrl .control .playback {
background-image: url(../images/play.png);
}
#player .ctrl .control .playback.playing {
background-image: url(../images/pause.png);
}
#player .ctrl .control .fastforward {
background-image: url(../images/fastforward.png);
}
#player .ctrl .control .volume .mute {
background-image: url(../images/volume.png);
}
#player .ctrl .control .volume .mute.enable {
background-image: url(../images/mute.png);
}
#player .ctrl .control .volume .slider {
margin-top: 11px;
margin-left: 10px;
width: 100px;
}
#player .ctrl .progress {
margin-top: 10px;
}
#player .ctrl .progress .timer {
font-size: 12px;
color: #ccc;
margin-top: 8px;
}
#player .ctrl .progress .repeat, #player .ctrl .progress .shuffle {
background-position: center bottom;
}
#player .ctrl .progress .repeat {
background-image: url(../images/repeat.png);
}
#player .ctrl .progress .repeat.once, #player .ctrl .progress .repeat.all {
opacity: 1;
}
#player .ctrl .progress .repeat.once {
position: relative;
}
#player .ctrl .progress .repeat.once:before {
content: "1";
position: absolute;
top: 3px;
right: -2px;
font-size: 8px;
}
#player .ctrl .progress .shuffle {
background-image: url(../images/shuffle.png);
}
.slider {
background: rgba(0, 0, 0, 0.3);
height: 5px;
position: relative;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}
.slider:hover a, .slider.enable a {
opacity: 1;
}
.slider a {
background: #fff;
margin-left: -2.5px;
position: absolute;
opacity: 0;
width: 5px;
height: 5px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
-moz-transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.slider .loaded, .slider .pace {
position: absolute;
height: 100%;
opacity: 0.7;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.slider .loaded {
background: rgba(255, 255, 255, 0.1);
}
.slider .pace {
background: #258fb8;
}
#playlist {
background: rgba(0, 0, 0, 0.5);
width: 450px;
margin: 0 auto 50px;
padding: 10px 15px;
list-style: none;
position: relative;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 30px;
-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
#playlist li {
color: #aaa;
font-size: 12px;
line-height: 2;
padding-left: 25px;
cursor: pointer;
text-overflow: ellipsis;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#playlist li:hover {
color: #fff;
}
#playlist li.playing {
background: url(../images/playing.png) no-repeat 0 center;
color: #fff;
font-weight: bold;
}
footer {
position: relative;
font-size: 12px;
color: white;
margin-top: 160px;
text-shadow: 0 1px 2px #000;
text-align: center;
}
footer a {
color: #fff;
font-weight: bold;
}
footer a:hover {
text-decoration: none;
}
(function($){
// Settings
var repeat = localStorage.repeat || 0,
shuffle = localStorage.shuffle || 'false',
continous = true,
autoplay = true,
playlist = [
{
title: '薛明媛 - 非酋',
artist: '薛明媛',
album: '薛明媛 - 非酋.mp3',
cover:'img/4.jpg',
mp3: 'mp3/薛明媛 - 非酋.mp3',
ogg: ''
},
{
title: 'The Black Eyed Peas - The Apl Song',
artist: 'The Black Eyed Peas',
album: 'The Black Eyed Peas - The Apl Song dj.mp3',
cover: 'img/7.jpg',
mp3: 'mp3/The Black Eyed Peas - The Apl Song.mp3',
ogg: ''
},
{
title: '高安 - 花桥流水',
artist: '高安',
album: '高安 - 花桥流水 dj.mp3',
cover: 'img/8.jpg',
mp3: 'mp3/高安 - 花桥流水.mp3',
ogg: ''
},
{
title: '梅林组合 - 那达慕',
artist: '梅林组合',
album: '梅林组合 - 那达慕 dj.mp3',
cover: 'img/5.jpg',
mp3: 'mp3/梅林组合 - 那达慕.mp3',
ogg: ''
},];
// Load playlist 播放列表
for (var i=0; i<playlist.length; i++){
var item = playlist[i];
$('#playlist').append('<li>'+item.artist+' - '+item.title+'</li>');
}
var time = new Date(),
currentTrack = shuffle === 'true' ? time.getTime() % playlist.length : 0,
trigger = false,
audio, timeout, isPlaying, playCounts;
var play = function(){
audio.play();
$('.playback').addClass('playing');
timeout = setInterval(updateProgress, 500);
isPlaying = true;
}
var pause = function(){
audio.pause();
$('.playback').removeClass('playing');
clearInterval(updateProgress);
isPlaying = false;
}
// Update progress更新前进
var setProgress = function(value){
var currentSec = parseInt(value%60) < 10 ? '0' + parseInt(value%60) : parseInt(value%60),
ratio = value / audio.duration * 100;
$('.timer').html(parseInt(value/60)+':'+currentSec);
$('.progress .pace').css('width', ratio + '%');
$('.progress .slider a').css('left', ratio + '%');
}
var updateProgress = function(){
setProgress(audio.currentTime);
}
// Progress slider 滚动条前进
$('.progress .slider').slider({step: 0.1, slide: function(event, ui){
$(this).addClass('enable');
setProgress(audio.duration * ui.value / 100);
clearInterval(timeout);
}, stop: function(event, ui){
audio.currentTime = audio.duration * ui.value / 100;
$(this).removeClass('enable');
timeout = setInterval(updateProgress, 500);
}});
// Volume slider音量滚动条
var setVolume = function(value){
audio.volume = localStorage.volume = value;
$('.volume .pace').css('width', value * 100 + '%');
$('.volume .slider a').css('left', value * 100 + '%');
}
var volume = localStorage.volume || 0.5;
$('.volume .slider').slider({max: 1, min: 0, step: 0.01, value: volume, slide: function(event, ui){
setVolume(ui.value);
$(this).addClass('enable');
$('.mute').removeClass('enable');
}, stop: function(){
$(this).removeClass('enable');
}}).children('.pace').css('width', volume * 100 + '%');
$('.mute').click(function(){
if ($(this).hasClass('enable')){
setVolume($(this).data('volume'));
$(this).removeClass('enable');
} else {
$(this).data('volume', audio.volume).addClass('enable');
setVolume(0);
}
});
// Switch track 转换轨道
var switchTrack = function(i){
if (i < 0){
track = currentTrack = playlist.length - 1;
} else if (i >= playlist.length){
track = currentTrack = 0;
} else {
track = i;
}
$('audio').remove();
loadMusic(track);
if (isPlaying == true) play();
}
// Shuffle 拖拽
var shufflePlay = function(){
var time = new Date(),
lastTrack = currentTrack;
currentTrack = time.getTime() % playlist.length;
if (lastTrack == currentTrack) ++currentTrack;
switchTrack(currentTrack);
}
// Fire when track ended 当轨道结束时
var ended = function(){
pause();
audio.currentTime = 0;
playCounts++;
if (continous == true) isPlaying = true;
if (repeat == 1){
play();
} else {
if (shuffle === 'true'){
shufflePlay();
} else {
if (repeat == 2){
switchTrack(++currentTrack);
} else {
if (currentTrack < playlist.length) switchTrack(++currentTrack);
}
}
}
}
var beforeLoad = function(){
var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;
$('.progress .loaded').css('width', (100 / (this.duration || 1) * endVal) +'%');
}
// Fire when track loaded completely
var afterLoad = function(){
if (autoplay == true) play();
}
// Load track 重复转换
var loadMusic = function(i){
var item = playlist[i],
newaudio = $('<audio>').html('<source src="'+item.mp3+'"><source src="'+item.ogg+'">').appendTo('#player');
$('.cover').html('<img src="'+item.cover+'" alt="'+item.album+'">');
$('.tag').html('<strong>'+item.title+'</strong><span class="artist">'+item.artist+'</span><span class="album">'+item.album+'</span>');
$('#playlist li').removeClass('playing').eq(i).addClass('playing');
audio = newaudio[0];
audio.volume = $('.mute').hasClass('enable') ? 0 : volume;
audio.addEventListener('progress', beforeLoad, false);
audio.addEventListener('durationchange', beforeLoad, false);
audio.addEventListener('canplay', afterLoad, false);
audio.addEventListener('ended', ended, false);
}
loadMusic(currentTrack);
$('.playback').on('click', function(){
if ($(this).hasClass('playing')){
pause();
} else {
play();
}
});
$('.rewind').on('click', function(){
if (shuffle === 'true'){
shufflePlay();
} else {
switchTrack(--currentTrack);
}
});
$('.fastforward').on('click', function(){
if (shuffle === 'true'){
shufflePlay();
} else {
switchTrack(++currentTrack);
}
});
$('#playlist li').each(function(i){
var _i = i;
$(this).on('click', function(){
switchTrack(_i);
});
});
if (shuffle === 'true') $('.shuffle').addClass('enable');
if (repeat == 1){
$('.repeat').addClass('once');
} else if (repeat == 2){
$('.repeat').addClass('all');
}
$('.repeat').on('click', function(){
if ($(this).hasClass('once')){
repeat = localStorage.repeat = 2;
$(this).removeClass('once').addClass('all');
} else if ($(this).hasClass('all')){
repeat = localStorage.repeat = 0;
$(this).removeClass('all');
} else {
repeat = localStorage.repeat = 1;
$(this).addClass('once');
}
});
$('.shuffle').on('click', function(){
if ($(this).hasClass('enable')){
shuffle = localStorage.shuffle = 'false';
$(this).removeClass('enable');
} else {
shuffle = localStorage.shuffle = 'true';
$(this).addClass('enable');
}
});
})(jQuery);
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
