论坛 › 欢乐水吧 › 老人与海 （学习老黑“ 空空如也”制作）

加林森 发表于 2022-9-6 10:09

老人与海 （学习老黑“ 空空如也”制作）

<style>
#papa { left: -214px; width: 1024px; height: 800px; background: #666 url('https://pic.imgdb.cn/item/6316a6cf16f2c2beb1410a80.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1;}
#mplayer { position: absolute;right: 100px; bottom: 20px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
#track { stroke: url(#gradient); }
#lrc { position: absolute; display: block; top: 20px; }
#lrctxt { dominant-baseline: middle; fill: url(#gradient); font: bold 2.2em sans-serif; text-shadow: -2px -2px 0px snow, 2px 2px 3px #000; letter-spacing: 3px; }
</style>

<div id="papa">
      <div id="mplayer">
                <svg width="100%" height="100%" shape-rendering="geometricPrecision">
                        <g transform="rotate(-90, 60, 60)">
                              <circle id="track" cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.35" />
                              <circle id="prog" cx="60" cy="60" r="55" fill="none" stroke="red" stroke-width="3" stroke-opacity="0.65"/>
                        </g>
                        <text fill="orange">
                              <tspan id="cur" x="40" y="55">00:00</tspan>
                              <tspan id="dur" x="40" y="75">00:00</tspan>
                        </text>
                </svg>
      </div>
      <svg id="lrc" width="410" height="150">
                <defs><path id="lrcPath" fill="none" stroke="red" d="M 20 20 Q 200 180 400 20" /></defs>
                <defs>
                        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
                              <stop offset="0%" stop-color="blue"/>
                              <stop offset="35%" stop-color="orange"/>
                              <stop offset="65%" stop-color="gray"/>
                              <stop offset="100%" stop-color="red"/>
                        </linearGradient>
                </defs>
                <text x="0" y="20"><textPath id="lrctxt" xlink:href="#lrcPath">任然 - 空空如也</textPath></text>
      </svg>
</div>

<script>
let lrcAr = [
      ['00.00','老人与海-G.E.M.邓紫棋'],
        ['11.05','如果枯萎是那花儿的未来'],
        ['17.10','你还会不会灌溉'],
        ['21.04','若向日葵 不愿把脸转过来'],
        ['27.56','你还会不会留下来'],
        ['32.74','岸一直把浪推开'],
        ['37.86','海浪却一次次回来'],
        ['41.86','桑田沧海 爱是依旧无改'],
        ['48.35','任你留下来 还是离开'],
        ['52.02','我还会 奋身地爱'],
        ['56.56','尽管可能 只剩残骸'],
        ['62.16','我还会 满怀期待'],
        ['67.01','尽管可能 会满身伤害'],
        ['72.65','再残酷的大海'],
        ['77.44','永不可能 把我打败'],
        ['82.46','我因爱而在 为爱醒来'],
        ['87.86','生若不爱 何等苍白'],
        ['94.65','看 岸一直把浪推开'],
        ['100.58','海浪却一次次回来'],
        ['104.36','桑田沧海 爱是依旧无改'],
        ['110.93','任你留下来 还是离开'],
        ['114.48','我还会 奋身地爱'],
        ['119.15','尽管可能 只剩残骸'],
        ['124.87','我还会 满怀期待'],
        ['129.68','尽管可能 会满身伤害'],
        ['135.35','再残酷的大海'],
        ['140.09','永不可能 把我打败'],
        ['145.08','我因爱而在 为爱醒来'],
        ['150.56','生若不爱 何等苍白'],
        ['157.36','你即使再把我推开'],
        ['163.06','我还会再一次回来'],
        ['166.94','桑田沧海 爱是依旧无改'],
        ['173.58','我是因爱而在 为爱醒来'],
      ['178.00','谢谢欣赏']
];
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1970554437.mp3';
aud.autoplay = true;
aud.loop = true;

let girth = prog.getTotalLength();
prog.style.strokeDasharray = prog.style.strokeDashoffset = girth+ 'px';

mplayer.onmousemove = (e) => {
      if (isHover(e.offsetX, e.offsetY))mplayer.style.cursor = 'pointer';
}

mplayer.onclick = (e) => {
      if (isHover(e.offsetX, e.offsetY)) {
                let deg = Math.atan2(e.offsetY - 60, e.offsetX - 60) * 180 / Math.PI;
                deg += (e.offsetX < 60 && e.offsetY < 60) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
      } else {
                aud.paused ? aud.play() : aud.pause();
      }
}

