杨帆 发表于 2025-7-4 17:39

怎么可能和谁过都一样 - 学习 忘记了 老师 帖《如果没了你 》

本帖最后由 杨帆 于 2025-7-23 02:33 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么可能和谁过都一样 (童声版)</title>
</head>
<body>
<style>
      #papa { position: relative; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9; overflow: hidden; background: #666 url('https://pic1.imgdb.cn/item/686519a758cb8da5c889ac90.jpg') no-repeat center/cover;z-index: 1; }
      #Player { position: absolute; cursor: pointer; transition: 1.2s; animation: rot 8s linear infinite var(--state); z-index: 10; }
      #Player:nth-of-type(1) { --deg: 1turn; }
      #Player:hover { filter: hue-rotate(60deg) drop-shadow(0 0 28px #457148); --state: paused; }
      @keyframes rot { to { transform: rotate(var(--deg)); } }
      .dancer { position: absolute; z-index: 1; }
      .lrcShow { font: bold 42px 'Segoe UI', 'Microsoft YaHei', sans-serif; position: absolute; top: 85%; left: 50%; transform: translateX(-50%); color: transparent; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7)); letter-spacing: 2px; --aniName: bgMove1; --durTime: 300ms; --aniPlayState: running; z-index: 9; width: 80%; text-align: center; }
      .lrcShow::before { position: absolute; content: attr(data-lrc); width: 0; height: 100%; left: 0; top: 0; background-image: linear-gradient(45deg, #ff0077 0%, #ff0099 20%, #ff5500 45%, #00ff99 70%, #7700ff 100%); -webkit-background-clip: text; background-clip: text; overflow: hidden; white-space: nowrap; animation: var(--aniName) var(--durTime) linear forwards; animation-play-state: var(--aniPlayState); }
      @keyframes bgMove1 { from { width: 0; } to { width: 100%; } }
      @keyframes bgMove0 { from { width: 0; } to { width: 100%; } }      
      #vid1, #vid2 { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .5; pointer-events: none; z-index: 1; }
    </style>
<div id="papa">
      <img id="Player" src="https://638183.freep.cn/638183/small/fi2.webp" alt=""
            style="width: 120px; height: 120px;right:2%;top:3%;">
      <img class="dancer" src="https://wjl136.oss-cn-beijing.aliyuncs.com/25/za/wmm.png" alt=""
            style="left: 0px; top: 0px; ">
      <img class="dancer" src="https://wjl136.oss-cn-beijing.aliyuncs.com/25/za/5.gif" alt=""
            style="width: 152px; height: 62px; left: 52%; top: 48%;">
      <img class="dancer" src="https://wjl136.oss-cn-beijing.aliyuncs.com/25/za/x.gif" alt=""
            style="width: 19px; height: 19px; left: 9%; top: 30.2%;">
      <img class="dancer" src="https://wjl136.oss-cn-beijing.aliyuncs.com/21/za/00.gif" alt=""
            style="width: 25px; height: 20px; left: 56%; top: 58%;">
      <img class="dancer" src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt=""
            style="mix-blend-mode: screen; width: 225px; height: 220px; left: 5%; top: 38%;">
      <div class="lrcShow" data-lrc="">怎么可能和谁过都一样 (童声版)</div>
      <video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4"
            autoplay loop muted></video>
      <video id="vid2" src="https://bpic.588ku.com/video_listen/588ku_video/25/04/08/17/14/59/video67f4e91361a39.mp4"
            autoplay loop muted></video>
    </div>
    <script>
      if ('getContext' in document.createElement('canvas')) {
            HTMLImageElement.prototype.play = function () {
                if (this.storeCanvas) {
                  this.storeCanvas.parentElement.removeChild(this.storeCanvas);
                  this.storeCanvas = null;
                  this.style.opacity = ''
                }
                if (this.storeUrl) {
                  this.src = this.storeUrl
                }
            };
            HTMLImageElement.prototype.stop = function () {
                var canvas = document.createElement('canvas');
                var width = this.width, height = this.height;
                if (width & height) {
                  if (!this.storeUrl) {
                        this.storeUrl = this.src
                  }
                  canvas.width = width;
                  canvas.height = height;
                  canvas.style.left = this.style.left;
                  canvas.style.top = this.style.top;
                  canvas.getContext('2d').drawImage(this, 0, 0, width, height);
                  try {
                        this.src = canvas.toDataURL("image/gif")
                  } catch (e) {
                        this.removeAttribute('src');
                        canvas.style.position = 'absolute';
                        this.parentElement.insertBefore(canvas, this);
                        this.style.opacity = '0';
                        this.storeCanvas = canvas
                  }
                }
            }
      }

      function lrcPlayerY(opts) {
            this.init(opts);
      }
      lrcPlayerY.prototype = {
            constructor: lrcPlayerY,
            init: function (opts) {
                var lrcTxt = opts.lrcTxt.replace(/(^\s*)|(\s*$)/g, '');
                this.lrcShowObj = document.querySelector('.lrcShow');
                this.lrcs = this.handleLrc(lrcTxt);
                this.genPlayer(opts.audioURL);
            },
            handleLrc: function (lrcTxt) {
                var parts = lrcTxt.replace(/(^\s*)|(\s*$)/g, "").split(/\r|\n|\r\n/);
                var lrcVec = new Array();
                for (var l = 0; l < parts.length; l++) {
                  var times = parts.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);
                  if (times) {
                        var idx = parts.lastIndexOf(']');
                        if (idx > 0) var lyric = parts.substr(idx + 1);
                        for (var m = 0; m < times.length; m++) {
                            var time = times.substr(1).replace(']', '').split(':');
                            var seconds = (+time) * 60 + (+time);
                            if (lrcVec.length == 0 && seconds != 0) {
                              lrcVec.push({
                                    f: 0,
                                    G: ''
                              });
                            }
                            lrcVec.push({
                              f: +seconds.toFixed(2),
                              G: lyric
                            });
                        }
                  }
                }
                lrcVec.sort(function (a, b) {
                  return (a.f - b.f);
                });
                for (var k = 0; k < lrcVec.length - 1; k++) {
                  lrcVec.K = +(lrcVec.f - lrcVec.f).toFixed(2);
                }
                console.log(lrcVec);
                return lrcVec;
            },
            showLrc: function (dur) {
                this.lrcShowObj.dataset.lrc = this.lrcs.G;
                this.lrcShowObj.style.setProperty('--aniName', 'bgMove' + (this.idx % 2));
                this.lrcShowObj.style.setProperty('--durTime', dur + 's');
                this.lrcShowObj.style.setProperty('--aniPlayState', 'running');
                this.idx++;
            },
            genPlayer: function (audioURL) {
                this.mObj = document.createElement("audio");
                this.mObj.muted = false;
                this.mObj.autoplay = true;
                this.mObj.loop = false;
                this.mObj.src = audioURL;
                this.lrcShowObj.appendChild(this.mObj);
                var that = this;
                var chkTime = 0;
                this.idx = 0;
                this.mObj.addEventListener('ended', function () {
                  that.idx = 0;
                  that.mObj.pause();
                  document.getElementById('vid1').pause();
                  document.getElementById('vid2').pause();
                });
                this.mObj.addEventListener('canplay', function () {
                  that.lrcs.K = +(that.mObj.duration - that.lrcs.f).toFixed(2);
                });
                this.mObj.addEventListener('pause', function () {
                  that.lrcShowObj.style.setProperty('--aniPlayState', 'paused');
                  document.getElementById('vid1').pause();
                  document.getElementById('vid2').pause();
                });
                this.mObj.addEventListener('play', function () {
                  if (that.idx == 1 && that.mObj.currentTime < 1) {
                        that.mObj.pause();
                        return true;
                  }
                  that.lrcShowObj.style.animation = 'none';
                  that.lrcShowObj.offsetHeight; // 触发重绘
                  that.lrcShowObj.style.animation = null;
                  that.lrcShowObj.style.setProperty('--aniPlayState', 'running');
                  document.getElementById('vid1').play();
                  document.getElementById('vid2').play();
                });
                this.mObj.addEventListener('error', function () {
                  console.log("audio error, please check url and network");
                  that.lrcShowObj.style.display = 'none';
                  that.lrcShowObj.removeChild(that.mObj);
                });
                this.mObj.addEventListener('timeupdate', function () {
                  if (that.idx < that.lrcs.length) {
                        if (this.currentTime >= that.lrcs.f) {
                            that.showLrc(that.lrcs.K);
                        }
                  }
                });
                this.lrcShowObj.addEventListener('click', function () {
                  if (that.mObj.paused) {
                        that.mObj.play();
                  } else {
                        that.mObj.pause();
                  }
                });
            }
      };

      let lrctxt = `
怎么可能和谁过都一样 - 童声版
有人在你哭的时候紧紧抱住你
有人在你哭的时候和你讲道理
日子怎么可能和谁过都一样
选对了人平凡日子里都带着光
有人下雨天撑着伞等风也等你
有人下雨天怪你出门不看天气
日子怎么可能和谁过都一样
选对了人才会来日方长
不想一睁眼就要和谁争个对错
家是温暖的港湾不是来辩论的
也不是非要个完美无缺的神
只是短短一生谁不想被爱更多
有人在你哭的时候紧紧抱住你
有人在你哭的时候和你讲道理
日子怎么可能和谁过都一样
选对了人平凡日子里都带着光
有人下雨天撑着伞等风也等你
有人下雨天怪你出门不看天气
日子怎么可能和谁过都一样
选对了人才会来日方长
有人在你哭的时候紧紧抱住你
有人在你哭的时候和你讲道理
日子怎么可能和谁过都一样
选对了人平凡日子里都带着光
有人在你跌倒时候立刻扶起你
有人在你跌倒时候怪你不小心
有人在你失意时默默陪着你
有人在你失意时权衡着利弊
`;
      let opts = {
            lrcTxt: lrctxt,
            audioURL: "https://cccimg.com/view.php/a79b3117d9a7e1163c33c88a0ec7c2ae.mp3"
      }
      let yP = new lrcPlayerY(opts);

      var dancers = document.querySelectorAll('.dancer');
      var videos = ;
      var mState = () => {
            papa.style.setProperty('--state', yP.mObj.paused ? 'paused' : 'running');
            Player.title = yP.mObj.paused ? '播放' : '暂停';
            dancers.forEach(dancer => yP.mObj.paused ? dancer.stop() : dancer.play());
            videos.forEach(video => yP.mObj.paused ? video.pause() : video.play());
      };
      Player.onclick = () => {
            yP.mObj.paused ? (yP.mObj.play(), vid1.play(), vid2.play()) :
                (yP.mObj.pause(), vid1.pause(), vid2.pause());
      }

      yP.mObj.onplaying = yP.mObj.onpause = () => mState();
    </script>
</body>
</html>

梦油 发表于 2025-7-4 20:41

欣赏佳作，问候杨帆。

杨帆 发表于 2025-7-4 20:44

梦油 发表于 2025-7-4 20:41
欣赏佳作，问候杨帆。

问好梦油超版，谢谢鼓励，祝开心{:4_191:}

梦油 发表于 2025-7-4 21:05

杨帆 发表于 2025-7-4 20:44
问好梦油超版，谢谢鼓励，祝开心

杨帆朋友不客气

红影 发表于 2025-7-4 21:56

这会移动的逐字出现的歌词同步有趣，歌曲也很有道理。
制作漂亮，欣赏杨帆好帖{:4_199:}

红影 发表于 2025-7-4 21:57

动态的使用很漂亮，而且还是一键全控的，点击能全部暂停{:4_187:}

杨帆 发表于 2025-7-4 22:09

红影 发表于 2025-7-4 21:57
动态的使用很漂亮，而且还是一键全控的，点击能全部暂停

鼓捣着玩呢，谢谢影子鼓励{:4_204:}

红影 发表于 2025-7-5 06:56

杨帆 发表于 2025-7-4 22:09
鼓捣着玩呢，谢谢影子鼓励

玩得很出彩啊，给杨帆点赞{:4_187:}

梦江南 发表于 2025-7-5 07:32

制作漂亮，特别是移动歌词，还是第一次看到。欣赏点赞！{:4_199:}

杨帆 发表于 2025-7-5 11:49

红影 发表于 2025-7-5 06:56
玩得很出彩啊，给杨帆点赞

谢谢影子点赞，互相学习，开心第一{:4_187:}

杨帆 发表于 2025-7-5 11:50

梦江南 发表于 2025-7-5 07:32
制作漂亮，特别是移动歌词，还是第一次看到。欣赏点赞！

谢谢江南点赞，互相学习，开心第一{:4_187:}

红影 发表于 2025-7-5 14:45

杨帆 发表于 2025-7-5 11:49
谢谢影子点赞，互相学习，开心第一

太客气了，问好杨帆，周六快乐{:4_187:}
页: [1]
查看完整版本: 怎么可能和谁过都一样 - 学习 忘记了 老师 帖《如果没了你 》