伤了你的心的我伤心(DJ波仔版) 歌手：孟庭苇

亚伦影音工作室 发表于 2025-6-2 12:59

本帖最后由亚伦影音工作室于 2025-6-2 19:05 编辑 <br /><br /><style type="text/css">
#bj{position: relative;width: 1286px;height: 720px;background:#000 url(https://pic1.imgdb.cn/item/6824a19658cb8da5c8f1b56e.jpg)no-repeat center/cover;box-shadow: 0px 0px 0px #000;overflow:hidden;left: -300px;-opt: .2;}

#gp{position: absolute;width: 286px; height: 286px; border-radius: 50%; left: 57px; top:57px;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);animation: rang 6s infinite linear;}
@keyframes rang { to { transform: rotate(360deg); } }
.overlay {content: '';left: 0px;top: 0px;position: absolute;width: 286px;height: 286px;background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 65%, transparent);border-radius: 50%;}
#gp:after {position: absolute;top: 50%; left: 50%;margin: -38px;border: solid 1px #aaa;width: 76px; height: 76px;border-radius: 50%;box-shadow: 0 0 0 8px #000078, inset 0 0 0 30px #000078;background: #000;content: '';}
#quanm{position: absolute;width: 300px; height: 300px; left: 55%; top:15%;}
#bfq{position: absolute;width: 90%; height: 60px; left: 5%; bottom: 4px;z-index: 2;overflow:hidden;border-radius:8px;background: url('https://pic.imgdb.cn/item/66bdf24ed9c307b7e9883039.png')no-repeat center / cover}
.center-button-container {position: absolute;top:14px; left:75%; width: 2%;cursor:pointer;}
.mode { background-image: url(""); float: left; width: 70px; height: 60px;opacity: 0; }
#speed {position: absolute; left: 74%;top: 19px;color:#fff;font: 400 1.2em 楷体;width: 70px;z-index: -1;}
#mylist {position: absolute; left: 50%; top:20%; color:#00ff00; width:320px;height:200px;font: 400 1.5em/2em 楷体;}
#mylist a { text-decoration: none; cursor:pointer;color:#00ff00; }
#mylist a:hover { color:#fff000; }
#geci{ --motion: cover2; --tt: 2s;--state: paused; --bg: #ff0000;transform: translate(-50%); position: absolute;top: 75%; left: 50%; font: 600 3em sans-serif; color: snow; white-space: pre;-webkit-background-clip: text; filter: drop-shadow(0px 0px 2px hsla(0, 0%, 0%, 1));}
#geci::before { position: absolute; content: attr(data-geci); width: 20%;height: 100%; color: transparent;overflow: hidden;white-space: pre; background: var(--bg); filter: inherit;
-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#mylrc{width:80%;line-height:30px;margin:45% auto;padding:0px;position:absolute;margin-left:10%;}
#mylrc span{display:block;overflow:hidden;color:black;font-size:0.7cm;font-family:迷你简中倩}
#wzsd1 { animation: wzsd 1.86s linear infinite ; }
@keyframes wzsd {
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%);}}
#sj { position: absolute; font: normal 14px sans-serif;color:#fff; bottom: 24px;right:12%;}
#jd {position: absolute;width: 62%; height:8px;cursor:pointer;bottom: 27px;left:11%;border-radius:2px ;}
#jindu {position: absolute;LEFT:0px;top:0px;--track: #555;--prog: #fff;}
#track { fill: none; stroke: var(--track); }
#prog { fill: none; stroke: var(--prog); }
#btn{ position:absolute;width:25px;height:25px;top:14px;left:58px;cursor:pointer;}
#btn::before,#btn::after{position:absolute;width:25px;height:25px;left:0%;content:'';background:#fff;clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);}
#btn::before{width:25px;height:25px;left:0%;opacity:var(--play);background:#fff;clip-path: polygon(75% 50%, 0 0, 0 100%);}
#btn::after{width:25px;height:25px;opacity:var(--pause);}
#btn:hover {transform:scale(1.2) }
#xq{position:absolute;top:18px;left:96px;width:18px;height:18px;cursor:pointer;background:#fff;clip-path: polygon(70% 50%, 70% 0%, 100% 0, 100% 100%, 70% 100%, 70% 50%, 0 100%, 0 0);}
#xq:hover{transform:scale(1.2)}
#sq{position:absolute;top:18px;left:22px;width:18px;height:18px;cursor:pointer;background:#fff;clip-path: polygon(30% 0%, 30% 50%, 100% 0, 100% 100%, 30% 50%, 30% 100%, 0 100%, 0 0);}
#sq:hover{transform:scale(1.2)}
#cd{position:absolute;top:18px;right:9%;display: inline-block;width: 16px;height: 3px;padding: 3px 0;border-top: 3px solid;border-bottom: 3px solid;
background:#ddd;color:#ddd;background-clip: content-box;}
#cd:hover {transform:scale(1.2)}
#bj:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; bottom: 35px; right:1.6%;font:400 1.2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 11}
</style>
<style>
#bt{ --w: 63%; width: var(--w); overflow: hidden; color: #00ffff; position: absolute; left:45%;top:2%;font-size: 18px;cursor:pointer;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 26s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<divid="bj">
<divid="img1"></div>
<div id="quanm">
<svg id="jindu" width="400" height="400">
<g id="circle_wrap" transform="rotate(-90, 200, 200)" style="cursor: pointer;">
<circle id="track" cx="200" cy="200" r="150" stroke-width="8" />
<circle id="prog" cx="200" cy="200" r="150" stroke-width="5" /></g></svg>
<div id="gp"><div class="overlay"></div></div>
</div>
<div id="bfq">
<span id="sj">00:00 | 00:00</span>

