当前位置:主页 > 网页特效 > 播放器代码 >

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

发布时间:2018/08/01 来源:互联网 浏览: 关键词:jquery 播放器代码 音频播放器 colorizer 
黑胶唱片风格音频播放器jQuery插件 黑胶唱片风格音频播放器jQuery插件
阿里云
简要教程

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

使用方法

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

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

HTML结构

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

<divclass="audio">
    <divclass="echolizer"></div>
    <divclass="colorizer"></div>
    <divclass="disk"></div>
    <imgsrc="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:all0.3s;
    box-shadow:33px24px10px0rgba(0,0,0,0.2);
}
div.colorizer{
    position:absolute;
    left:0;
    top:0;
    width:400px;
    height:400px;
    transition:all0.3s;
    z-index:3;
}
div.echolizer{
    background:#fff;
    position:absolute;
    left:0;
    bottom:0;
    z-index:10;
    width:0;
    height:4px;
    transition:all0.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: rotating2s linear infinite;
    -moz-animation: rotating2s linear infinite;
    -ms-animation: rotating2s linear infinite;
    -o-animation: rotating2s linear infinite;
    animation: rotating2s 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"
});

colorizer.js插件的github地址为:https://github.com/miladdavoodi/colorizer

共有人阅读,期待你的评论!评论
Top