杨帆 发表于 2025-5-31 18:34

《这首歌》 - 学习马老师帖 Hakim

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这首歌 - 祁隆
</title>
</head>
<body>
<style>
    #papa {--state: running;margin: 30px 0;left: calc(50% - 81px);transform: translateX(-50%);width: clamp(600px, 90vw, 1400px);min-height: 80vh;aspect-ratio: 16/9;background:url('https://cccimg.com/view.php/d05c80b095a94711cc7702aa16daa024.jpg') 0/100%;box-shadow: 3px 3px 6px 6px gray;position: relative;overflow: hidden;z-index: 1;}
    #dt {position: absolute;width: 100%;height: 100%;top: 0%;left: 0%;mix-blend-mode: screen;z-index: -1;}
    #dt img {width: 100%;height: 100%;}
    #pa {width: 22%;height: 22%;left: 80%;top: 75%;cursor: pointer;position: absolute;overflow: hidden;z-index: 10;opacity: .5;}
    #pa:hover { transform:scale(1.1,1.1);filter: drop-shadow(0 0 80px Gold); }
    .lrc {
            position: absolute;
            top: 16%;
            left: 60%;
            width: 540px;
            height: 250px;
            overflow: hidden;
      }
       .lrc #ul {
            width: 100%;
            padding: 0;
            list-style: none;
            transition: 0.3s all ease;
            margin: 0;
      }
       .lrc #ul li {
            color: #fff;
            font: normal 28px 'YouYuan', sans-serif;
            transition: .3s all ease;
            list-style-type: none;
            text-align: center;
            display: block;
            padding: 0 10px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
      }
       .lrc #ul li.active {
            transform: scale(1.2);
            color: #33FF33;
            font-weight: 650;
            text-align: center;
      }
      #vid1 {
            width: 100%;
            height: 100%;
            z-index: -1;
            position: absolute;
            top: 0%;
            left: 0%;
            opacity: .99;
            object-fit: cover;
            pointer-events: none;
            mix-blend-mode: screen;
            -webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);
      }
      #gl {
            position: absolute;
            width: 240px;
            height: 150px;
            left: 3%;
            top: 75%;
            object-fit: cover;
            aspect-ratio: 1;
            border: 5px solid #ccc;
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) inset;
            border-radius: 50%;
            mix-blend-mode: unset;
            z-index: 3;
            opacity: .99;
            cursor: pointer;
      }
      #gl:hover { transform:scale(1.1,1.1);filter: drop-shadow(0 0 80px Gold); }
      #vid2 {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0%;
            left: 0%;
            object-fit: cover;
            z-index: 1;
            opacity: .39;
            pointer-events: none;
      }
      #progress {
            position: absolute;
            bottom: 10%;
            right: 26.5%;
            width: 600px;
            height: 3px;
            background: #666;
            cursor: pointer;
            z-index: 5;
      }
      #progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #fa4354, #18f5f8);
            width: 0;
            transition: width 0.1s;
            position: relative;
      }
       .time-info {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 14px;
            font-family: Arial, sans-serif;
      }
      #current-time {
            left: -50px;
      }
      #total-time {
            right: -50px;
      }
      #menu-toggle {
            position: absolute;
            top: 13px;
            left: 8%;
            color: #fff;
            cursor: pointer;
            z-index: 10;
            padding: 5px 10px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 5px;
             }
    </style>
    <div id="papa">
      <div id="dt">
            <img src="https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif" id="Img" style="mix-blend-mode: screen" alt =" " /></div>      
      <img src="https://cccimg.com/view.php/03fd301a2969be3d16426e8e0272ab25.jpg" id="gl"style="mix-blend-mode: screen" title="播放/暂停" alt =" " />
      <video id="vid1" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8fa5f0765.mp4" loop muted autoplay=""></video>
      <video id="vid2" src="https://cccimg.com/view.php/7f9f1d52f7c575953b6957576cd5d0b2.mp4" loop muted
