HTML5音乐播放器（最新升级改造加强版）

最近么，单位里面么老不顺心的，公司一直催要程序员要php，然后本宅好不容易推荐了一个，我日嘞，最后待遇变成1.3，吾师最后也同意1.3w，然后还说要考虑。。。

尼玛，4年多5年不到一点的工作经验，前端，后端php都会，标准全栈工程师！在支付宝混过1年。。我的领路人兼前端php启蒙老师。。。杀人的心都有了，搞得我也想离职了

然后么，我也被搞得没有动力，没有动力。。。最后搞了下面那个。。。。参考了草明的播放器（就是low）

low的也是不要不要的….

最后这边瞅瞅，那边翻翻，搞了下面这个玩意

这个是偶对上次的那个播放器的升级改造加强版。。。各种改，今天正好闲的蛋疼搞一下。。。

之前的播放器被喷的各种low，连个左右切换都没搞好，搞个毛啊！。。。

以及对我没有妹子的同情，到现在还是个单身狗，更有同事调戏我，让我唱

single dog, single dog, single everyday.

e av, hit the plane, they’re doing all day.

hey!

single dog, single dog, why not be a gay?

no more wait,

no more afraid,

make yourlf a gay!

。。。没办法，偶是一个有追求的程序员。偶最求的是代码的极致，效果的最佳。。吾孤高，你们不懂我的寂寞！！！

好了吐槽完毕！！！首先吗，先亮一段代码给大家瞅瞅

<p class="home"&repsnapgt;  <p class="container clearfix">    <p class="box homeheader">      <p class="title">        <h1 id="sing-name">on my own</h1>        <p></p>      </p>      <p class="musicbox clearfix">        <p class="musicplaybox">          <p class="clearfix">            <p class="musicplaypic"><img src="img/pic/tokyo.jpg" id="musicphoto" class="musicphoto" /></p>            <p class="musicsystem">              <h3 id="sing-singer">ルシュカ </h3>              <p>专辑简介：tvアニメ『東京喰種』のオリジナル・サウンドトラック。アニメ1期『東京喰種』に加え、2期『東京喰種√a』のbgmも収録。bgm全楽曲は、tvドラマ『マルモのおきて』などを手掛けたクリエイター“やまだ豊”が担当。彼のピアノから生まれるその“過激”で“琴線に触れる繊細なメロディー”が、アニメの世界観を増幅させる。《、</p>            </p>          </p>          <p class="musicplaycenter">            <p class="musicplaybutton clearfix"> <a id="playleft" class="glyphicons glyphicons-rewind fl"></a> <a id="play" class="glyphicons glyphicons-play fl"></a> <a id="playright" class="glyphicons glyphicons-forward fl"></a> <a href="" class="glyphicons glyphicons-volume-up fl"></a>              <p id="voiceslider" class="progress fl" style="margin:13px 0 0 10px;">                <p class="pace" style="width: 80%;"></p>                <a href="javascript：void(0);" style="left: 80%;"></a> </p>            </p>            <p class="progress" id="musicprogress">              <p style="width: 0%;" class="pace"></p>              <a style="left: 0%;" href="javascript：void(0);"></a> </p>            <audio id="audio"></audio>          </p>        </p>        <p class="musicboxword">          <ul>  村官待遇          <li>darkness falls on another day</li>            <li>and the light just ems so far away</li>            <li>am i here all alone</li>            <li>becau it just feels so cold</li>            <li>oh～so cold</li>            <li>is there more than what meets the eyes?</li>            <li>something higher keeping me alive</li>            <li>maybe hope buried deep within</li>            <li>here's what needed to began again </li>            <li>now i must believe in something i can not e for now</li>            <li>i am「on my own」</li>            <li>it's my will with all my might</li>            <li>to stay strong without a fight</li>            <li>i'm so lost but not afraid</li>            <li>i've been broken and rai again</li>            <li>don't give up, i've come this far</li>            <li>know what's right in my heart</li>            <li>i'll get back to my home</li>            <li>and for now i am「on my own」</li>            <li>it's my will with all my might</li>            <li>to stay strong without a fight</li>            <li>i'm so lost but not afraid</li>            <li>i've been broken and rai again</li>            <li>don't give up, i've come this far</li>            <li>know what's right in my heart</li>            <li>i'll get back to my home</li>            <li>and for now i am「on my own」</li>            <li>i am on「on my own」</li>          </ul>        </p>      </p>      <p class="lightlist">        <ul class="clearfix">          <li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li>          <li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li>          <li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i cla利害相关ss="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li>          <li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li>          <li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li>          <li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li>          <li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li>          <li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li>          <li><i class="i-1"></i> <i class="i-2"></i> <i class="i-3"></i> <i class="i-4"></i> <i class="i-5"></i> <i class="i-6"></i> <i class="i-7"></i></li>        </ul>      </p>    </p>  </p>  <p class="container clearfix">    <p class="main"></p>    <p class="aside">      <p class="wanted"><img src="img/wanted.png" width="100%" 莫言诺贝尔文学奖颁奖词/></p>    </p>  </p></p> 

