起个网名好难 发表于 2025-2-4 17:02

世界赠予我的 --- 王菲


<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
        /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font-size: 2em;
                        pointer-events:none;
                        filter: drop-shadow(1px 0px 0px gray ) drop-shadow(-1px 0px 0px gray ) drop-shadow(0px 1px 0px gray ) drop-shadow(0px -1px 0pxgray);
                        z-index:99;left:10%;bottom:-5px;color:hsla(240,50%, 80%, 0.7);
        }
        .lrcShow:before        { color:transparent;}
        #oBlk        {
                width:960px;height:624px; position: relative; margin:90px auto 40px calc(50% - 561px);
                padding:16px;
                overflow:hidden;
                border-radius:36px;
                box-shadow:3px 3px 6px darkgray;
                background:url(https://q0.itc.cn/images01/20250129/2d37ccc662a1488883904897b691fa5d.jpeg) center/cover;
        }
#processMeter        {position: absolute; right:3%; bottom:5px; width:80px; cursor: pointer; z-index:999;}
</style>
<div id="oBlk">
        <div id="processMeter">
                <svg viewbox="0 0 100 100" id="svgObj">
                        <g fill='none' stroke-width='5'>
                                <path d="M 3 50 A 45 45 0 0 1 97 50 A 45 45 0 0 1 3 50" stroke="lightgray" id="bgc"></path>
                                <path d="M 3 50 A 45 45 0 0 1 97 50 A 45 45 0 0 1 3 50" stroke="pink" id="fgc"></path>
                        </g>
                        <g text-anchor="middle" dominant-baseline="middle" fill="gray" style="font-size:16px;">
                                <text x="50%" y="80%" id="durTime">00:00</text>
                                <text x="50%" y="25%" id="curTime">00:00</text>
                        </g>
                        <path fill="#f00" d="M35 35 l30 15 -30 15 z" id="playCtrl"/>
                </svg>
        </div>
        <divclass="lrcShow" data-lrc='世界赠予我的'></div>
</div>

<script>
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 = () => {
const lrc =`
世界赠予我的 --- 王菲

有人放烟花 有人追晚风
借一缕时光 捧一片星空
停一停 等一等 别匆匆
造梦者造了好梦 值得我称颂

世界赠予我虫鸣 也赠予我雷霆
赠我弯弯一枚月 也赠予我晚星
赠我一场病 又慢慢痊愈摇风铃
赠我一场空 又渐渐填满真感情

有人唱情歌 有人听晚钟
借一丝懵懂 惊一片翻涌
追一追 赶一赶 情正浓
好故事眷顾好人 天赐的恩宠

世界赠予我拥有 也赠予我回敬
赠我小小一扇窗 也赠予我屋顶
赠我一个名 又渐渐长大的年龄
赠我一首诗 又悄悄读得很安静

有人要回望 有人要憧憬 借一朵白云 拍一张合影
想一想问自己莫打听 远去者去了远方 愿他都安心

`;
var opts = {
        lrcTxt:lrc,
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'https://music.163.com/song/media/outer/url?id=2668124242.mp3'
};
let lrcPlayer = new lrcPlayerY(opts);
       
    const pausePath = "M35 35 h12 v30 h-12 z m18 0 h12 v30 h-12 z";
    const playPath = "M35 35 l30 15 -30 15 z";
        const musicObj = lrcPlayer.mObj;
       
playCtrl.onclick = () => musicObj.paused
        ? (musicObj.play(),playCtrl.setAttribute('d', pausePath))
        : (musicObj.pause(),playCtrl.setAttribute('d', playPath));
        musicObj.addEventListener('play', () => playCtrl.setAttribute('d', pausePath));
        musicObj.addEventListener('pause', () => playCtrl.setAttribute('d', playPath));

        //        格式化时间数据
        let formatTime = (time) => {
                let min = ('' + parseInt(time / 60)).padStart(2,'0');
                let sec = ('' + parseInt(time % 60)).padStart(2,'0');
                return (`${min}:${sec}`);
        };
        //        计算/设置控制路径有关的数据
        let circlePoints = [];
        let bgcLen = bgc.getTotalLength();
        fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
       
        for(let i = 0; i < bgcLen; i++)        {
                circlePoints.push(bgc.getPointAtLength(i));
        }
        //        SVG viewBox 与 实际尺寸的比值
        let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
        let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
       
        //        歌曲进度条鼠标移动处理
        let moveEventProc = (event)        =>        {
                let thePoint = 0, minV = 100;
                circlePoints.forEach((point, idx ) => {
                        let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
                        let mv = mx*mx + my*my;
                        if(mv < minV)        {
                                minV = mv; thePoint = idx;
                        }
                })
                let chkVal = thePoint / bgcLen;
                let chkTime = musicObj.duration * chkVal;
                //musicObj.currentTime = chkTime;
                fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);
//                处理同步歌词的idx
                let fIdx = false;
                lrcPlayer.lrcVec.forEach((lrc,idx) => {
                        if(!fIdx && lrc.seconds >= chkTime )        {
                                fIdx = !fIdx; lrcPlayer.idx = idx;
                                musicObj.currentTime = chkTime;
                                return fIdx;
                        }
                });
        };
       
        fgc.addEventListener("click", (event) => moveEventProc(event));
        bgc.addEventListener("click", (event) => moveEventProc(event));
       
        //        在 timeupdate 事件处理中添加与控制路径有关的处理
        musicObj.addEventListener('timeupdate', function() {
                let processValue = musicObj.currentTime / musicObj.duration;
                fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
                durTime.textContent = formatTime(musicObj.duration - musicObj.currentTime);
                curTime.textContent = formatTime(musicObj.currentTime);
        });
}

