小辣椒 发表于 2022-7-20 21:15

谁能禁止我的爱【醉人的双吉他】（同做岁月）

<style>
#bigPa { position: relative; width: 1278px; left:-340px; height: 647px;top: 150px; background:#333 url('https://wx.ttt.dj/data/nfs/img/2IF.gif') no-repeat center/cover; box-shadow: 0 0 0 2px #1d7262;}

#gcDiv { width: 300px; float: right; }


#paDiv { position: relative; top: 500px; width: 220px; left:-250px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }


#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 22px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#lrcDiv { position: relative; top: 420px; left:-190px; color: #A4D1D7; font-size: 1em; text-shadow: 1px 1px 1px #000; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }

</style>

<div id="bigPa">
        <div id="gcDiv">
                <!-- 播放器开始 -->
                <div id="paDiv">
                        <div id="btn-ro">·</div><!-- 播放按钮 -->
                        <div id="jindu"><div id="jd-go"></div></div>
                </div>
                <!-- 播放器结束 -->
                <div id="lrcDiv">歌词同步显示</div>


          <div style="color:#fff;margin:0px;padding:10px;font-size:5px;font-family:'微软雅黑';text-shadow:1px 1px 1px #000;">
                <p style="position: absolute; left:600px; width: 400px;top:130px; color: #FFFFFF;"><marqueescrollamount="3" direction="left" ><font face="微软雅黑" size="4">吉他~~~作为摇滚乐史上最为重要的技巧之一 双吉他演奏的魅力绝对是不可比拟的 并且许多经典作品都是依靠这个演奏技巧来闻名于世界的 感谢岁月的经典分享 小辣椒同做一个</font></marquee></p>
      </div>
</div>


<script language="javascript">
var lrcAr=[
["00:00","谁能禁止我的爱"],
["10:00","【醉人的双吉他】"],
["120:00","谢谢欣赏！"]
];


var lrcDiv = document.getElementById('lrcDiv');
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
// 音乐地址放在下行引号内
aud.src = "https://wx.ttt.dj/data/nfs/mp3/snjz.mp3";
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);

function tmMsg(){ //进度条
        let auT = Math.floor(aud.duration - aud.currentTime);
        let auM = auT / 60;
        let auMs = parseInt(auM);
        if (auMs <10) auMs = "0" + auMs;
        let auS = auT % 60;
        let auSs = Math.round(auS);
        if (auSs < 10) auSs = "0" + auSs;
        jindu.innerHTML = "- " + auMs +":" + auSs;
        let jd = (100*aud.currentTime)/aud.duration;
        jindu.style.backgroundSize = jd+ "% 8px";
}

jindu.onclick = function(){ //进度控制
        let w = offset(jindu,"left");
        let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
        aud.currentTime = x;
}

function offset(obj,direction){//获取父级元素偏移总量
        let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
        let realNum = obj;
        let positionParent = obj.offsetParent;
        while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
        }
        return realNum;
}

btn.onclick = function(){ // 暂停&播放
        aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

//处理lrc歌词数组：时间转换成秒
for(j=0; j<lrcAr.length; j++){
        lrcAr = toSec(lrcAr);
}

//lrc时间信息转为秒
function toSec(lrcTime) {
        let tmpAr = lrcTime.split(':');
        lrcTime = tmpAr * 60 + parseInt(tmpAr);
        return lrcTime;
}

//同步显示歌词
aud.ontimeupdate = function() {
        let tt = this.currentTime;
        for(j=0; j<lrcAr.length; j++){
                if(tt > lrcAr) lrcDiv.innerHTML = lrcAr;
        }
}


</script>

<br> </div>
<br><br><br><br><br><br><br><br>



小辣椒 发表于 2022-7-20 21:17

谁能禁止我的爱【醉人的双吉他】
https://www.huachaowang.com/forum.php?mod=viewthread&tid=61270&fromuid=4275
(出处: 花潮论坛)


谢谢岁月树叶的粒子效果，小辣椒捣鼓一个玩玩{:4_173:}

小辣椒 发表于 2022-7-20 21:18

@走过岁月

匆匆忙忙做的，感觉这歌音乐太好听了{:4_178:}

一面做，一面欣赏，感觉好极了{:4_208:}


小辣椒 发表于 2022-7-20 21:22

岁月太喜欢你的东东了

小辣椒 发表于 2022-7-20 21:23

考虑到冬雨会来玩，这个美女我没有去了，美臀也是一种美{:4_170:}

红影 发表于 2022-7-20 21:25

亲爱的把前凸后翘也一并用上了，旁边还加了个专注欣赏的男士。真漂亮的制作{:4_199:}

小辣椒 发表于 2022-7-20 21:34

红影 发表于 2022-7-20 21:25
亲爱的把前凸后翘也一并用上了，旁边还加了个专注欣赏的男士。真漂亮的制作

亲爱的~~为冬雨准备的{:4_170:}

走过岁月 发表于 2022-7-20 21:49

小辣椒 发表于 2022-7-20 21:18
@走过岁月

匆匆忙忙做的，感觉这歌音乐太好听了


来了，小辣椒

走过岁月 发表于 2022-7-20 21:50

小辣椒 发表于 2022-7-20 21:22
岁月太喜欢你的东东了

谢谢小辣椒

樵歌 发表于 2022-7-20 21:51

哇塞！好夸张，送冬雨的吧{:4_172:}

走过岁月 发表于 2022-7-20 21:52

小辣椒 发表于 2022-7-20 21:23
考虑到冬雨会来玩，这个美女我没有去了，美臀也是一种美

呼叫冬雨，一起欣赏，我忍不住先欣赏

小辣椒 发表于 2022-7-20 21:53

走过岁月 发表于 2022-7-20 21:49
来了，小辣椒

岁月晚上好{:4_187:}

小辣椒 发表于 2022-7-20 21:54

走过岁月 发表于 2022-7-20 21:50
谢谢小辣椒

不用谢，岁月你最近很忙吧

小辣椒 发表于 2022-7-20 21:55

樵歌 发表于 2022-7-20 21:51
哇塞！好夸张，送冬雨的吧

樵哥哥是同做岁月的效果

小辣椒 发表于 2022-7-20 21:55

走过岁月 发表于 2022-7-20 21:52
呼叫冬雨，一起欣赏，我忍不住先欣赏

冬雨搞失踪了{:4_170:}

走过岁月 发表于 2022-7-20 21:55

加的人物跟美女也搭配，情投意合谁也无法禁止

走过岁月 发表于 2022-7-20 21:56

一个小蜻蜓在偷看

走过岁月 发表于 2022-7-20 21:57

小辣椒现在的每一个作品都非常的棒，赞

马黑黑 发表于 2022-7-20 21:57

电吉他声音清脆

小辣椒 发表于 2022-7-20 21:57

走过岁月 发表于 2022-7-20 21:55
加的人物跟美女也搭配，情投意合谁也无法禁止

就是，这个才是真的没有谁可以禁止{:4_170:}
页: [1] 2 3
查看完整版本: 谁能禁止我的爱【醉人的双吉他】（同做岁月）