马黑黑 发表于 2022-6-18 11:18

Dive wim me（单曲试听）

<style>
/* 帖子外层 */
.outer { left: -214px; width: 1024px; height: 600px; background: #ccc url('/data/attachment/forum/202206/18/111446h4re4j5e5x11z744.jpg') no-repeat center / cover; overflow: hidden; position: relative; }
/* 视频 */
.vid { position: absolute; top: -54px; width: 1024px; height: 655px; object-fit: cover; opacity: .25; }
/* 频谱+进度外层 */
.mama { left: 20px; bottom: 40px; width: fit-content; height: fit-content; position: absolute; cursor: pointer; border-radius: 0 100%; background: linear-gradient(transparent,green); }
/* 频谱外层 */
.wrap { width: 90px; height: 60px; box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000); position: relative; }
/* 进度显示器 */
.mama meter { width: 90px; position: relative; }
/* 频谱 */
.wrap span { width: 6px; height: 60px; bottom: -8px; display: inline-block; position: absolute; }
/* 频谱伪元素 顶帽 */
.wrap span::before { position: absolute; content: ''; width: inherit; height: 3px; background: #eee; top: -3px; animation: up 1s ease-in infinite; }
/* 歌词同步显示框 */
.lrcbox { transform: translate(20px, 20px); font: bold 1.2em / 1.5em sans-serif; color: #fff; text-shadow: 1px 1px 1px #000; position: absolute; }
/* 频谱顶帽动画 */
@keyframes up { from { top: -6px; } to { top: -16px; } }
</style>

<div class="outer">
        <video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/71/5b48ae2e6ad5d.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
        <div class="mama">
                <div class="wrap"></div>
                <meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
        </div>
        <div class="lrcbox">Loading ...</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=507134193.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let mama = document.querySelector('.mama'),
        wrap = document.querySelector('.wrap'),
        lrcbox = document.querySelector('.lrcbox'),
        aud = document.querySelector('#aud'),
        meter = document.querySelector('#meter');
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min,
        prog = (tt, cc) => 100 * cc / tt;

let lrcAr = [
        ['0.10','Dive With Me 演唱 : Lvndscape / Cathrine Lassen'],
        ['1.60','作词 : Cathrine Lassen/Peter Bjørnskov/Lene Dissing'],
        ['2.85','作曲 : Nick "LVNDSCAPE" Baas/Peter Bjørnskov/Lene Dissing'],
        ['5.06','Come fly with me<br>来吧 与我比翼翱翔'],
        ['11.54','We could run into the wild<br>我们大可冲进无际荒野'],
        ['15.96','Feel the grass beneath our feet<br>感受脚下青草的窸窣'],
        ['20.90','Let the moonlight be our guide<br>且让皎洁月光指引我们'],
        ['23.59','Just come along with me<br>和我同行吧'],
        ['29.27','We\'ll find a place by the riverside<br>我们将在河畔寻到栖身之所'],
        ['34.29','Far from the noise and the city lights<br>远离喧嚣 远离都市繁乱的灯光'],
        ['39.74','So give in, give in to love<br>所以屈服吧 顺随于这真爱'],
        ['42.31','Give in, give in to love<br>屈服吧 听从爱的旨意'],
        ['44.42','And come dive with me by the waterfall<br>来吧 和我潜入万丈瀑布旁的深涧'],
        ['49.80','Give in, give in to love<br>屈服吧 顺随于这真爱'],
        ['52.25','Give in, give in to love<br>屈服吧 听从爱的旨意'],
        ['54.65','Come fly with me by the waterfall tonight<br>来吧 今夜与我自由翱翔于瀑布旁'],
        ['64.45','Come fly with me<br>来吧 与我比翼齐飞'],
        ['74.50','Come fly with me<br>来吧 与我肆意翱翔'],
        ['80.37','Feel the raindrops on my skin<br>感受雨滴轻点在皮肤之上'],
        ['85.33','While you whisper in my ear, yeah<br>你正在我耳畔细语'],
        ['90.25','Now my body\'s shivering<br>现在我的身体不住颤抖'],
        ['92.97','There\'s magic in the air<br>空气中似有魔法'],
        ['98.64','We\'ll find a place by the riverside<br>我们将在河畔寻到栖身之所'],
        ['103.61','Far from the noise and the city lights<br>远离喧嚣 远离都市繁乱的灯光'],
        ['109.22','So give in, give in to love<br>所以屈服吧 顺随于这真爱'],
        ['111.70','Give in, give in to love<br>屈服吧 听从爱的旨意'],
        ['114.20','And come dive with me by the waterfall<br>来吧 和我潜入万丈瀑布旁的深涧'],
        ['119.16','Give in, give in to love<br>屈服吧 顺随于这真爱'],
        ['121.53','Give in, give in to love<br>屈服吧 听从爱的旨意'],
        ['123.76','Come fly with me by the waterfall tonight<br>来吧 今夜与我自由翱翔于瀑布旁'],
        ['133.71','Come fly with me<br>来吧 与我比翼齐飞'],
        ['143.59','Come fly with me<br>来吧 与我肆意翱翔'],
        ['159.70','Run away to the water<br>逃离纷繁都市 来到粼粼水边'],
        ['162.23','Run away to the water<br>逃离纷繁都市 伫立激流之畔'],
        ['164.62','Run away to the water<br>逃离纷繁都市 一睹水光潋滟'],
        ['167.16','The waterfall<br>那飞流直下的瀑布'],
        ['168.96','Give in, give in to love<br>屈服吧 顺随于这真爱'],
        ['171.04','Give in, give in to love<br>屈服吧 听从爱的旨意'],
        ['173.41','And come dive with me by the waterfall<br>来吧 和我潜入万丈瀑布旁的深涧'],
        ['178.36','Give in, give in to love<br>屈服吧 顺随于这真爱'],
        ['180.98','Give in, give in to love<br>屈服吧 听从爱的旨意'],
        ['183.04','Come fly with me by the waterfall tonight<br>来吧 今夜与我自由翱翔于瀑布旁'],
        ['193.07','Come fly with me<br>来吧 与我比翼齐飞'],
        ['202.91','Come fly with me by the waterfall tonight<br>来吧 今夜与我自由翱翔于瀑布旁'],
        ['209.18','Run away to the water<br>逃离纷繁都市 来到粼粼水边'],
        ['211.56','Run away to the water<br>逃离纷繁都市 伫立激流之畔'],
        ['213.97','Run away to the water<br>逃离纷繁都市 一睹水光潋滟'],
        ['216.45','The waterfall<br>那飞流直下的瀑布']
];

Array.from({length: 10}).forEach((ele,key) => {
        ele = document.createElement('span');
        ele.className = 'sskey';
        ele.style.left = key * 6 + key * 3 + 'px';
        ele.style.height = num(10,60) + 'px';
        ele.style.backgroundColor = `rgba(${num(0,255)},${num(0,255)},${num(0,255)},.95)`;
        wrap.appendChild(ele);
})

let sskey = document.querySelectorAll('.sskey');

mama.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
        Array.from(sskey).forEach((ele) => {
                ele.style.height = num(10, 60) + 'px';
        })
        meter.value = prog(aud.duration, aud.currentTime);
        let tt = aud.currentTime;
        for(j=0; j<lrcAr.length; j++){
                if(tt >= lrcAr){
                        lrcbox.innerHTML = lrcAr;
                }
        }
})

