醉美水芙蓉 发表于 2022-6-23 22:21

相思泪流进忘川河

本帖最后由 醉美水芙蓉 于 2022-6-23 22:22 编辑 <br /><br /> <style>
.papa { left: -214px; width: 1024px; height: 640px; background: rgba(0,0,0,.4) url('https://s1.ax1x.com/2022/06/23/jPDdwF.jpg'); overflow: hidden; position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 10px; top: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: snow; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); border-radius: 8px; overflow: hidden; box-shadow: 1px 2px 2px #000; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
.vid { position: absolute; top: -55px; width: 1024px; height: 695px; object-fit: cover; opacity: .35;}
</style>

<div class="papa">
        <video class="vid" src="http://img.tukuppt.com/video_show/2475824/00/02/18/5b536d7aa4991.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
        <div class="playbox">
                <p id="geci">LRC Loading ... </p>
                <p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
                        <input id="btnplay" type="button" value=">" />
                        <input id="slider" type="range" min="0" max="100" value="0" />
                        <span id="per">0:0 | 0:0</span>
                </p>
        </div>
        <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=223724075&.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let slider = document.querySelector('#slider'),
        aud = document.querySelector('#aud'),
        per = document.querySelector('#per'),
        btnplay = document.querySelector('#btnplay'),
        geci = document.querySelector('#geci');
let slip = 0;
let lrcAr = [
        ['0.00','蔷薇团长 - 相思泪流进忘川河(DJ默涵版)'],
        ['1.78','作词：张灵茹'],
        ['2.93','作曲：赵志伟'],
        ['3.08','编曲：孙培喜'],
        ['5.23','合声：凌菲'],
        ['7.38','混音：柒音乐工作室'],
        ['9.64','制作人：笑天'],
        ['11.79','宣发：张丹娴、廖文婷'],
        ['13.10','统筹：唐欣宇'],
        ['16.25','监制：胡伟'],
        ['18.35','OP：深圳启韵文化传媒有限公司'],
        ['20.68','我不相信爱情只是传说'],
        ['21.68','LRC编辑：醉美水芙蓉'],
        ['26.39','也不相信情花不结果'],
        ['31.21','曾经有过那么多快乐'],
        ['35.72','怎么可以突然流离失所'],
        ['40.78','如果可以再做一回选择'],
        ['45.59','我还想和你相濡以沫'],
        ['50.41','就算会有无尽的坎坷'],
        ['54.92','你依然是我今生最难舍'],
        ['59.99','相思的泪流进忘川河'],
        ['64.81','深情的承诺心头铭刻'],
        ['69.57','愿为你受尽水深火热'],
        ['74.13','只求来生来世不再错过'],
        ['79.15','相思的泪流进忘川河'],
        ['83.92','千年的时光交给寂寞'],
        ['88.79','愿为你拼尽所有执着'],
        ['93.39','来换一缕人间温暖烟火'],
        ['117.62','如果可以再做一回选择'],
        ['122.39','我还想和你相濡以沫'],
        ['127.16','就算会有无尽的坎坷'],
        ['131.68','你依然是我今生最难舍'],
        ['136.74','相思的泪流进忘川河'],
        ['141.57','深情的承诺心头铭刻'],
        ['146.33','愿为你受尽水深火热'],
        ['150.90','只求来生来世不再错过'],
        ['155.91','相思的泪流进忘川河'],
        ['160.73','千年的时光交给寂寞'],
        ['165.60','愿为你拼尽所有执着'],
        ['170.07','来换一缕人间温暖烟火'],
        ['175.19','相思的泪流进忘川河'],
        ['180.00','深情的承诺心头铭刻'],
        ['184.76','愿为你受尽水深火热'],
        ['189.28','只求来生来世不再错过'],
        ['194.35','相思的泪流进忘川河'],
        ['199.12','千年的时光交给寂寞'],
        ['203.98','愿为你拼尽所有执着'],
        ['208.49','来换一缕人间温暖烟火'],
        ['213.31','来换一缕人间温暖烟火'],
        ['218.26','谢谢欣赏！']
];

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');

aud.addEventListener('timeupdate', () => {
        let prog = 100 * aud.currentTime / aud.duration;
        slider.value = prog;
        per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
        }
});

let toMin = (val) => {
        if(!val) return '0:0';
        val = Math.floor(val);
        return parseInt(val / 60) + ':' +parseFloat(val % 60);
}

</script>

加林森 发表于 2022-6-24 07:04

水芙蓉早晨好！这个背景比较好看了。

马黑黑 发表于 2022-6-24 07:36

最近水灾频发，水芙蓉也不甘寂寞呢{:4_170:}

樵歌 发表于 2022-6-24 11:21

清泉漫过美人，歌声穿透山溪。好创作。

醉美水芙蓉 发表于 2022-6-24 11:36

本帖最后由 醉美水芙蓉 于 2022-6-24 11:37 编辑

加林森 发表于 2022-6-24 07:04
水芙蓉早晨好！这个背景比较好看了。
队长中午好！

醉美水芙蓉 发表于 2022-6-24 11:37

马黑黑 发表于 2022-6-24 07:36
最近水灾频发，水芙蓉也不甘寂寞呢

黑黑老师中午好！

醉美水芙蓉 发表于 2022-6-24 11:38

樵歌 发表于 2022-6-24 11:21
清泉漫过美人，歌声穿透山溪。好创作。

樵歌中午好！谢谢精彩点评！

加林森 发表于 2022-6-24 11:42

醉美水芙蓉 发表于 2022-6-24 11:36
队长中午好！

嗯嗯。中午好。

绿叶清舟 发表于 2022-6-24 11:58

制作真漂亮{:4_204:}

红影 发表于 2022-6-24 13:20

水芙蓉是用这条河流的奔涌来比喻忘川河吧，很漂亮的制作。水芙蓉真棒{:4_187:}

醉美水芙蓉 发表于 2022-6-24 17:31

绿叶清舟 发表于 2022-6-24 11:58
制作真漂亮

清舟美女晚上好！

醉美水芙蓉 发表于 2022-6-24 17:32

红影 发表于 2022-6-24 13:20
水芙蓉是用这条河流的奔涌来比喻忘川河吧，很漂亮的制作。水芙蓉真棒

哈哈！瞎捣鼓！

绿叶清舟 发表于 2022-6-24 17:45

醉美水芙蓉 发表于 2022-6-24 17:31
清舟美女晚上好！

芙蓉好

马黑黑 发表于 2022-6-24 19:15

醉美水芙蓉 发表于 2022-6-24 11:37
黑黑老师中午好！

{:5_106:}

红影 发表于 2022-6-24 20:49

醉美水芙蓉 发表于 2022-6-24 17:32
哈哈！瞎捣鼓！

构思很巧妙{:4_199:}

樵歌 发表于 2022-6-24 21:13

醉美水芙蓉 发表于 2022-6-24 11:38
樵歌中午好！谢谢精彩点评！

不客气哈{:4_190:}
页: [1]
查看完整版本: 相思泪流进忘川河