夕阳黄昏 发表于 2024-11-15 08:42

红枫叶


<meta name="referrer" content="never" />
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root{--rState:running;--w:1080px;--h:720px;}
.lrcShow{font:bold 2.4em 楷体,楷体_GD2312,sans-serif;pointer-events:none;left:20%;bottom:0px;filter:drop-shadow(1px 0px 0px white)drop-shadow(0px 1px 0px white)drop-shadow(-1px 0px 0px white)drop-shadow(0px -1px 0px white);z-index:99;}
.lrcShow::before{color:hsl(0,80%,80%);}
#outBlk{position:relative;width:var(--w);height:var(--h);background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center / cover;overflow:hidden;margin:90px auto 40px calc(50% - 621px);box-shadow:4px 4px 10px #000;}
zxx-slide{width:var(--w);height:var(--h);position:absolute;}
.zxx-slide-a{position:absolute;cursor:default;pointer-events:none;}
.zxx-slide-a.in{z-index:1;animation-duration:2s;animation-name:brightnessIn;transition:1s;}
.zxx-slide-img{width:var(--w);height:var(--h);}
@keyframes brightnessIn{0%{transform:scale(0.1);opacity:0;}10%{transform:scale(0.5);opacity:1;}100%{transform:scale(1)}}
#processMeter{position:absolute;right:20px;bottom:10px;width:200px;height:100px;cursor:pointer;z-index:100;}
#rPlayer{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes        rot{to{transform: rotate(1turn)}}
</style>
<div id="outBlk">
<zxx-slide></zxx-slide>
                <svg stroke-width="5" viewBox="0 0 200 100" id="processMeter">
                        <!-- 背景圆形 -->
                        <path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="#ebeef5"fill="none" ></path>
                        <!-- 进度条 -->
                        <path
                          class="process-circle"
                          d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
                          stroke="darkred"
                          fill="none"
                          stroke-dasharray="455"
                          stroke-dashoffset="455"
                        ></path>
                        <defs>
                    <clipPath id="clip">
                            <circle cx="100" cy="50" r="41" />
                    </clilpPath>
            </defs>
                        <image xlink:href="https://img1.kuwo.cn/star/albumcover/300/32/25/2915268612.jpg" width="100" height='100' x="50" y="0" id="rPlayer" clip-path="url(#clip)" preserveAspectRatio="none" />
                        <text x="85%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="durTime"> </text>
                        <text x="15%" y="50%" stroke="lightgray" text-anchor="middle" dominant-baseline="middle" stroke-width="2" style="font-size:13px;" id="curTime"> </text>
                </svg>       
        <div class="lrcShow" data-lrc="红枫叶" >红枫叶</div>
</div>

<script>

    const processCircle = document.querySelector('.process-circle');
    // 获取圆的周长
    const circumference = processCircle.getTotalLength();
    // 把周长赋值给 strokeDasharray
    processCircle.style.strokeDasharray = circumference;

    function setProcessCircle(percent = 0) {
                // 动态计算 offset 赋值给 strokeDashoffset
                // 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
                processCircle.style.strokeDashoffset =
                  circumference * (1 - parseInt(percent) / 100)
        }
       
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);

sf0.onload = () => {
        let circlePoints = [];
        let bgcLen = bgc.getTotalLength();
       
        for(let i = 0; i < bgcLen; i++)        {
                circlePoints.push(bgc.getPointAtLength(i));
        }
        console.log(circlePoints);
        let lrctxt = `
作词：胡宏伟
作曲：刘聪
录制：邹铁夫
演唱：徐霞
深秋时节最美红枫叶
越是霜重红得越热烈
红枫叶漫山野
情浸染爱凝结
红枫叶漫山野
情浸染爱凝结
走在石阶拾起红枫叶
缀在胸前点燃了热血
红枫叶漫山野
情浸染爱凝结
红枫叶漫山野
情浸染爱凝结
映红了脸庞
映红了脚印
映红了生命岁月
映红了脸庞
映红了脚印
映红了生命岁月
生命岁月
        `;
        let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://cccimg.com/view.php/ff01960467871e1cb8334027d77b43aa.mp3",
        }
        let player = new lrcPlayerY(opts);
        //console.log(player.lrcVec);
let pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosqx8Miat4S9iaAib7dsr3DCvPSNKnKqJH6yh1l0Wx1gYpNGrKSwaV2mP2oQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosq6KVpO74uBG2l4CJEicJnbCxV7Nbicnqh03tO7h2o6KLOOxeRrevP7ADQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosqvib9ibUFicMB9CvN0POcib1cPs3pIOJN7PgBR5xl4htMG2K79Glc6MMHbw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosqD6iam1zL0vJP8VI4iboxrMm52bkWekhzYj7HtzCLMANPJOYz9ZZ8zvrw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosq4G9cU7x1GWJzJDRQEMyfSK6879iavJIXvVCkEwtmMnMbyeiawJKz44bw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosqfDdWSBWIlzFl0aJcRt5QUb4ia6oEvL3GZfo2UgOKhiar8iaE5L2aS9LHA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosqHu8qAlTHjIZGDmRia4RuA3Tv5JsVfCr6vKUWKYceb2j7V8LujRUCIlw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosqyA9DtVib3OvyzNofLMjwIfpvCG7Y9S2xY0Fibp1pRNwjDmc20uhaB1FA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosqgxpc534mldicpElkAFonNyBXfdTy59ZXnicYhohfPURMFSAWzbTbg0gw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosqYNEMpic4jcjKibZVJQuokMl754cFCNXtuicrpj0KLnBGJDOfoHDcvCqGQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosqkOtRmicIRJ9uar6PgbbFrdWfTCVjnzLdLl57bjRIR1ysTef832Q79JQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/ZyAxVN9OeK7bdHf9gdHuMKGrTjJoCosq6hfnvmdPXVrrzw4FZTG5FibFODSzNmIjhIlMtfGFymSP7yN6Q94tBGQ/640",
];
let eleZxxSlides = document.querySelectorAll('zxx-slide');
pics.forEach(pic => {
        let aObj = document.createElement('a');
        aObj.className = 'zxx-slide-a';
        let imgObj = document.createElement('img');
        imgObj.src = pic;
        imgObj.className = 'zxx-slide-img';
        aObj.appendChild(imgObj);
        eleZxxSlides.appendChild(aObj);
});
[].slice.call(eleZxxSlides).forEach(function(container) {
    let timerSlide = null;
    let indexSlide = 0;
    container.addEventListener('mouseover', function() {
      clearTimeout(timerSlide);
    });
    container.addEventListener('mouseout', function() {
      clearTimeout(timerSlide);
      funSlide();
    });
    // 对应的元素
    let eleSlides = [].slice.call(container.querySelectorAll('a'));
    let eleButtons = [].slice.call(container.querySelectorAll('button'));
    let funSlide = function() {
      eleSlides.forEach(function(slide, index) {
      if (!player.mObj.paused) {
          if (indexSlide == index) {
            slide.classList.add('in');
          } else if (slide.classList.contains('in')) {
            slide.classList.remove('in');
          }
      }
      });
      timerSlide = setTimeout(function() {
      indexSlide++;
      if (indexSlide == eleSlides.length) {
          indexSlide = 0;
      }
      funSlide();
      }, 12000);
    }
    indexSlide++;
    setTimeout(funSlide, 12000);
});

        let formatTime = (time) => {
                let str = '';
                let min = parseInt(time / 60);
                let sec = parseInt(time % 60);
                return ((min < 10 ? '0'+min:min) + ":" + (sec < 10 ? '0'+sec:sec));
        };
       
        player.mObj.addEventListener('timeupdate', function() {
                let processValue = player.mObj.currentTime / player.mObj.duration;
                processCircle.style.strokeDashoffset = circumference * (1 - processValue);
                durTime.textContent = formatTime(player.mObj.duration);
                curTime.textContent = formatTime(player.mObj.currentTime);
        });
        rPlayer.onclick = () => {
                player.mObj.paused ? (outBlk.style.setProperty('--rState','running'), player.mObj.play()) : (outBlk.style.setProperty('--rState','paused'), player.mObj.pause());
        }

        let seeking = false;
        let moveEventProc = (event)        =>        {
                if(!seeking)        return;
                let thePoint = 0, minV = 100;
                circlePoints.forEach((point, idx ) => {
                        let mx = (point.x - event.offsetX), my = (point.y - event.offsetY)
                        let mv = mx*mx + my*my;
                        if(mv < minV)        {
                                minV = mv; thePoint = idx;
                        }
                })
                let chkVal = thePoint / circumference;
                let chkTime = player.mObj.duration * chkVal;
                processCircle.style.strokeDashoffset = circumference * (1 - chkVal);
                for(i = 0; i < player.lrcVec.length; i++)        {
                        if(player.lrcVec.seconds >= chkTime)        {
                                //console.log(player.lrcVec.seconds, i);
                                player.idx = i;
                                player.mObj.currentTime = chkTime;
                                break;
                        }
                };
        };
        processCircle.addEventListener("mousemove", (event) => moveEventProc(event));
        bgc.addEventListener("mousemove", (event) => moveEventProc(event));
        processCircle.onclick = bgc.onclick = () => seeking = !seeking;
       
}
</script>

