加林森 发表于 2022-7-3 14:51

《雨花石》- 李雨儿/石头


<style>
.papa { left: -214px; width: 1024px; height: 600px; background:
rgba(0,0,0,.4) url('https://pic.imgdb.cn/item/62c134215be16ec74a9cc820.jpg') no-repeat center/cover; position: relative; overflow: hidden; }
.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: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1; }
.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; }
.vid { position: absolute; top: -55px; width: 1024px; height: 652px; object-fit: cover; opacity: 0.2; }
</style>

<div class="papa">
      <video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/08/27/5d1c46da8a9e4.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
      <div class="playbox">
                <p id="geci">☆☆雨花石 - 李雨儿/石头☆☆ </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://music.163.com/song/media/outer/url?id=274472.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 = [
      ['3.88','雨花石- 李雨儿 / 石头'],
        ['6.39','所属专辑：雨花石'],
        ['28.93','雨儿：雨儿轻轻飘 心儿似火烧那是谁的泪 在脸上轻轻绕'],
        ['42.62','石头：石对雨的爱 就像蓝的海'],
        ['49.75','虽有万千语 不知怎么去表白'],
        ['59.02','雨儿：嗨！你在哪儿'],
        ['64.51','嗨！我看不见~'],
        ['76.51','石头：我是一颗小小的石头'],
        ['83.90','深深的埋在泥土之中'],
        ['91.02','雨儿：你的影子已看不清'],
        ['97.30','我还在寻觅当初你的笑容'],
        ['104.56','石头：我是一颗小小的石头'],
        ['111.80','深深的埋在泥土之中'],
        ['119.11','雨儿：千年以后繁华落幕'],
        ['125.74','我还在风雨之中为你等候'],
        ['132.61','石头：我还在土中为你守候'],
        ['175.35','石头：石对雨的爱 就像蓝的海'],
        ['182.02','虽有万千语 不知怎么去表白'],
        ['191.02','雨儿：嗨！你在哪儿'],
        ['193.27','嗨！我看不见~~'],
        ['206.85','石头：我是一颗小小的石头'],
        ['216.06','深深的埋在泥土之中'],
        ['223.38','雨儿：你的影子已看不清'],
        ['229.76','我还在寻觅当初你的笑容'],
        ['237.01','石头：我是一颗小小的石头'],
        ['244.38','深深的埋在泥土之中'],
        ['251.61','雨儿：千年以后繁华落幕'],
        ['258.07','我还在风雨之中为你等候'],
        ['264.74','石头：我还在土中为你守候'],
        ['270.26','雨儿：守~候~'],
        ['276.37','石头：我是一颗小小的石头'],
        ['283.24','深深的埋在泥土之中'],
        ['290.35','雨儿：千年以后繁华落幕'],
        ['296.96','我还在风雨之中为你等候'],
        ['301.00','石头：为你守候~'],
        ['303.82','合：我还在土（雨）中为你守（等）候']
];
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 = prog.toFixed(2) + '%';
                for(j=0; j<lrcAr.length; j++){
                if(aud.currentTime >= lrcAr - slip){
                        geci.innerHTML = lrcAr;
                }
      }
});

</script>

红影 发表于 2022-7-3 15:01

一直很喜欢的歌曲，石头的音域真高，简直比女生还高呢。

红影 发表于 2022-7-3 15:04

队长的这个视屏用得好，让图图也带了灵动，视屏里动画的速度也跟歌曲很吻合。欣赏队长好帖{:4_187:}

加林森 发表于 2022-7-3 15:08

红影 发表于 2022-7-3 15:01
一直很喜欢的歌曲，石头的音域真高，简直比女生还高呢。

就是。石头声线太好了。这首歌曲是他们的原唱呢。

加林森 发表于 2022-7-3 15:09

红影 发表于 2022-7-3 15:04
队长的这个视屏用得好，让图图也带了灵动，视屏里动画的速度也跟歌曲很吻合。欣赏队长好帖

谢谢红影支持！{:4_204:}{:4_190:}

红影 发表于 2022-7-3 16:44

加林森 发表于 2022-7-3 15:08
就是。石头声线太好了。这首歌曲是他们的原唱呢。

这首个从第一次听，就觉得特别好听。

红影 发表于 2022-7-3 16:45

加林森 发表于 2022-7-3 15:09
谢谢红影支持！

不客气啊，欣赏队长好帖{:4_187:}

加林森 发表于 2022-7-3 18:19

红影 发表于 2022-7-3 16:44
这首个从第一次听，就觉得特别好听。

是的。挺好听的。

加林森 发表于 2022-7-3 18:19

红影 发表于 2022-7-3 16:45
不客气啊，欣赏队长好帖

嗯嗯。{:4_204:}

樵歌 发表于 2022-7-3 18:25

各马术为中帖子增色！歌声高低起伏太好听了！{:4_178:}

加林森 发表于 2022-7-3 18:37

樵歌 发表于 2022-7-3 18:25
各马术为中帖子增色！歌声高低起伏太好听了！

是的。老兄吃晚饭没有？

红影 发表于 2022-7-3 20:51

加林森 发表于 2022-7-3 18:19
是的。挺好听的。

是的，很好听。

加林森 发表于 2022-7-3 20:56

红影 发表于 2022-7-3 20:51
是的，很好听。

红影晚上好！{:4_204:}

樵歌 发表于 2022-7-4 19:07

加林森 发表于 2022-7-3 18:37
是的。老兄吃晚饭没有？

明天今天一起吃了{:4_173:}

马黑黑 发表于 2022-7-4 19:31

队长水平越来越高了

加林森 发表于 2022-7-4 19:44

樵歌 发表于 2022-7-4 19:07
明天今天一起吃了

这么厉害啊。。。。。{:4_189:}

加林森 发表于 2022-7-4 19:46

马黑黑 发表于 2022-7-4 19:31
队长水平越来越高了

我现在是严格要求自己，每个帖都必须准确的。

马黑黑 发表于 2022-7-4 20:35

加林森 发表于 2022-7-4 19:46
我现在是严格要求自己，每个帖都必须准确的。

这样最好，好办法

加林森 发表于 2022-7-4 21:04

马黑黑 发表于 2022-7-4 20:35
这样最好，好办法

是的，把基础打牢了才行。

绿叶清舟 发表于 2022-7-4 21:04

队长越来越厉害了
页: [1] 2
查看完整版本: 《雨花石》- 李雨儿/石头