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

PetitQ 音频/视频 2018-11-04 2.30K 0 1

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

github 地址：https://github.com/miladdavoodi/colorizer

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

已有 574 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

音频/视频

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

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

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

相关文章

简洁HTML5视频播放器UI特效

适合移动设备响应式html5音频播放器

简单干净的音乐播放器ui设计代码

发表回复取消回复

热销模板

音频/视频

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复