实现申明歌词同步这个问题我有空搞一下。。。没办法，我觉得先要把一首歌听一遍然后一个个time搞出来要疯掉了

然后下面的那个lightlist我这个玩意嘛，我承认是看到lol 4周年的页面发现他的素材不错搞来用了

css3的一个小动画

@keyframes lightani1 { 0% { opacity: 0.5; transform: translatey(0px);}50% { opacity: 1; transform: translatey(-50px);}100% { opacity: 0; transform: translatey(-100px);}}@keyframes lightani1 { 0% { opacity: 0.5; transform: translatey(0px);}50% { opacity: 1; transform: translatey(-50px);}100% { opacity: 0; transform: translatey(-100px);}}@keyframes lightani2 { 0% { opacity: 0.5; transform: translate(0px, 0px);}50% { opacity: 1; transform: translate(-10px, -50px);}100% { opacity: 0; transform: translate(-20px, -100px);}}@keyframes lightani2 { 0% { opacity: 0.5; transform: translate(0px, 0px);}50% { opacity: 1; transform: translate(-10px, -50px);}100% { opacity: 0; transform: translate(-20px, -100px);}}@keyframes lightani3 { 0% { opacity: 0.5; transform: translate(0px, 0px);}50% { opacity: 1; transform: translate(10px, -50px);}100% { opacity: 0; transform: translate(20px, -100px);}}@keyframes lightani3 { 0% { opacity: 0.5; transform: translate(0px, 0px);}50% { opacity: 1; transform: translate(10px, -50px);}100% { opacity: 0; transform: translate(20px, -100px);}} 

好了，小东西就这点了。。。

接下来么先搞个数组列表了，把要的东西先拿出来玩玩

window.onload=function(){

var musiclist = [

{ “name”:”on my own̶右脸长痘痘的原因1;,”singer”:”ルシュカ” , “src”:”mp3/onmyown.mp3″ ,”pic”:”img/pic/tokyo.jpg”,”bigpic”:”img/pic/tokyo.jpg” },

{ “name”:”memoria”,”singer”:”藍井エイル” , “src”:”mp3/memoria.mp3″ ,”pic”:”img/pic/tokyo.jpg”,”bigpic”:”img/pic/tokyo.jpg” },

{ “name”:”onmyown” ,”singer”:”ルシュカ” , “src”:”mp3/onmyown.mp3″ ,”pic”:”img/pic/tokyo.jpg”,”bigpic”:”img/pic/tokyo.jpg” },

];

然后么设置了点东西

var player = {    nowindex: 0,    //索引初始化    playbutton: $("#play"),  //播放按钮    cover: $("#musicphoto"), //封面图    homebg: $(".homeheader"),//背景图    songword: $(".musicboxword"),//歌词    state: 0, // 0-暂停 1-播放    audio: $("#audio").get(0),

绑定了点东西

bind: function () {        //绑定按钮        //播放或暂停        var obj = this;        this.playbutton.click(function () {            obj.changestate(obj.state ? 0 : 1);        });        //设置声音        $("#voiceslider").click(function (ex) {            var percent = (ex.clientx - $(this).offt().left) / $(this).width();            obj.tvoice(percent);        });        obj.tvoice(1.0);        //设置进度        $("#musicprogress").click(function (ex) {            var percent = (ex.clientx - $(this).offt().left) / $(this).width();            obj.tprogress(percent, fal);        });        //上一首        $("#playleft").click(function () {            obj.nowindex--;            if (obj.nowindex < 0) obj.nowindex = obj.list.length - 1;            obj.playsing(obj.nowindex);            });        //下一首        $("#playright").click(function () {            obj.nowindex++;            if (obj.nowindex >= obj.list.length) obj.nowindex = 0;            obj.playsing(obj.nowindex);            player.audio.play();        });        //绑定事件 - 播放时间改变        this.audio.ontimeupdate = function () { obj.timechange(); }        //播放结束        this.audio.onended = function () { obj.singend(); }       //加载第一项        this.loadsing(this.nowindex);    },