马黑黑 发表于 2022-6-23 12:39

蔡琴 - 渡口（与小辣椒共勉）

<style>
.papa { margin-top: 100px; left: -214px; width: 1024px; height: 600px; background: rgba(0,0,0,.4) url('/data/attachment/forum/202206/23/123646lyww7qdgkqgzd626.jpg') no-repeat center / cover; overflow: hidden; box-shadow: 0 4px 24px #000; position: relative; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 360px; 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; }
.txtbox { position: absolute; display: block; top: 10px; right: -40px; width: 40px; height: 40px; border-radius: 50%; background: black; font: 900 1.2em / 40px sans-serif; text-shadow: 1px 1px 2px #000; text-align: center; color: #eee; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes fly { to { transform: translate(-1280px); } }
</style>

<div class="papa">
        <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://music.163.com/song/media/outer/url?id=5264842.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>


let papa = document.querySelector('.papa'),
        slider = document.querySelector('#slider'),
        aud = document.querySelector('#aud'),
        per = document.querySelector('#per'),
        btnplay = document.querySelector('#btnplay'),
        geci = document.querySelector('#geci');
let slip = 2, outtxt = '渡口是路的衔接', txtar = outtxt.split('');
let setbg = () => Math.random().toString(16).substr(-6);
let lrcAr = [
        ['0.00','《渡口》'],
        ['4.00','演唱：蔡琴'],
        ['11.00','作词：席慕蓉'],
        ['16.00','作曲：杨弦'],
        ['23.60','让我与你握别'],
        ['31.16','再轻轻抽出 我的手'],
        ['38.81','知道思念 从此生根'],
        ['45.82','华年从此停顿'],
        ['54.85','热泪在心中 汇成河流'],
        ['62.72','热泪在心中 汇成河流'],
        ['73.20','(Music)'],
        ['88.98','让我与你握别'],
        ['96.65','再轻轻抽出 我的手'],
        ['104.65','是那样 万般无奈的凝视'],
        ['111.56','渡口旁 找不到'],
        ['115.60','一朵相送的花'],
        ['120.75','就把祝福 别在襟上吧'],
        ['128.17','而明日 明日又隔天涯'],
        ['139.60','(Music)'],
        ['150.90','让我与你握别'],
        ['158.55','再轻轻抽出 我的手'],
        ['166.58','是那样 万般无奈的凝视'],
        ['173.30','渡口旁 找不到'],
        ['177.30','一朵相送的花'],
        ['182.62','就把祝福 别在襟上吧'],
        ['189.75','而明日 明日又隔天涯'],
        ['203.00','歌词编辑：花潮lrc在线'],
        ['208.00','祝你好运']
];

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');
}

txtar.forEach((item,key) => {
        let span = document.createElement('span');
        span.className = 'txtbox';
        span.innerText = item;
        span.style.background = `linear-gradient(120deg, #${setbg()}, #${setbg()})`;
        span.style.animation = 'fly 8s ' + key * 0.5 + 's linear infinite';
        papa.appendChild(span);
});

setInterval(() => {
        let eles = document.querySelectorAll('.txtbox');
        eles.forEach((item) => item.style.background = `linear-gradient(120deg, #${setbg()}, #${setbg()})`);
}, 1000);

</script>

红影 发表于 2022-6-23 13:42

这渡口边还挺热闹的，等着乘船的人真不少呢{:4_173:}

红影 发表于 2022-6-23 13:43

这些变色滚动字真华丽，@小辣椒亲爱的快来看{:4_187:}

绿叶清舟 发表于 2022-6-23 15:21

这么多人口罩都不戴{:4_189:}

梦油 发表于 2022-6-23 16:47

简陋的渡口还挺热闹。

醉美水芙蓉 发表于 2022-6-23 17:10

小辣椒 发表于 2022-6-23 18:32

黑黑我现在暂时听不了，耳麦没有带，浮动字是装饰用？多了一个玩法{:4_199:}

小辣椒 发表于 2022-6-23 18:33

黑黑就是脑子里面装的东西多，一下子一个新东东出来了{:4_178:}

小辣椒 发表于 2022-6-23 18:33

晚上再上来了吃饭去了

闲言不语 发表于 2022-6-23 19:11

想起了俺的当年，有早有午有晚的等待…

樵歌 发表于 2022-6-23 19:31

这地儿貌似俺钓鱼去过的，{:4_174:}

上海朝阳 发表于 2022-6-23 19:35

红影 发表于 2022-6-23 13:42
这渡口边还挺热闹的，等着乘船的人真不少呢

典型的川中渡口，背篓特点，很清晰

马黑黑 发表于 2022-6-23 19:50

红影 发表于 2022-6-23 13:42
这渡口边还挺热闹的，等着乘船的人真不少呢

这人不算多的。100年前，我再渡口摆过粥摊，见到的情景要比这个热闹，可惜那时我没钱买智能手机拍照。

马黑黑 发表于 2022-6-23 19:51

樵歌 发表于 2022-6-23 19:31
这地儿貌似俺钓鱼去过的，

似曾相识吧。这是俺的地儿。

马黑黑 发表于 2022-6-23 20:03

红影 发表于 2022-6-23 13:42
这渡口边还挺热闹的，等着乘船的人真不少呢
它们也像渡口的过客

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

绿叶清舟 发表于 2022-6-23 15:21
这么多人口罩都不戴

100年前的照片

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

梦油 发表于 2022-6-23 16:47
简陋的渡口还挺热闹。

以前的事了

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

醉美水芙蓉 发表于 2022-6-23 17:10
好热闹！

不是现在饿渡口了

马黑黑 发表于 2022-6-23 20:05

小辣椒 发表于 2022-6-23 18:32
黑黑我现在暂时听不了，耳麦没有带，浮动字是装饰用？多了一个玩法

你不觉得这些文字是有生命的么？它们不像是渡口的过客么

马黑黑 发表于 2022-6-23 20:06

小辣椒 发表于 2022-6-23 18:33
黑黑就是脑子里面装的东西多，一下子一个新东东出来了

这个也没多新，新瓶装旧酒而已
页: [1] 2 3 4 5 6
查看完整版本: 蔡琴 - 渡口（与小辣椒共勉）