论坛 › 欢乐水吧 › 倾听我心 (希腊) - 瑞鸣音乐

绿叶清舟 发表于 2022-9-16 21:18

倾听我心 (希腊) - 瑞鸣音乐

<style>
#papa{left:-250px;width:1100px;height:700px;background:tan url('https://pic.imgdb.cn/item/6324721916f2c2beb1901f90.jpg') no-repeat center/cover;box-shadow:3px 3px 20px #000;display:grid;place-items:center;position:relative;z-index:1}
#mplayer{position:absolute;left:60px;bottom:0;width:300px;height:80px;user-select:none;display:grid;place-items:center;cursor:pointer}#mplayer:hover #btnwrap,#mplayer:hover #prog{transform:translateY(var(--yy))}
#mplayer:hover
#btnwrap{background:linear-gradient(to top right,rgba(0,0,255,.45),rgba(255,0,0,.35));border-radius:50%;opacity:.75}
#btnwrap,#prog{position:absolute;display:grid;place-items:center;transition:.5s}#btnwrap{--yy:-15px;width:40px;height:40px;transform:rotate(45deg);border:1px solid gray;border-radius:6px;opacity:.25}
#btnplay{width:20px;height:20px;background:rgba(255,255,255,.15);clip-path:polygon(0 0,0 100%,100% 50%)}
#btnpause{width:2px;height:20px;border-style:solid;border-width:0 4px;border-color:transparent rgba(255,255,255,.15);display:none}#prog{--yy:20px;width:300px;height:16px;border-radius:10px;background:linear-gradient(90deg,rgba(0,0,255,.45),rgba(255,0,0,.35) 100%,transparent 0);border:1px solid gray;font:400 14px / 16px sans-serif;color:gray}

.ball{--ss:0s;position:absolute;width:5px;height:5px;left:798px;top:199px;border-radius:30%;background:#eee65d;offset-distance:0;offset-path:path("M75 30 Q123 -5 140 30 Q160 75 75 140 Q-10 75 10 30 Q35 -5 75 30z");animation:move 6s var(--ss) linear infinite}
@keyframes move{to{offset-distance:100%}}
@keyframes bgMerge{from{background-position:0 0}to{background-position:-100% 0}}
</style>

<div id=papa>
<div id=mplayer><div id=btnwrap><span id=btnplay></span><span id=btnpause></span></div><div id=prog>00:00 | 00:00</div></div></div>


<script>

let aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
aud.src = 'http://music.163.com/song/media/outer/url?id=1858890451.mp3';
aud.autoplay = true;
aud.loop = true;

Array.from({length: 60}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'ball';
        ele.style.cssText += `--ss: ${key * 0.1}s; background: #${setColor()};`;
        papa.appendChild(ele);
});

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => btnstate());
aud.addEventListener('play',() => btnstate());
aud.addEventListener('timeupdate', () => {
        prog.style.background= 'linear-gradient(130deg, rgba(0,0,255,.45), rgba(255,0,0,.35) ' + aud.currentTime / aud.duration * 100 + '%, transparent 0)';//prog.offsetWidth * aud.currentTime / aud.duration) + 'px 0px';
        prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
        for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
        }
});
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 / 30), sec = parseFloat(val % 60);
        if(min < 10) min = '0' + min;
        if(sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}</script>

红影 发表于 2022-9-16 21:20

这颗心形漂亮，清舟不但调整了位置还调整了大小，很赞{:4_199:}

红影 发表于 2022-9-16 21:21

音乐很有异域风味，好听{:4_187:}

绿叶清舟 发表于 2022-9-16 21:37

红影 发表于 2022-9-16 21:20
这颗心形漂亮，清舟不但调整了位置还调整了大小，很赞

按着比例调还算容易 了{:4_189:}

红影 发表于 2022-9-16 23:32

绿叶清舟 发表于 2022-9-16 21:37
按着比例调还算容易 了

那个路径其实数字还是挺多的，清舟调得这么好，厉害{:4_187:}

醉美水芙蓉 发表于 2022-9-17 06:44

马黑黑 发表于 2022-9-17 07:46

听到夜曲，贼船上示爱的哪一类{:4_170:}

马黑黑 发表于 2022-9-17 07:46

音乐好听的说

梦缘 发表于 2022-9-17 09:53

欣赏您的精彩分享，问好！{:4_185:}

梦缘 发表于 2022-9-17 09:54

漂亮的心，感恩的听。{:4_171:}

绿叶清舟 发表于 2022-9-17 20:49

红影 发表于 2022-9-16 23:32
那个路径其实数字还是挺多的，清舟调得这么好，厉害

这个数字集中在一起的调起来方便多了

绿叶清舟 发表于 2022-9-17 20:50

梦缘 发表于 2022-9-17 09:53
欣赏您的精彩分享，问好！

谢谢梦缘，晚上好

绿叶清舟 发表于 2022-9-17 20:50

马黑黑 发表于 2022-9-17 07:46
听到夜曲，贼船上示爱的哪一类

是不是最近上错船了

马黑黑 发表于 2022-9-17 20:58

绿叶清舟 发表于 2022-9-17 20:50
是不是最近上错船了

不知道，俺又不是主角

绿叶清舟 发表于 2022-9-17 21:44

马黑黑 发表于 2022-9-17 20:58
不知道，俺又不是主角

动了一下百分比，珠子变成有点方的了

马黑黑 发表于 2022-9-17 21:48

绿叶清舟 发表于 2022-9-17 21:44
动了一下百分比，珠子变成有点方的了

50%是圆的

马黑黑 发表于 2022-9-17 21:49

绿叶清舟 发表于 2022-9-17 21:44
动了一下百分比，珠子变成有点方的了

有点方也好看

绿叶清舟 发表于 2022-9-17 21:58

马黑黑 发表于 2022-9-17 21:48
50%是圆的

开始以为动一下百分比能改变大小的了，结果是想得太美了

马黑黑 发表于 2022-9-17 22:08

绿叶清舟 发表于 2022-9-17 21:58
开始以为动一下百分比能改变大小的了，结果是想得太美了

大小修改 width 和 height，两者一致的数据

红影 发表于 2022-9-18 19:10

绿叶清舟 发表于 2022-9-17 20:49
这个数字集中在一起的调起来方便多了

是呢，位置倒是集中一起的呢{:4_173:}

查看完整版本: 倾听我心 (希腊) - 瑞鸣音乐