红心电台

前两天写了篇Audio标签的文章,想要更深入学习一下,遂决定写一个网页版音乐播放器试试(其实有更深部的动机的,不过我不告诉你们,哼哼!)。在整个网页的编写过程中,我学习到了很多的东西,感觉对jQuery又有了更新的认识。同时新接触了jQuery UI这个非常可靠的工具。不过说到底也还是新手,代码写的很脏,也没想到重构什么的,功能实现出来就好了,至于美观什么的,哈哈,你是在开玩笑么!

放上本篇文章主角:红心电台 - http://imnerd.org/lab/player

简单介绍:红心电台是一个利用HTML5制作的能够存储播放列表的在线音乐播放器。是的,没错,虽然是叫做红心电台,但是基本上也就只是一个能存播放列表的播放器而已。另外,本网页是用HTML5写的,然后由于播放的音乐基本是MP3格式的,所以只支持Webkit系的浏览器(Chrome为首)和IE9+以上的浏览器,对Firefox和Opera的用户感到抱歉了,OGG的音乐库毕竟还是挺小众的。具体浏览器支持可以看红心电台的HELP。

使用说明:

  • 1、左上角有搜索框,用户可自行添加歌曲到播放列表中。
  • 2、默认播放列表的歌曲在用户添加过歌曲后会自行清除(需要刷新页面),用户不必手动清除。
  • 3、默认支持快捷键,左右方向键为上一首下一首,空格键为暂停,Delete键为删除当前播放曲目。

如果对红心电台有什么意见或者是建议,又或者是发现了什么问题,可以随时与我联系(联系方式见关于页面),当然你也可以在本文留言,我都是可以看的到的。

利用API制作相册展页[JQuery版]

之前因为图片大,数据解析多次的原因,我的API相册展示页访问起来表示鸭梨巨大,所以我就央求了老四同学帮我写了这么一个JQ版本的。【没办法,我是JS盲o(╯□╰)o】使用之后访问起来果然什么鸭梨都木有啊!在此非常感谢老四同学在百忙之中帮我做了这么个小东西。

废话不多说,先放上相册预览地址:预览地址一 | 预览地址二

继续贴上代码【你也可以在这里找到这段代码】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head>

 


        <title></title>         

<style>
body {
        background-color:#E9E9E9;
        color:#333333;
        font-family:'Microsoft YaHei','Lucida handwriting',Arial,Helvetica,sans-serif;
        font-size:10pt;
        margin:0;
        padding:0;
        text-shadow: 0px 0px 1px #999;
        -webkit-text-size-adjust:none;
}

a,a:hover {
        color:#333333;
        text-decoration:none;
}


.photo, .album {
        display:inline-block;
        margin:5px;
        padding:10px 0;
        float:left;
    position: relative;
        text-align:center;
    background-color: #fff;
    border: 1px solid #eee;
        -webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        -moz-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        box-shadow:2px 2px 3px rgba(135,139,144,0.4);
}

.photo:before, album:before {
    -webkit-transform: skew(-25deg) rotate(-6deg);
    -moz-transform: skew(-25deg) rotate(-6deg);
    transform: skew(-25deg) rotate(-6deg);
    left: 27px;
    width: 70%;
    height: 35%;
    content: ' ';
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 7px;
    z-index: -1;
}

.album img {
        width:120px;
}

.img_title {
        margin:auto;
        display:block;
        width:160px;
        height:17px;
        overflow: hidden;
}

.img_date {
        margin:2px auto 0 auto;
        display:block;
        width:160px;
        height:17px;
        overflow: hidden;
        color:#888;
}

#back {
        display:inline-block;
        margin:5px;
        padding:10px;
        float:left;
    position: relative;
        text-align:center;
    background-color: #fff;
    border: 1px solid #eee;
        -webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        -moz-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        box-shadow:2px 2px 3px rgba(135,139,144,0.4);
        display: none;
}

#back:hover {
    background-color: #ccc;
}

</style>
        
</head><body> 
        


                

                
        
        


</body>
</html>

友情提示:本代码只是一个实例代码,请大家根据自己的需要做好相关的修改。