autoplay=""></video>
      <div id="pa" title="播放/暂停"></div>
      <div id="progress">
            <span id="current-time" class="time-info">00:00</span>
            <div id="progress-bar"></div>
            <span id="total-time" class="time-info">00:00</span>
      </div>
      <div id="dhgc" class="lrc">
            <ul id="ul"></ul>
      </div>
    </div>
    <audio id="audio" src="https://cccimg.com/view.php/1a7b3223efb420102883133e0dbb360b.mp3" loop autoplay></audio>
    <script type="module">
      import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
      var scene = new THREE.Scene;
      var clock = new THREE.Clock();
      var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0, 0, 3);
      var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(pa.offsetWidth, pa.offsetHeight);
      pa.appendChild(renderer.domElement);

      const pic2 = 'https://pic1.imgdb.cn/item/67e576870ba3d5a1d7e569a8.png';
      const texture2 = new THREE.TextureLoader().load(pic2, () => {
            texture2.colorSpace = THREE.SRGBColorSpace;
            texture2.wrapS = THREE.RepeatWrapping;
            texture2.wrapT = THREE.RepeatWrapping;
            texture2.repeat.set(12, 8);
            renderer.render(scene, camera);
      });

      const ball = new THREE.Mesh(
            new THREE.SphereGeometry(),
            new THREE.MeshBasicMaterial({ map: texture2, transparent: true })
      );

      scene.add(ball);

      let angle = 0;
      const animate = () => {
            const delta = clock.getDelta();
            angle += delta;
            ball.rotation.y -= delta / 2;
            camera.position.x = 1 * Math.cos(angle);
            camera.position.y = 1 * Math.sin(angle);
            camera.lookAt(0, 0, 0);
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
      };

      window.onresize = () => {
            camera.aspect = pa.offsetWidth / pa.offsetHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(pa.offsetWidth, pa.offsetHeight);
      }

      pa.onclick = gl.onclick = () => {
            clock.running ? clock.stop() : clock.start();
            const audio = document.getElementById('audio');
            const videos = document.querySelectorAll('video');
            const Img = document.getElementById('Img');
            const gl = document.getElementById('gl');

            if (audio.paused) {
                audio.play();
                videos.forEach(v => v.play());
                Img.style.opacity = '0.9';
            } else {
                audio.pause();
                videos.forEach(v => v.pause());
                Img.style.opacity = '0';
            }
      };
      animate();
    </script><script>
      var lrc = `
这首歌 - 祁隆
词：祁隆
曲：祁隆
编曲：喜波
后期：顾潇予
音乐总监：祁隆
出品发行：北京隆娱文化
我只想
唱首歌
去告别
过去的我
是是非非
爱恨交错
繁华落尽
都汇成了河
这首歌
我们经历过
快乐过
也悲伤过
这首歌
送给你和我
歌中有你
也有我
我只想
唱首歌
去告别
过去的我
是是非非
爱恨交错
繁华落尽
都汇成了河
这首歌
我们经历过
快乐过
也悲伤过
这首歌
送给你和我
歌中有你
也有我
这首歌
我们经历过
快乐过
也悲伤过
这首歌
送给你和我
歌中有你
也有我
歌中有你
也有我

`;
      let lrcArr = lrc.split('\n');
      let result = [];
      doms = {
            audio: document.querySelector("#audio"),
            ul: document.querySelector("#ul"),
            container: document.querySelector(".lrc"),
            progress: document.querySelector("#progress"),
            progressBar: document.querySelector("#progress-bar"),
            currentTime: document.querySelector("#current-time"),
            totalTime: document.querySelector("#total-time")
      }

      for (let i = 0; i < lrcArr.length; i++) {
            let line = lrcArr.trim();
            if (!line) continue;

            let separatorIndex = line.indexOf(']');
            if (separatorIndex === -1) continue;

            let timePart = line.substring(1, separatorIndex);
            let lyric = line.substring(separatorIndex + 1) || '';

            result.push({
                time: parseTime(timePart),
                word: lyric.trim() || ' '
            });
      }

      function parseTime(lrcTime) {
            lrcTimeArr = lrcTime.split(":")
            return +lrcTimeArr * 60 + +lrcTimeArr;
      }

      function getIndex() {
            let Time = doms.audio.currentTime;
            for (let i = 0; i < result.length; i++) {
                if (result.time > Time) {
                  return i - 1;
                }
            }
      }

      function createElements() {
            let frag = document.createDocumentFragment();
            for (let i = 0; i < result.length; i++) {
                let li = document.createElement("li");
                li.innerText = result.word;
                frag.appendChild(li);
            }
            doms.ul.appendChild(frag);
      }
      createElements();
      let containerHeight = doms.container.clientHeight;
      let liHeight = doms.ul.children.clientHeight;
      let minOffset = 0;
      let maxOffset = doms.ul.clientHeight - containerHeight;
      function setOffset() {
            let index = getIndex();
            let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
            if (offset < minOffset) {
                offset = minOffset;
            };
            if (offset > maxOffset) {
                offset = maxOffset;
            };
            doms.ul.style.transform = `translateY(-${offset}px)`;

            let li = doms.ul.querySelector(".active")
            if (li) {
                li.classList.remove("active");
            }

            li = doms.ul.children;
            if (li) {
                li.classList.add("active");
            }
      };

      function updateProgress() {
            const currentTime = doms.audio.currentTime;
            const duration = doms.audio.duration;
            const progress = (currentTime / duration) * 100;
            doms.progressBar.style.width = `${progress}%`;
            doms.currentTime.textContent = formatTime(currentTime);
            doms.totalTime.textContent = formatTime(duration);
      }

      function formatTime(time) {
            const minutes = Math.floor(time / 60);
            const seconds = Math.floor(time % 60);
            return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      }

      doms.progress.addEventListener('click', (e) => {
            const rect = doms.progress.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const progress = (clickX / doms.progress.offsetWidth);
            const newTime = progress * doms.audio.duration;
            doms.audio.currentTime = newTime;
      });

      doms.audio.addEventListener("timeupdate", setOffset);
      doms.audio.addEventListener("timeupdate", updateProgress);
      doms.audio.addEventListener("loadedmetadata", updateProgress);