aud.addEventListener('timeupdate', () => {
      prog.style.strokeDashoffset = girth - girth * aud.currentTime / aud.duration + 'px';
      cur.textContent = toMin(aud.currentTime);
      dur.textContent = toMin(aud.duration);
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
      }
});

let isHover = (x,y) => Math.pow(x - 60, 2) + Math.pow(y - 60, 2) >= Math.pow(45, 2);

let toMin = (val)=> {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60), sec = parseFloat(val % 60);
      if(min < 10) min = '0' + min;
      if(sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}
</script>

加林森 发表于 2022-9-6 10:10

@马黑黑   跟到学习制作了一个出来。谢谢老黑！

梦油 发表于 2022-9-6 10:24

老林早晨好！《老人与海》的歌曲和小说都堪称经典啊。

加林森 发表于 2022-9-6 10:32

梦油 发表于 2022-9-6 10:24
老林早晨好！《老人与海》的歌曲和小说都堪称经典啊。

老梦早晨好。是啊。这首歌曲也好听。

大猫咪 发表于 2022-9-6 10:52

经典！队长好制作，真棒！中午好！静静欣赏！辛苦{:4_190:}

{:4_204:}{:4_179:}{:4_190:}

加林森 发表于 2022-9-6 10:54

大猫咪 发表于 2022-9-6 10:52
经典！队长好制作，真棒！中午好！静静欣赏！辛苦

猫猫上来啦。好快，又到中午了。{:4_190:}{:4_179:}

梦油 发表于 2022-9-6 10:58

加林森 发表于 2022-9-6 10:32
老梦早晨好。是啊。这首歌曲也好听。

是的，是的，经典作品嘛！

大猫咪 发表于 2022-9-6 11:01

加林森 发表于 2022-9-6 10:54
猫猫上来啦。好快，又到中午了。

就是，在上班呢队长{:4_189:}上来听听音乐，{:4_179:}

红影 发表于 2022-9-6 11:05

队长厉害，又是第一个做成的呢。这个选材很好，给队长点赞{:4_187:}

加林森 发表于 2022-9-6 11:14

梦油 发表于 2022-9-6 10:58
是的，是的，经典作品嘛！

是的是的。

加林森 发表于 2022-9-6 11:15

大猫咪 发表于 2022-9-6 11:01
就是，在上班呢队长上来听听音乐，

好的，释放一下心情挺好的。{:4_190:}{:4_179:}

加林森 发表于 2022-9-6 11:16

红影 发表于 2022-9-6 11:05
队长厉害，又是第一个做成的呢。这个选材很好，给队长点赞

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

大猫咪 发表于 2022-9-6 11:16

加林森 发表于 2022-9-6 11:15
好的，释放一下心情挺好的。

嗯就是队长，头都是大的现在 {:4_189:} {:4_179:}

加林森 发表于 2022-9-6 11:20

大猫咪 发表于 2022-9-6 11:16
嗯就是队长，头都是大的现在

过了这段时间应该会过去的。{:4_179:}

大猫咪 发表于 2022-9-6 11:21

加林森 发表于 2022-9-6 11:20
过了这段时间应该会过去的。

嗯   还有几天都走了，就轻松了 {:4_179:}

梦缘 发表于 2022-9-6 11:25

老师的帖不错，欣赏学习中！{:4_204:}

加林森 发表于 2022-9-6 11:25

大猫咪 发表于 2022-9-6 11:21
嗯   还有几天都走了，就轻松了

对了。你准备回北京了吗？{:4_179:}

加林森 发表于 2022-9-6 11:27

梦缘 发表于 2022-9-6 11:25
老师的帖不错，欣赏学习中！

谢谢梦缘鼓励！中午好！{:4_190:}

大猫咪 发表于 2022-9-6 11:28

加林森 发表于 2022-9-6 11:25
对了。你准备回北京了吗？

中秋节还不知道，时间还定不下来，得看工作安排

加林森 发表于 2022-9-6 11:30

大猫咪 发表于 2022-9-6 11:28
中秋节还不知道，时间还定不下来，得看工作安排

还有几天，不急的。

查看完整版本: 老人与海 （学习老黑“ 空空如也”制作）