<divid="jd"></div>
<divid="btn"title="播放/暂停"></div>
<div id="xq"title="下曲"></div>
<div id="sq"title="上曲"></div>
<div id="cd" ></div>
<span id="fullscreen">全屏显示</span>
<div class="center-button-container">
<div id="playMode" class="center-icon mode"><imgsrc="https://pic1.imgdb.cn/item/6760d883d0e0a243d4e509eb.png" alt="" /></div>
</div>
<div id="speed" ></div>
</div>
<div id="mylist"></div>
<div id="geci"></div>
<div id="mylrc">
<div id="wzsd1"><span id="geci1" style="color:#ff00ff;text-align:left; "></span></div> <span id="geci2"style="color:#00ff00;text-align:right"></span></div>
<div id="bt"><div>

</div>
<script>
var xmhy = [
["https://aod.cos.tx.xmcdn.com/storages/304e-audiofreehighqps/49/CA/GMCoOR8JwHQCACAAAAK0WNSh.m4a","伤了你的心的我伤心(DJ波仔版)-孟庭苇 ",` 伤了你的心的我伤心(DJ波仔版)
歌手：孟庭苇
帖赠：冬天的雨
三月的花都已经凋谢了
四月星星坠落你眼睛
五月的雨为你下不停
六月天空轻轻在哭泣
等到七月开始下雪
我知道我这次
真的真的伤了你的心
怎么让你伤心伤了你的心
我的心好伤心
怎么让你伤心伤了你的心
我的心好伤心
找不到你
我的世界不再美丽
找不到你
我的世界不再美丽
。。。。。。
三月的花都已经凋谢了
四月星星坠落你眼睛
五月的雨为你下不停
六月天空轻轻在哭泣
等到七月开始下雪
我知道我这次
真的真的伤了你的心
怎么让你伤心伤了你的心
我的心好伤心
怎么让你伤心伤了你的心
我的心好伤心
找不到你
我的世界不再美丽
找不到你
我的世界不再美丽
。。。。。。
`],
["https://s2.ananas.chaoxing.com/sv-w9/audio/7a/c9/46/af9206cf7bbf39811244e19c928a942b/audio.mp3","如果我告别-小铃铃",`如果我告别-小铃铃
作词：小米
作曲：甜仔
编曲：迟青松
混音：彭思文
如果我告别
有谁把我等待
你是否理解
你是否能明白
如果我告别
有谁把我等待
你是否理解
你是否会关怀
也许我告别
将不会再回来
你是否理解
你是否真明白
也许我闭眼
将不会再睁开
你是否理解
我不舍的情怀
如果我告别
有谁把我等待
你是否理解
你是否能明白
如果我告别
有谁把我等待
你是否理解
你是否会关怀
也许我告别
将不会再回来
你是否理解
你是否真明白
也许我闭眼
将不会再睁开
你是否理解
我不舍的情怀
也许我告别
将不会再回来
你是否理解
你是否真明白
也许我闭眼
将不会再睁开
你是否理解
我不舍的情怀`],
["https://s2.ananas.chaoxing.com/sv-w8/audio/75/36/22/d2c783fc88063f4cd0e823b4d7514e99/audio.mp3","不愿和你再相遇-肖雨蒙",`不愿和你再相遇
演唱：肖雨蒙
作词：刘子祥
作曲：刘子祥
编混：艺朵朵文化
和声：雪无影
推广：艺朵朵文化
制作人：刘子祥
出品人：刘子祥
OP/SP：艺朵朵文化
昨日的你就这样离去
我落下了伤心的泪滴
那些点点滴滴
都变成了回忆
就像冷风
阵阵刺痛我的心里
为何一切不能再继续
你像云朵随着风散去
如果时间倒流
不愿和你再相遇
我的心已经被你
伤的彻底
真心的付出全被你抛弃
对你的呵护是一场悲剧
面对这一切真的无能为力
从此以后不会把你提起
为何一切不能再继续
你像云朵随着风散去
如果时间倒流
不愿和你再相遇
我的心已经被你
伤的彻底
真心的付出全被你抛弃
对你的呵护是一场悲剧
面对这一切真的无能为力
从此以后不会把你提起
真心的付出全被你抛弃
对你的呵护是一场悲剧
面对这一切真的无能为力
从此以后不会把你提起`]
];

