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"

});