论坛 › 欢乐水吧 › 九十九步退一步(DJ默涵版)

醉美水芙蓉 发表于 2022-5-22 08:48

九十九步退一步(DJ默涵版)

本帖最后由 醉美水芙蓉 于 2022-5-22 08:48 编辑 <br /><br /><div style="z-index: 127;width: 980px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image: url(http://chuangshicdn.data.mvbox.cn/album/22/03/06/22030621504078348949.gif); text-align: center;">
<div class="container">
      <audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=210220570" controls loop></audio>
      <div class="btn">
      <button id="bf"onclick="bf();">暂停</button>
      <button id="bf"onclick="rbf();">从新播放</button>
</div>
<div class="img_border"><img src="http://img1.oldkids.cn/upload/2020/11/25/photo_20201125104059019.jp" id="aplay"style="width: 100%; height: 100%;z-index: 1000;" ></div>
   <div class="items" >
<divclass="lrc">
      <ul id="ullrc">
         </ul>
      </div></div>
</div>

</div>
<style type="text/css">

.container{
    width: 960px;position: absolute;top:500px; left:0px;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:60px; left:80px;
}
.container .lrc{
    width: 870px;
    height: 120px;
    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:-60px; left:100px;
    margin: 0 auto;
}
.container .lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.container .lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:汉标精工粗犷体;
    font-size: 0px;
    color: #000078;transform: translate(35%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;

}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
    font-size: 50px;
    color: #ff0000;transform: translate(0%,30%);
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:980px;height:600px;margin:0px ;position: absolute;top:-500px; left:0px;-webkit-mask-image:radial-gradient(black 25% ,transparent 70%);background-size:100% 100%;background-image: url( http://image.hnol.net/c/2021-12/06/16/202112061622222765-3207088.jpg);}
.container .img_border #aplay{border:2px solid #000000;border-radius:0%; }
.container .z360z{animation: rotating 20s linear infinite ;}@keyframes rotating
{10%{background-size:100% 100%;background-image: url(http://image.hnol.net/c/2021-12/06/16/202112061622222811-3207088.jpg);}
40%{background-size:100% 100%;background-image: url(http://image.hnol.net/c/2021-12/06/16/202112061622228862-3207088.jpg);}
70%{background-size:100% 100%;background-image: url(http://image.hnol.net/c/2021-12/06/16/202112061622224973-3207088.jpg);}
99%{background-size:100% 100%;background-image: url(http://image.hnol.net/c/2021-12/06/16/202112061622227994-3207088.jpg);}
}
.audio{
    z-index: 100;
    bottom: 0;
    opacity: 0;
transition: all 2s;
width: 250px;
height: 30px;
box-shadow:0px 0px 0px 2px #000000;
border-radius:25%;position: absolute;top:480px; left:220px;
}
.audio:hover{
    opacity: 0;
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >var lrc =`魏佳艺 - 九十九步退一步(DJ默涵版)
作词：余云飞
作曲：子荣
编曲：关剑
和声：姚斯婷
混音：苏洲
制作人：余云飞
监制：胡伟、莫堂庆
LRC编辑：醉美水芙蓉
任何关系需要双方去维系
靠一方根本无法继续
我再也不要做舔狗了
我们好聚好散吧
我能我能走九十九步去爱你
也能后退一步就放弃
感情若隔着一颗心的距离
跨越不了就别浪费鼓励
对这段情做了个分析
维持现状不会有结局
一路为你撑伞我却淋雨
理所应当是你的逻辑
为这段情我已尽全力
你却不敌我万分之一
继续经营只会一败涂地
及时止损是我的转机
我能走九十九步去爱你
也能后退一步就放弃
任何关系需要双方去维系
靠一方根本无法继续
我能走九十九步去爱你
也能后退一步就放弃
感情若隔着一颗心的距离
跨越不了就别浪费鼓励
为这段情我已尽全力
你却不敌我万分之一
继续经营只会一败涂地
及时止损是我的转机
我能我能走九十九步去爱你
也能后退一步就放弃
任何关系需要双方去维系
靠一方根本无法继续
我能走九十九步去爱你
也能后退一步就放弃
感情若隔着一颗心的距离
跨越不了就别浪费鼓励
我能走九十九步去爱你
也能后退一步就放弃
任何关系需要双方去维系
靠一方根本无法继续
我能走九十九步去爱你
也能后退一步就放弃
感情若隔着一颗心的距离
跨越不了就别浪费鼓励
跨越不了就别浪费鼓励
谢谢欣赏！`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}

var lrcArray = getLrcArray();

function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}

inputLrc();

function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 60;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}

var turn = 0;

function getLrcIndex(){
    var time = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
      function rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="暂停";
      }

      function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                  audio.play(); //audio.play();// 这个就是播放
                  bf.innerText="暂停";
                } else {
                  audio.pause(); // 这个就是暂停
                  bf.innerText="播放";
                }
            }
      }
    </script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("ullrc").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("").innerHTML = ""; }else{ document.getElementById("").innerHTML = lyric;};};};}; my_audio.play();</script>

东篱闲人 发表于 2022-5-22 08:49

美！{:4_187:}

东篱闲人 发表于 2022-5-22 08:51

切换风格和音乐贼和谐。。。{:5_116:}

醉美水芙蓉 发表于 2022-5-22 09:14

东篱闲人 发表于 2022-5-22 08:49
美！

谢谢东篱老师加分鼓励！

东篱闲人 发表于 2022-5-22 09:16

醉美水芙蓉 发表于 2022-5-22 09:14
谢谢东篱老师加分鼓励！

不客气。。{:4_190:}

马黑黑 发表于 2022-5-22 09:29

漂酿

醉美水芙蓉 发表于 2022-5-22 09:34

马黑黑 发表于 2022-5-22 09:29
漂酿

谢谢黑黑老师点评！

马黑黑 发表于 2022-5-22 09:41

醉美水芙蓉 发表于 2022-5-22 09:34
谢谢黑黑老师点评！

{:4_190:}

红影 发表于 2022-5-22 10:49

这歌词非常有趣，还是头一次听呢。制作很美，淡入淡出的美丽人影{:4_187:}

加林森 发表于 2022-5-22 11:03

这个播放器换了，挺好的。赞！{:4_204:}

醉美水芙蓉 发表于 2022-5-22 12:13

红影 发表于 2022-5-22 10:49
这歌词非常有趣，还是头一次听呢。制作很美，淡入淡出的美丽人影

谢谢红影美女欣赏支持！

醉美水芙蓉 发表于 2022-5-22 12:15

加林森 发表于 2022-5-22 11:03
这个播放器换了，挺好的。赞！

是的队长，测试一下，有好几个播放不了！

加林森 发表于 2022-5-22 12:17

醉美水芙蓉 发表于 2022-5-22 12:15
是的队长，测试一下，有好几个播放不了！

嗯嗯，慢慢试，不急的。

查看完整版本: 九十九步退一步(DJ默涵版)