</script>
</body>
</html>


梦江南 发表于 2025-5-31 18:37

这个球做的漂亮，在手机上看非常好看。歌唱得深沉。先点个赞，明天再来加分。

梦江南 发表于 2025-5-31 18:38

端午节快乐！

杨帆 发表于 2025-5-31 18:43

梦江南 发表于 2025-5-31 18:38
端午节快乐！

问好江南，谢谢祝福与鼓励，祝双节快乐{:4_204:}

梦江南 发表于 2025-6-1 07:29

杨帆 发表于 2025-5-31 18:43
问好江南，谢谢祝福与鼓励，祝双节快乐

早上问好，

杨帆 发表于 2025-6-1 09:15

梦江南 发表于 2025-6-1 07:29
早上问好，

江南好，祝童心不泯、青春永驻{:4_204:}

梦江南 发表于 2025-6-1 10:21

杨帆 发表于 2025-6-1 09:15
江南好，祝童心不泯、青春永驻

谢谢，今天没有带孙女出去玩啊！

杨帆 发表于 2025-6-1 11:17

梦江南 发表于 2025-6-1 10:21
谢谢，今天没有带孙女出去玩啊！

呵呵，出去了{:4_187:}

梦江南 发表于 2025-6-1 11:35

杨帆 发表于 2025-6-1 11:17
呵呵，出去了

爷爷真好。

杨帆 发表于 2025-6-1 11:50

梦江南 发表于 2025-6-1 11:35
爷爷真好。

呵呵，谢谢鼓励，江南更好{:4_204:}
页: [1]
查看完整版本: 《这首歌》 - 学习马老师帖 Hakim