亚伦影音工作室 发表于 2022-6-26 23:24

想起了你 - 阿鲁阿卓

<style>
.papa { margin: 30px -120px; width: 1024px; height: 600px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; background: url(http://chuangshicdn.data.mvbox.cn/album/22/06/22/22062210335112503592.gif)0 0/100%100%; position: relative; }
.papa input { border: none; outline: none; opacity: 1; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: relative; left: 0px; top: 480px; padding: 10px;text-align: center;font: normal 3em sans-serif; color: #ff0000; font-family:华文隶书; overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0); z-index: 40;}
#btnplay { width: 30px; height: 30px; border-radius: 50%;position: relative; z-index: 30;}
#btnplay:hover { background: #aaa; color: #ff0000;position: relative;z-index: 30; }
.vid { position: absolute; width: 100%; height: 600px; left: 0px;top:0px; object-fit: cover; opacity: .80;z-index: 20;}
</style>

<style type="text/css">.bs{animation: slider0 0.01s linear infinite ;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 2px #CD6600) drop-shadow(0px 0px 2px #CD6600)drop-shadow(0px 0px 2px #CD6600)brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)drop-shadow(0px 0px 2px #000090)brightness(100%);}}
</style>

<div class="papa">
<div class="bs"style="position: relative; left: 0px; top: 0px;z-index: 30;">
      <div class="playbox">
                <p id="geci">缓冲中 ... </p>   </div></div>
                <p style="padding: 0;margin: 490px 220px;">
                        <input id="btnplay" type="button" value="II" />
                        <input id="slider" type="range" min="0" max="100" value="0"style="width: 440px; height: 4px;padding: 0;margin: 0px 0px;position: relative;z-index: 30;" />
                        <span id="per" style="width: 130px; height: 6px;padding: 0;margin: 20px 0px;font-size: 20px;color: #ffffff;position: relative;z-index: 30;">0:0 | 0:0</span>
                </p>
   <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ef4ca9789797571759adfbbeed1aee8b_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
      <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=52096981.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 = [
        ['5.00','想起了你 - 阿鲁阿卓'],
        ['12.00','词：奥杰阿格'],
        ['25.00','曲：奥杰阿格'],
        ['38.00','飞吧 飞吧 让我自由地飞翔在蓝天上'],
        ['44.00','山那一边 山那一边 山的那一边'],
        ['51.00','怎么看 也看不见 你脸上的笑'],
        ['58.00','于是我想走进你的梦 让你快乐'],
        ['64.00','开吧 开吧 任你娇艳地盛开在春天里'],
        ['71.00','无声的风 无声的雨 无声的岁月'],
        ['78.00','怎么找 也找不到 你眼中的泪'],
        ['84.00','于是夜里我等待你盛开在梦里'],
        ['91.00','想起了你 如此美丽'],
        ['98.00','想起了你 如此遥远'],
        ['104.00','想起了你 如此美丽'],
        ['111.00','想起了你 如此遥远'],
        ['118.00','我怎么能够禁止 心里想的全是你的样子'],
        ['122.00','这个世界如果变卦 改变不了爱的坚持'],
        ['125.00','忘 忘不了往事 慢慢变成情痴'],
        ['127.00','耶 傻傻地相信这还有来世'],
        ['131.00','开吧 开吧 任你娇艳地盛开在春天里'],
        ['138.00','无声的风 无声的雨 无声的岁月'],
        ['144.00','怎么找 也找不到 你眼中的泪'],
        ['151.00','于是夜里我等待你盛开在梦里'],
        ['158.00','想起了你 如此美丽'],
        ['164.00','想起了你 如此遥远'],
        ['171.00','想起了你 如此美丽'],
        ['178.00','想起了你 如此遥远'],
        ['183.00','我怎么能够禁止 心里想的全是你的样子'],
        ['188.00','这个世界如果变卦 改变不了爱的坚持'],
        ['191.00','忘 忘不了往事 慢慢变成情痴'],
        ['194.00','耶 傻傻地相信这还有来世'],
        ['197.00','总是控制不了 思念的泪花已经开放多少 凋谢多少'],
        ['204.00','追求的幸福 但是幸福又在哪里 喔 谁又知道'],
        ['211.00','想起了你 如此美丽'],
        ['218.00','想起了你 如此遥远'],
        ['224.00','想起了你 如此美丽'],
        ['231.00','想起了你 如此遥远'],
        ['238.00','想起了你 如此遥远']
];

slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 120; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = 'II');
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-27 08:51

歌曲很好听。歌词除了正常显示，貌似在视频上还有一份淡淡的映射，很奇妙的构思{:4_204:}

红影 发表于 2022-6-27 08:51

欣赏亚伦老师好帖，新周快乐{:4_187:}
页: [1]
查看完整版本: 想起了你 - 阿鲁阿卓