colorizer是一款可以创建黑胶唱片风格音频播放器的jQuery插件。该插件通过jQuery来驱动音频的播放，并使用CSS3来制作唱片机的动画特效。
使用方法
在页面中引入jquery和colorizer.js文件。
HTML结构
使用下面的HTML结构来构建一个唱片机播放器。
CSS样式
为唱片机使用下面的CSS样式。
body,ul,li{
margin: 0;
padding: 0;
}
body{
background: #333;
}
div.audio{
position: relative;
top: 100px;
left: 100px;
background: #eee;
width: 400px;
height: 400px;
transition: all 0.3s;
box-shadow: 33px 24px 10px 0 rgba(0, 0, 0, 0.2);
}
div.colorizer{
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 400px;
transition: all 0.3s;
z-index:3;
}
div.echolizer{
background: #fff;
position: absolute;
left: 0;
bottom: 0;
z-index:10;
width: 0;
height: 4px;
transition: all 0.3s;
}
div.audio img{
width: 400px;
}
div.disk{
background-image: url("../img/cd.png");
width: 350px;
height: 350px;
position: absolute;
right: -140px;
background-size: cover;
z-index:-1;
top: 34px;
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
border-radius: 50%;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来初始化该音频播放插件。
$.colorizer("div.colorizer", {
file: "Shahre_Man.mp3",
shadow: ".colorizer",
echolizer: ".echolizer"
});
