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

百变鹏仔 3个月前 (10-19) #H5教程

文章标签插件

简要教程

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" alt="黑胶唱片风格音频播放器jQuery插件" ></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"});

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集