分享一款基于jQuery虾米音乐播放器样式代码。这是一款基于jquery+html5实现的虾米音乐播放器源码下载。效果图如下：
实现的代码。
html代码：
<div class="blur"> <canvas style="width: 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>