红影 发表于 2024-11-15 14:58

漂亮的制作，图片轮播和带进度条的小播都很精致。
欢迎夕阳黄昏新朋友，欣赏精美制作{:4_199:}

梦油 发表于 2024-11-15 14:58

欣赏美帖，问候夕阳。

红影 发表于 2024-11-15 14:59

新朋友的帖子加个精，期待更多好帖{:4_187:}

夕阳黄昏 发表于 2024-11-15 15:17

红影 发表于 2024-11-15 14:58
漂亮的制作，图片轮播和带进度条的小播都很精致。
欢迎夕阳黄昏新朋友，欣赏精美制作

谢谢你的支持欣赏，下午好！

夕阳黄昏 发表于 2024-11-15 15:17

梦油 发表于 2024-11-15 14:58
欣赏美帖，问候夕阳。

谢谢你的支持欣赏，下午好！

夕阳黄昏 发表于 2024-11-15 15:18

红影 发表于 2024-11-15 14:59
新朋友的帖子加个精，期待更多好帖
新朋友， 哈哈

红影 发表于 2024-11-15 16:51

夕阳黄昏 发表于 2024-11-15 15:18
新朋友， 哈哈

嘘，看破不说破是美德呢，假装一把美德多好{:4_187:}

红影 发表于 2024-11-15 16:51

夕阳黄昏 发表于 2024-11-15 15:17
谢谢你的支持欣赏，下午好！

不客气啊，问好，周末快乐{:4_187:}

夕阳黄昏 发表于 2024-11-15 16:56

红影 发表于 2024-11-15 16:51
嘘，看破不说破是美德呢，假装一把美德多好

这种态度好{:5_108:}

夕阳黄昏 发表于 2024-11-15 16:56

红影 发表于 2024-11-15 16:51
不客气啊，问好，周末快乐

这么快就到周末了

梦油 发表于 2024-11-15 17:01

夕阳黄昏 发表于 2024-11-15 15:17
谢谢你的支持欣赏，下午好！

夕阳朋友别客气。

樵歌 发表于 2024-11-15 19:15

好精美的帖子！好独特精美的播放器！

醉美水芙蓉 发表于 2024-11-15 19:33

醉美水芙蓉 发表于 2024-11-15 19:34

夕阳黄昏 发表于 2024-11-15 19:58

樵歌 发表于 2024-11-15 19:15
好精美的帖子！好独特精美的播放器！

谢谢你的支持欣赏，晚上好！

夕阳黄昏 发表于 2024-11-15 19:58

醉美水芙蓉 发表于 2024-11-15 19:33
哈哈！他就是起个网名好难老师！

就是之一{:5_106:}

夕阳黄昏 发表于 2024-11-15 19:58

醉美水芙蓉 发表于 2024-11-15 19:34
问好夕老师！欣赏老师带来的精彩播放器！

谢谢你的支持欣赏，晚上好！

樵歌 发表于 2024-11-15 20:40

夕阳黄昏 发表于 2024-11-15 19:58
谢谢你的支持欣赏，晚上好！

好作品必须多点赞呢。不必客气哈。{:4_190:}

红影 发表于 2024-11-15 21:23

夕阳黄昏 发表于 2024-11-15 16:56
这种态度好

必须的{:4_205:}
页: [1] 2 3 4
查看完整版本: 红枫叶