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

寻仙丹

<style>
.papa { left: -214px; width: 1024px; height: 600px; background: purple url('https://img-baofun.zhhainiao.com/fs/65b29847343a021ea5b504dd781851b5.jpg') no-repeat center/cover; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; width: 50%; height: 100%; transition: all 2s linear; }
.papa::before { background: tan url('http://pic1.bbzhi.com/huahuibizhi/meilisuihuabuzhijianjiedanyaxi/flower_flower_pattern_fresh_simple_19186_1.jpg')no-repeat center/cover; }
.papa::after { left: 50%; background: tan url('http://pic1.bbzhi.com/huahuibizhi/meilisuihuabuzhijianjiedanyaxi/flower_flower_pattern_fresh_simple_19186_1.jpg')no-repeat center/cover; }
.papa:hover::before { transform: translate(-100%); }
.papa:hover::after { transform: translate(100%); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: lightblue; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1000; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>

<div class="papa">
        <div class="playbox">
                <p id="geci" style="font-size: 1.2em">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%</span>
                </p>
        </div>
        <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=225522510&.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默涵版) - 蔷薇团长'],
        ['0.03','词：蓝朵儿'],
        ['0.04','曲：张世彬'],
        ['0.05','编曲：大虎'],
        ['0.06','合声：凌菲'],
        ['0.07','混音：孙世兴'],
        ['0.08','制作人：笑天'],
        ['0.10','宣发：张丹娴/廖文婷'],
        ['1.02','统筹：唐欣宇'],
        ['1.03','监制：胡伟'],
        ['1.04','LRC编辑：醉美水芙蓉'],
        ['1.08','踏千山 寻隐士'],
        ['3.08','我的病无药可医'],
        ['5.09','你的爱是仙丹'],
        ['8.02','却像风了无踪迹'],
        ['10.03','对白：'],
        ['10.08','哎 我说这位仙女 你要去往何处哦'],
        ['15.01','我要去寻仙丹'],
        ['18.03','踏千山 寻隐士'],
        ['20.05','我的病无药可医'],
        ['22.06','你的爱是仙丹'],
        ['24.09','却像风了无踪迹'],
        ['26.08','过万水 寻高人'],
        ['28.09','我的病无药可医'],
        ['30.10','早知相思有晚期'],
        ['33.03','不如化作风随你而去'],
        ['39.09','只须寥寥几笔'],
        ['41.09','勾勒心中的你'],
        ['44.00','天气不怀好意'],
        ['45.09','一场雪渲染相思'],
        ['48.01','只须痴痴想你'],
        ['49.10','听一首伤感单曲'],
        ['52.03','音符不怀好意'],
        ['54.02','偷窥一场梨花雨'],
        ['56.00','踏千山 寻隐士'],
        ['58.01','我的病无药可医'],
        ['60.02','你的爱是仙丹'],
        ['62.05','却像风了无踪迹'],
        ['64.03','过万水 寻高人'],
        ['66.04','我的病无药可医'],
        ['70.09','不如化作风随你而去'],
        ['98.03','只须寥寥几笔'],
        ['100.03','勾勒心中的你'],
        ['102.04','天气不怀好意'],
        ['108.03','听一首伤感单曲'],
        ['112.06','偷窥一场梨花雨'],
        ['114.04','踏千山'],
        ['116.04','踏千山 寻隐士'],
        ['118.06','我的病无药可医'],
        ['120.07','你的爱是仙丹'],
        ['123.00','却像风了无踪迹'],
        ['124.08','过万水 寻高人'],
        ['126.09','我的病无药可医'],
        ['129.00','早知相思有晚期'],
        ['131.04','不如化作风随你而去'],
        ['137.04','踏千山 寻隐士'],
        ['139.04','我的病无药可医'],
        ['141.05','你的爱是仙丹'],
        ['143.09','却像风了无踪迹'],
        ['145.07','过万水 寻高人'],
        ['147.08','我的病无药可医'],
        ['149.09','早知相思有晚期'],
        ['152.02','不如化作风随你而去'],
        ['160.06','谢谢欣赏！']
       
];

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 = (sec) => {
        if(!sec) return '0:00';
        sec = parseInt(sec);
        return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
</script>

加林森 发表于 2022-6-30 22:52

制作挺好的。加油！

马黑黑 发表于 2022-6-30 23:04

仙女寻仙丹，我耳朵不好，听成了仙女寻咸蛋了{:4_170:}

亚伦影音工作室 发表于 2022-6-30 23:07

这个不错，学习一下。

辫子哥哥 发表于 2022-7-1 00:05

这一点自动开屏

红影 发表于 2022-7-1 09:53

开门见美人。欣赏水芙蓉美妙制作{:4_187:}

醉美水芙蓉 发表于 2022-7-1 20:44

加林森 发表于 2022-6-30 22:52
制作挺好的。加油！

谢谢队长支持！

加林森 发表于 2022-7-1 20:45

醉美水芙蓉 发表于 2022-7-1 20:44
谢谢队长支持！

不客气的。{:4_190:}

醉美水芙蓉 发表于 2022-7-1 20:45

马黑黑 发表于 2022-6-30 23:04
仙女寻仙丹，我耳朵不好，听成了仙女寻咸蛋了

老师可能这个仙丹两个字容易让人误会！

醉美水芙蓉 发表于 2022-7-1 20:46

亚伦影音工作室 发表于 2022-6-30 23:07
这个不错，学习一下。

谢谢亚伦老师支持！

醉美水芙蓉 发表于 2022-7-1 20:46

辫子哥哥 发表于 2022-7-1 00:05
这一点自动开屏

辫子版主看得很仔细！

醉美水芙蓉 发表于 2022-7-1 20:47

红影 发表于 2022-7-1 09:53
开门见美人。欣赏水芙蓉美妙制作

谢谢红影美女支持！

马黑黑 发表于 2022-7-1 21:39

醉美水芙蓉 发表于 2022-7-1 20:45
老师可能这个仙丹两个字容易让人误会！

对我来说，咸蛋比仙丹珍贵，没事{:4_170:}

红影 发表于 2022-7-1 22:22

醉美水芙蓉 发表于 2022-7-1 20:47
谢谢红影美女支持！

问好水芙蓉，周末快乐{:4_187:}
页: [1]
查看完整版本: 寻仙丹