谁在窗外流泪 - 小骆驼
<style>#papa { left: -200px; width: 1280px; height: 650px; top: 150px; box-shadow: 3px 3px 20px #000; background: lightblue url('https://wj.zp68.com/lxx/yunhua/2022/09/14/liul.gif') no-repeat center/cover; user-select: none; position: relative; z-index: 2; }
#btnwrap { position: absolute; left: calc(50% - 80px); bottom: 100px; width: 100px; height: 100px; display: grid; place-items: center; }
#btnwrap span { position: absolute; transition: all 1.2s; }
#h5player { width: 100px; height: 100px; left: 520px; border-radius: 50%; background: tan conic-gradient(from 0deg, red, green, red 1%, snow 0); mask: radial-gradient(transparent 60%, red 61%, red 0); -webkit-mask: radial-gradient(transparent 60%, red 61%, red 0); }
#btnplay { left: 535px; width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); cursor: pointer; }
#btnplay:hover { background: tomato; }
#btnpause { left: 540px; width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; cursor: pointer; }
#btnpause:hover{ border-color: transparent tomato; }
#tmsg { left:560px; font: normal 16px sans-serif; color: #ddd; }
#lrctext { position: absolute; left: calc(60% + 30px); 140px; bottom: 180px; font: bold 1.5em sans-serif; color: snow; text-shadow: 1px 1px 1px #000; transition: 1.2s; }
#lrctext:hover, #tmsg:hover { color: orange; }
</style>
<div id="papa">
<div id="btnwrap">
<span id="h5player"></span><span id="btnplay"></span><span id="btnpause"></span>
<span id="tmsg">00:00<br>00:00</span>
</div>
<div id="lrctext">谁在窗外流泪 - 小骆驼</div>
</div>
<script>
let aud = new Audio();
let lrcAr = [
['00.00','谁在窗外流泪 '],
['13.73','歌手： 小骆驼'],
['25.20','曲/词：刀郎'],
['37.51','看着窗外烟雨中'],
['41.00','依旧车水马龙'],
['45.92','始终无法清晰的记起'],
['51.03','昨夜谁入梦'],
['55.44','毕竟心里也不敢轻易去碰'],
['61.00','刚愈合的痛'],
['64.82','你再忍一忍'],
['69.66','你再等一等'],
['77.15','是谁把我昨夜的泪水'],
['80.81','全装进酒杯'],
['85.50','是否能用这短短的一夜'],
['89.87','把痛化做无悔'],
['95.37','毕竟泪不是飘落在窗外'],
['99.18','无心的雨水'],
['104.58','只要被打碎'],
['108.91','就会随风飞'],
['114.91','LRC编辑：小辣椒'],
['134.95','谁在窗外流泪'],
['138.74','流的我心碎'],
['143.24','雨打窗听来这样的伤悲'],
['148.10','刹那间拥抱你给我的美'],
['152.79','尽管准备了千万种面对'],
['156.95','谁曾想会这样心碎'],
['164.36','谁在窗外流泪'],
['168.62','流得我心碎'],
['173.25','情路上一朵雨打的玫瑰'],
['178.12','凋零在爱与恨的负累'],
['182.55','就让痛与悲哀与伤化做雨水'],
['189.31','随风飘飞'],
['195.97','LRC编辑：小辣椒'],
['231.61','谁在窗外流泪'],
['235.88','流的我心碎'],
['240.81','雨打窗听来这样的伤悲'],
['245.16','刹那间拥抱你给我的美'],
['249.66','尽管准备了千万种面对'],
['253.88','谁曾想会这样心碎'],
['261.55','谁在窗外流泪'],
['265.41','流得我心碎'],
['270.19','情路上一朵雨打的玫瑰'],
['275.10','凋零在爱与恨的负累'],
['279.68','就让痛与悲哀与伤化做雨水'],
['285.98','随风飘飞'],
['291.69','随风飘飞']
];
aud.src = 'https://wj.zp68.com/lxx/yunhua/2022/09/14/liul.mp3';
aud.autoplay = true;
aud.loop = true;
btnplay.onclick = () => aud.play();
btnpause.onclick = () => aud.pause();
h5player.onmousemove = (e) => h5player.style.cursor =isHover(e.offsetX, e.offsetY) ? 'pointer' : 'default';
h5player.onclick = (e) => {
if (isHover(e.offsetX, e.offsetY)) {
let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
}
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
tmsg.innerHTML = toMin(aud.currentTime) + '<br>' + toMin(aud.duration);
h5player.style.background = 'conic-gradient(from 0deg, red, green, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
for (j = 0; j < lrcAr.length;j ++) {
if (aud.currentTime >= lrcAr) lrctext.innerHTML = lrcAr;
}
});
let isHover = (x,y) => Math.pow(x - 50, 2) + Math.pow(y - 50, 2) >= Math.pow(40, 2);
let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
<br><br><br><br><br><br><br><br><br><br> 作词：刀郎 作曲：刀郎小骆驼演唱，也是非常好的声线。我都怀疑小骆驼就是刀郎的
搜索后说是2个人的 只是图图简单了一点，一起欣赏了 宁静 发表于 2022-9-26 19:56
只是图图简单了一点，一起欣赏了
小骆驼 声音和刀郎有点相似{:10_402:}
小骆驼 是刀郎的徒弟？ 小辣椒音乐，你暴露了{:9005:} 这声音还不错！{:10_402:} 那眼泪流的好伤心。。 手机好像听不到声音，
早上好！宁静。