HTML5音樂播放器（最新升級改造加強版）

最近么，單位里面么老不順心的，公司一直催要程序員要PHP，然后本宅好不容易推薦了一個，我日嘞，最后待遇變成1.3，吾師最后也同意1.3W，然后還說要考慮。。。

尼瑪，4年多5年不到一點的工作經驗，前端，后端PHP都會，標准全棧工程師！在支付寶混過1年。。我的領路人兼前端PHP啟蒙老師。。。殺人的心都有了，搞得我也想離職了

然后么，我也被搞得沒有動力，沒有動力。。。最后搞了下面那個。。。。參考了草明的播放器（就是LOW）

https://github.com/YanMr/H5Player

Low的也是不要不要的....

最后這邊瞅瞅，那邊翻翻，搞了下面這個玩意

這個是偶對上次的那個播放器的升級改造加強版。。。各種改，今天正好閑的蛋疼搞一下。。。

之前的播放器被噴的各種LOW，連個左右切換都沒搞好，搞個毛啊！。。。

以及對我沒有妹子的同情，到現在還是個單身狗，更有同事調戲我，讓我唱

Single dog, single dog, single everyday.

See 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 yourself a gay!

。。。沒辦法，偶是一個有追求的程序員。偶最求的是代碼的極致，效果的最佳。。吾孤高，你們不懂我的寂寞！！！

好了吐槽完畢！！！首先嗎，先亮一段代碼給大家瞅瞅

<div class="Home">
  <div class="container clearfix">
    <div class="box HomeHeader">
      <div class="title">
        <h1 id="sing-name">On My Own</h1>
        <p></p>
      </div>
      <div class="musicBox clearfix">
        <div class="MusicPlayBox">
          <div class="clearfix">
            <div class="MusicPlayPic"><img src="img/pic/tokyo.jpg" id="MusicPhoto" class="MusicPhoto" /></div>
            <div class="MusicSystem">
              <h3 id="sing-singer">ルシュカ </h3>
              <p>專輯簡介：TVアニメ『東京喰種』のオリジナル・サウンドトラック。アニメ1期『東京喰種』に加え、2期『東京喰種√A』のBGMも収録。BGM全楽曲は、TVドラマ『マルモのおきて』などを手掛けたクリエイター“やまだ豊”が擔當。彼のピアノから生まれるその“過激”で“琴線に觸れる繊細なメロディー”が、アニメの世界観を増幅させる。《、</p>
            </div>
          </div>
          <div class="MusicPlayCenter">
            <div 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>
              <div id="voiceSlider" class="Progress fl" style="margin:13px 0 0 10px;">
                <div class="pace" style="width: 80%;"></div>
                <a href="javascript:void(0);" style="left: 80%;"></a> </div>
            </div>
            <div class="Progress" id="MusicProgress">
              <div style="width: 0%;" class="pace"></div>
              <a style="left: 0%;" href="javascript:void(0);"></a> </div>
            <audio id="audio"></audio>
          </div>
        </div>
        <div class="MusicBoxWord">
          <ul>
            <li>Darkness falls on another day</li>
            <li>And the light just seems so far away</li>
            <li>Am I here all alone</li>
            <li>Because 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 see 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 raise 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 raise 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>
        </div>
      </div>
      <div 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 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>
          <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>
      </div>
    </div>
  </div>
  <div class="container clearfix">
    <div class="Main"></div>
    <div class="Aside">
      <div class="Wanted"><img src="img/wanted.png" width="100%" /></div>
    </div>
  </div>
</div>

 

實現申明歌詞同步這個問題我有空搞一下。。。沒辦法，我覺得先要把一首歌聽一遍然后一個個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","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).offset().left) / $(this).width();
            obj.setVoice(percent);
        });
        obj.setVoice(1.0);
        //設置進度
        $("#MusicProgress").click(function (ex) {
            var percent = (ex.clientX - $(this).offset().left) / $(this).width();
            obj.setProgress(percent, false);
        });

        //上一首
        $("#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);
    },

最后么。。。大家還是自己看demo把