黑胶唱片风格音频播放器jQuery插件

colorizer是一款可以创建黑胶唱片风格音频播放器的jQuery插件。该插件通过jQuery来驱动音频的播放，并使用CSS3来制作唱片机的动画特效。

使用方法

在页面中引入jquery和colorizer.js文件。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/colorizer.js"></script>

HTML结构

使用下面的HTML结构来构建一个唱片机播放器。

<div class="audio">
 <div class="echolizer"></div>
 <div class="colorizer"></div>
 <div class="disk"></div>
 <img src="img/cover.jpg">
</div>

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"
});