</script>

绿叶清舟 发表于 2022-6-18 11:41

这个好啊，可以一起显示了

马黑黑 发表于 2022-6-18 12:08

绿叶清舟 发表于 2022-6-18 11:41
这个好啊，可以一起显示了

啥和啥一起显示？

梦油 发表于 2022-6-18 13:16

黑黑朋友下午好！你的制作音、画皆上乘，无与伦比。

马黑黑 发表于 2022-6-18 13:26

梦油 发表于 2022-6-18 13:16
黑黑朋友下午好！你的制作音、画皆上乘，无与伦比。

感谢点评与支持

梦油 发表于 2022-6-18 15:08

马黑黑 发表于 2022-6-18 13:26
感谢点评与支持

黑黑朋友别客气。

马黑黑 发表于 2022-6-18 15:27

梦油 发表于 2022-6-18 15:08
黑黑朋友别客气。

应该的应该的

加林森 发表于 2022-6-18 16:19

老黑这个制作好特别。外文与中文一起出来，还是同步的。真漂亮！大赞！{:4_199:}

绿叶清舟 发表于 2022-6-18 16:19

马黑黑 发表于 2022-6-18 12:08
啥和啥一起显示？

中英文一起显示了啊

加林森 发表于 2022-6-18 16:20

这个我还得跟着学习才行的。{:4_208:}

马黑黑 发表于 2022-6-18 16:28

本帖最后由 马黑黑 于 2022-6-18 16:41 编辑

加林森 发表于 2022-6-18 16:19
老黑这个制作好特别。外文与中文一起出来，还是同步的。真漂亮！大赞！
两种语言的歌词是同一句歌词

马黑黑 发表于 2022-6-18 16:28

本帖最后由 马黑黑 于 2022-6-18 16:41 编辑

绿叶清舟 发表于 2022-6-18 16:19
中英文一起显示了啊
额，它们是同一句歌词

加林森 发表于 2022-6-18 16:40

马黑黑 发表于 2022-6-18 16:28
两种语言的歌词时同义句歌词

嗯嗯。这样大家就能听懂了。

红影 发表于 2022-6-18 17:25

这个好，中英文可以同时显示，在黑黑的帖子里总能看到惊奇{:4_187:}

红影 发表于 2022-6-18 17:26

这个是单句显示的，若是三句的那种是把中英文同时点亮的吧{:4_173:}

马黑黑 发表于 2022-6-18 17:42

红影 发表于 2022-6-18 17:26
这个是单句显示的，若是三句的那种是把中英文同时点亮的吧

不会，就是太占位置

马黑黑 发表于 2022-6-18 17:49

红影 发表于 2022-6-18 17:25
这个好，中英文可以同时显示，在黑黑的帖子里总能看到惊奇

实现原理简单的不得了：同一句歌词里放上两种语言的歌词

醉美水芙蓉 发表于 2022-6-18 19:53

马黑黑 发表于 2022-6-18 19:57

醉美水芙蓉 发表于 2022-6-18 19:53
欣赏老师佳作！

请喝茶{:4_190:}

红影 发表于 2022-6-18 21:27

马黑黑 发表于 2022-6-18 17:49
实现原理简单的不得了：同一句歌词里放上两种语言的歌词

嗯嗯，知道了，看到你加了个<br>换行{:4_173:}
页: [1] 2
查看完整版本: Dive wim me（单曲试听）