基于jQuery虾米音乐播放器样式代码

分享一款基于jQuery虾米音乐播放器样式代码。这是一款基于jquery+html5实现的虾米音乐播放器源码下载。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div class="blur">
        <canvas style=" 1366px; height: 700px; opacity: 0;" width="1366" height="700"
            id="canvas">
    </div>
    <div class="playerMain">
        <div class="top">
            <a href="#" class="logo"></a>
            <div class="search">
                <div type="submit" class="searchBtn">
                </div>
                <input type="text" class="searchTxt">
            </div>
            <div class="mainNav">
                <div class="tipLogin">
                    马上 <a href="#" class="loginA">登录</a>
                </div>
                <a href="#" class="myroom"></a>
            </div>
        </div>
        <div class="middle">
            <div class="mainWrap">
                <div class="leftBar">
                    <ul class="menuUL">
                        <li class="menuLi cur"><a href="#"><i class="icon iplay"></i>正在播放 </a></li>
                        <li class="menuLi"><a href="#"><i class="icon ihst"></i>播放历史 </a></li>
                        <li class="menuLi"><a href="#"><i class="icon ishouc"></i>我收藏的单曲 </a></li>
                    </ul>
                    <div class="collectOut">
                        <span class="colS">我创建的精选集</span> <a href="#" class="colA"></a>
                    </div>
                    <div class="cellectList">
                    </div>
                    <audio id="audio" src="http://zjdx1.sc.chinaz.com/Files/DownLoad/sound1/201507/6065.mp3"></audio>
                </div>
                <div class="mainBody">
                    <div class="playHd">
                        <div class="phInner">
                            <div class="col">
                                歌曲(50)</div>
                            <div class="col">
                                演唱者</div>
                            <div class="col">
                                专辑</div>
                        </div>
                    </div>
                    <div class="playBd">
                        <div class="scrollView">
                            <!-- <div class="scroll"></div> -->
                            <ul class="songUL">
                                <li class="songList">
                                    <div class="songLMain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="1">1</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                盛夏光年</div>
                                            <div class="col colcn">
                                                陈冰</div>
                                            <div class="col">
                                                好声音第三季</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more" style="display: none"></a><a class="cicon dele"
                                                style="display: none"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="2">2</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                漂洋过海来看你(Live)</div>
                                            <div class="col colcn">
                                                刘明湘</div>
                                            <div class="col">
                                                好声音第三季</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="3">3</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                Autobots Reunite</div>
                                            <div class="col colcn">
                                                Steve Jablonsky</div>
                                            <div class="col">
                                                《变形金刚4：绝迹重生》</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="4">4</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                Halo</div>
                                            <div class="col colcn">
                                                Martin</div>
                                            <div class="col">
                                                Halo Legends: Original Soundtrack</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="5">5</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                Pearl White Story</div>
                                            <div class="col colcn">
                                                S.E.N.S</div>
                                            <div class="col">
                                                君に届け 2ND SEASON オリジナル・サウンドトラック</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="6">6</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                break the sword of justice</div>
                                            <div class="col colcn">
                                                梶浦由記</div>
                                            <div class="col">
                                                NHKアニメーション ｢ツバサ・クロニクル｣ オリジナルサウンドトラック Future Soundscape I</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="7">7</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                The children</div>
                                            <div class="col colcn">
                                                Ramin Djawadi</div>
                                            <div class="col">
                                                《权力的游戏第四季》</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="8">8</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                Pacific Rim</div>
                                            <div class="col colcn">
                                                Ramin Djawadi</div>
                                            <div class="col">
                                                《环太平洋》</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="9">9</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                四つ葉のクローバー</div>
                                            <div class="col colcn">
                                                林有三</div>
                                            <div class="col">
                                                ハチミツとクローバー オリジナルサウンドトラック</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="10">10</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                Icarus</div>
                                            <div class="col colcn">
                                                Ivan Torrent</div>
                                            <div class="col">
                                                Icarus</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList">
                                    <div class="songLmain">
                                        <div class="check">
                                            <input class="checkIn" type="checkbox" select="0">
                                        </div>
                                        <div class="start">
                                            <em sonn="11">11</em>
                                        </div>
                                        <div class="songBd">
                                            <div class="col colsn">
                                                th3 awak3n1ng</div>
                                            <div class="col colcn">
                                                Ivan Torrent</div>
                                            <div class="col">
                                                Icarus</div>
                                        </div>
                                        <div class="control">
                                            <a class="cicon love"></a><a class="cicon more"></a><a class="cicon dele"></a>
                                        </div>
                                    </div>
                                </li>
                                <li class="songList"></li>
                            </ul>
                        </div>
                    </div>
                    <div class="playFt">
                        <div class="track">
                            <div class="uiCheck">
                                <input class="checkAll" type="checkbox" select="0">
                            </div>
                            <div class="uiItem">
                                <a href="#" class="itIcon itDele">删除</a>
                            </div>
                            <div class="uiItem">
                                <a href="#" class="itIcon itShou">收藏</a>
                            </div>
                            <div class="uiItem">
                                <a href="#" class="itIcon itJin">添加到精选集</a>
                            </div>
                            <div class="uiItem">
                                <a href="#" class="itIcon itMore">更多</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mainOuther">
                    <div class="albumCover">
                        <a href="#">
                            <img src="images/2.jpg" id="canvas1">
                        </a>
                    </div>
                    <div class="albumSale">
                        <a href="#" class="asA">
                            <img src="">
                        </a>
                    </div>
                    <div id="lyr">
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="playerWrap">
                <div class="playerCon">
                    <a href="#" class="pbtn prevBtn"></a><a href="#" class="pbtn playBtn" isplay="0">
                    </a><a href="#" class="pbtn nextBtn"></a><a href="#" class="mode"></a>
                </div>
                <div class="playInfo">
                    <div class="trackInfo">
                        <a href="#" class="songName">漂洋过海来看你(Live)</a> - <a href="#" class="songPlayer">刘明湘</a>
                        <div class="trackCon">
                            <a href="#" class="tc1"></a><a href="#" class="tc2"></a><a href="#" class="tc3">
                            </a>
                        </div>
                    </div>
                    <div class="playerLength">
                        <div class="position">
                            00:00</div>
                        <div class="progress">
                            <div class="pro1">
                            </div>
                            <div class="pro2">
                                <a href="#" class="dian"></a>
                            </div>
                        </div>
                        <div class="duration">
                            03:35</div>
                    </div>
                </div>
                <div class="vol">
                    <a href="#" class="pinBtn"></a>
                    <div class="volm">
                        <div class="volSpeaker">
                        </div>
                        <div class="volControl">
                            <a href="#" class="dian2"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

via：http://www.w2bc.com/article/50094