document.write('<script src="https://file.uhsea.com/2506/755e75e2a712de28102052aa6727939605.js" type="text/javascript" charset="utf-8"><\/script>');
</script>

<script>
aud.addEventListener('timeupdate', () => {
            aud.addEventListener('timeupdate', () => {jd.style.background= 'linear-gradient(90deg, #880000, #880000, #880000 '+ aud.currentTime / aud.duration * 100 + '%, #eee 0)';});
            });

let fs = true;
   fullscreen.onclick = () => {
            fs ? (fullscreen.innerText = '退出全屏', bj.requestFullscreen()) : (fullscreen.innerText = '全屏显示', document.exitFullscreen());
            fs = !fs;
   };

wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wzsd1.style.animationPlayState = 'paused');
</script>

红影发表于 2025-6-2 13:59

光盘和下面播放器都有进度条呢，而且都能操作。
欣赏亚伦老师好帖{:4_199:}

红影发表于 2025-6-2 14:01

那个菜单原来是变化歌词演示方式的，还以为是切换歌曲的呢。
好像评分后会让多行歌曲和单行歌词同时出来了，不知道是不是只有我有这样的问题{:4_173:}

老谟深虑 发表于 2025-6-2 18:10

欣赏老师的新代码，晚上好！

老谟深虑 发表于 2025-6-2 18:12

红影发表于 2025-6-2 14:01
那个菜单原来是变化歌词演示方式的，还以为是切换歌曲的呢。
好像评分后会让多行歌曲和单行歌词同时出来了 ...

在我这里菜单是切换歌曲的，我看不到多行歌词。奇怪！

杨帆发表于 2025-6-2 20:52

视听盛宴，谢谢亚伦老师精彩分享{:4_191:}

红影发表于 2025-6-2 22:30

老谟深虑发表于 2025-6-2 18:12
在我这里菜单是切换歌曲的，我看不到多行歌词。奇怪！

嗯，有切换歌曲菜单，好像多行和单行的切换和菜单合二为一了。

页: [1]

花潮论坛's Archiver

伤了你的心的我伤心(DJ波仔版) 歌手：孟庭苇