</script>

愤怒的葡萄 发表于 2025-2-4 17:04

本帖最后由 愤怒的葡萄 于 2025-2-4 17:11 编辑

王菲现在也要五十五岁了吧，天后级别的人物。

愤怒的葡萄 发表于 2025-2-4 17:11

视频看不了，是楼主没有设置好吧？

梦江南 发表于 2025-2-4 17:42

王菲的这首歌曲火了！

起个网名好难 发表于 2025-2-4 18:04

愤怒的葡萄 发表于 2025-2-4 17:04
王菲现在也要五十五岁了吧，天后级别的人物。

谢谢支持欣赏！

起个网名好难 发表于 2025-2-4 18:04

愤怒的葡萄 发表于 2025-2-4 17:11
视频看不了，是楼主没有设置好吧？

就是一图片和一个歌，没视频

起个网名好难 发表于 2025-2-4 18:05

梦江南 发表于 2025-2-4 17:42
王菲的这首歌曲火了！

没看春晚听说唱的是这个歌{:5_102:}

红影 发表于 2025-2-4 18:34

春晚歌曲，最新歌曲呢。好听{:4_199:}

红影 发表于 2025-2-4 18:34

谢谢难难带来的好歌{:4_187:}

起个网名好难 发表于 2025-2-4 18:54

红影 发表于 2025-2-4 18:34
春晚歌曲，最新歌曲呢。好听

没看春晚听说这个歌评价很好

起个网名好难 发表于 2025-2-4 18:55

红影 发表于 2025-2-4 18:34
谢谢难难带来的好歌

谢谢支持欣赏！

愤怒的葡萄 发表于 2025-2-4 20:19

梦江南 发表于 2025-2-4 17:42
王菲的这首歌曲火了！

王菲的歌曲我听得不是很多的，不过TA属于天后级的歌手。

愤怒的葡萄 发表于 2025-2-4 20:20

起个网名好难 发表于 2025-2-4 18:04
就是一图片和一个歌，没视频

这歌蛮好听的，王菲的歌都是挺不错的。

小辣椒 发表于 2025-2-4 21:13

啊~~~难难我听完了再回帖，春晚我没有看这个节目的，今天补上了

小辣椒 发表于 2025-2-4 21:15

还是喜欢难难这个播放器{:4_170:}

简洁的按钮，我先收藏代码{:4_205:}

小辣椒 发表于 2025-2-4 21:16

谢谢难难分享精彩的制作{:4_199:}

起个网名好难 发表于 2025-2-4 21:26

小辣椒 发表于 2025-2-4 21:13
啊~~~难难我听完了再回帖，春晚我没有看这个节目的，今天补上了

我也没看， 一起补课{:5_106:}

起个网名好难 发表于 2025-2-4 21:29

小辣椒 发表于 2025-2-4 21:15
还是喜欢难难这个播放器

简洁的按钮，我先收藏代码

这帖有测试播放控制的意图，歌倒是附带的。

起个网名好难 发表于 2025-2-4 21:29

小辣椒 发表于 2025-2-4 21:16
谢谢难难分享精彩的制作

谢谢支持欣赏！

梦江南 发表于 2025-2-5 08:42

愤怒的葡萄 发表于 2025-2-4 20:19
王菲的歌曲我听得不是很多的，不过TA属于天后级的歌手。

是的，王菲的这首歌曲的确唱得空灵，音色特别。不愧为是天后级的歌手。
页: [1] 2 3 4
查看完整版本: 世界赠予我的 --- 王菲