红梅赞

梦江南 发表于 2025-2-10 11:38

本帖最后由梦江南于 2025-2-10 11:38 编辑 <br /><br /><style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.0em 微软雅黑;
pointer-events:none;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
z-index:99;left:40%;bottom:-10px;color:hsla(240,60%, 90%, 0.7);
}
#oBlk {
width:1028px;height:680px; position: relative; margin:90px 0 40px calc(50% - 607px);
background: #0000FF ;
padding:16px;
overflow:hidden;
border-radius:36px;
box-shadow:3px 3px 6px darkgray;
}
#showSVG {position:absolute; left:0px;top:0px;width:100%;height:110%;}
#processMeter {position: absolute; leftt:3%; bottom:5px; width: 160px; height:80px; cursor: pointer; z-index:999;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
</style>

<div id="oBlk">
<div id="showSVG"></div>
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<defs>
            <clipPath id="clip">
            <circle cx="100" cy="50" r="35" />
            </clilpPath>
         </defs>
<image xlink:href="https://pic1.imgdb.cn/item/67a873fcd0e0a243d4fd5414.png" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
<g fill='none' stroke-width='5'>
<path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="lightgray" id="bgc"></path>
<path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="pink" id="fgc"></path>
</g>
   <g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
<text x="82%" y="55%" id="durTime">00:00</text>
<text x="18%" y="55%" id="curTime">00:00</text>
   </g>
</svg>
</div>
<divclass="lrcShow" data-lrc='红梅赞'></div>
</div>

<script type="text/javascript">
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 pics = [
"https://pic1.imgdb.cn/item/67a86422d0e0a243d4fd49f0.jpg",
"https://pic1.imgdb.cn/item/67a86589d0e0a243d4fd4aa0.jpg",
"https://pic1.imgdb.cn/item/67a865b7d0e0a243d4fd4abc.jpg",
"https://pic1.imgdb.cn/item/67a86e66d0e0a243d4fd4ec0.jpg",
"https://pic1.imgdb.cn/item/67a865b7d0e0a243d4fd4abc.jpg",
"https://pic1.imgdb.cn/item/67a865e1d0e0a243d4fd4acd.jpg"
];

function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'sObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 1028 700`});
pics.forEach((pic, idx) => {
let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-1.5` : `ep${idx-1}.end-1.5`;
let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':1028, 'height':700, 'x':0, 'y':0, 'opacity':0, 'preserveAspectRatio':'none'});
let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;

const lrc =`
红梅赞
演唱降央卓玛
歌词编辑：梦江南
红岩上红梅开
千里冰霜脚下踩
三九严寒何所惧
一片丹心向阳开向阳开
红梅花儿开
朵朵放光彩
昂首怒放花万朵
香飘云天外
唤醒百花齐开放
高歌欢庆迎春来迎春来
梦江南拍摄制作
红岩上红梅开
千里冰霜脚下踩
三九严寒何所惧
一片丹心向阳开向阳开
红梅花儿开
朵朵放光彩
昂首怒放花万朵
香飘云天外
唤醒百花齐开放
高歌欢庆迎春来迎春来
`;

var opts = {
lrcTxt:lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
//aaaudioURL:'https://cccimg.com/view.php/58e50f66d84998ad36b9262675754b6b.mp3'
audioURL:'https://cccimg.com/view.php/58e50f66d84998ad36b9262675754b6b.mp3'
};
let lrcPlayer = new lrcPlayerY(opts);
// 格式化时间数据
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));
}
// 在 timeupdate 事件处理中添加与控制路径有关的处理
lrcPlayer.mObj.addEventListener('timeupdate', function() {
let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(lrcPlayer.mObj.duration);
curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
});
// 动态元素监测
let runState = () => {
lrcPlayer.mObj.paused
? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations())
: (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations());
}
// SVG viewBox 与实际尺寸的比值
let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
//console.log(factorX, factorY);
// 歌曲进度条鼠标移动处理
let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
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 = lrcPlayer.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);

let fIdx = false;
lrcPlayer.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; lrcPlayer.idx = idx;
lrcPlayer.mObj.currentTime = chkTime;
return fIdx;
}
});
};

fgc.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
fgc.onclick = bgc.onclick = (event) => seeking = !seeking;

// 歌曲、歌词及动态元素启/停控制
mCtrl.onclick = () => {
lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
}
lrcPlayer.mObj.addEventListener('play', () => runState());
lrcPlayer.mObj.addEventListener('pause', () => runState());
lrcPlayer.mObj.play().catch(_ = () => runState());
}
</script>

梦江南 发表于 2025-2-10 11:38

鸣谢难难老师的白狐代码。

起个网名好难 发表于 2025-2-10 12:06

https://img.soogif.com/0rIjPl4EnDGYyZ3SHLb6St3XlqGSfK1P.gif

梦江南 发表于 2025-2-10 13:38

起个网名好难发表于 2025-2-10 12:06

老师的这张动图是AL做的吗？

梦油发表于 2025-2-10 14:37

《红梅赞》是一首让人动情的好歌。只是降央卓玛太可惜了。

梦江南 发表于 2025-2-10 15:09

梦油发表于 2025-2-10 14:37
《红梅赞》是一首让人动情的好歌。只是降央卓玛太可惜了。

降央卓玛是个不错的中音歌手，到底是怎么回事，谁能说得清呢。
谢谢梦油老师支持。

梦油发表于 2025-2-10 16:23

梦江南发表于 2025-2-10 15:09
降央卓玛是个不错的中音歌手，到底是怎么回事，谁能说得清呢。
谢谢梦油老师支持。

是啊，他们文艺界（特别是唱歌的）水太深。

梦江南 发表于 2025-2-10 16:46

梦油发表于 2025-2-10 16:23
是啊，他们文艺界（特别是唱歌的）水太深。

就是，

起个网名好难 发表于 2025-2-10 16:57

梦江南发表于 2025-2-10 13:38
老师的这张动图是AL做的吗？

我就是会搜不会做{:5_102:}

梦江南 发表于 2025-2-10 18:54

会搜比做要方便。

杨帆发表于 2025-2-10 20:15

好听好看，谢谢梦江南友友精彩分享{:4_204:}

红影发表于 2025-2-10 20:20

很漂亮的图片轮播，美丽的梅花，好听的歌曲。
欣赏江南好帖{:4_199:}

小辣椒 发表于 2025-2-10 22:07

阿姨晚上好，这个图片转换效果很漂亮的，转换流畅，难难老师这个代码我做了一个，也是收藏了代码，以后可以再玩的{:4_204:}

小辣椒 发表于 2025-2-10 22:07

这首是老歌了，现在很少听到了，感谢阿姨精彩分享{:4_199:}

梦江南 发表于 2025-2-11 07:50

杨帆发表于 2025-2-10 20:15
好听好看，谢谢梦江南友友精彩分享

早上问好，谢谢您支持，祝新春快乐。{:5_161:}

梦江南 发表于 2025-2-11 07:53

红影发表于 2025-2-10 20:20
很漂亮的图片轮播，美丽的梅花，好听的歌曲。
欣赏江南好帖

问好影子，我这里的红梅只有一棵，大多还是花苞，拍了几张，凑个数做帖音画。谢谢支持鼓励。{:4_204:}

梦江南 发表于 2025-2-11 07:59

小辣椒发表于 2025-2-10 22:07
阿姨晚上好，这个图片转换效果很漂亮的，转换流畅，难难老师这个代码我做了一个，也是收藏了代码，以后可以 ...

早上问好，您十点还在网上回复，感动又心疼。您这几天忙更要注意早点休息了。{:4_204:}
难难老师的这代码图片转换效果流畅，我也收藏了。是的，下次要玩时就可以拿出来了。

梦江南 发表于 2025-2-11 08:01

小辣椒发表于 2025-2-10 22:07
这首是老歌了，现在很少听到了，感谢阿姨精彩分享

是的，喜欢降央卓玛的这首：红梅赞。就录音下来做了。{:4_179:}

秋思梦景 发表于 2025-2-11 08:17

问候老师好！精美音画佳作，创意新颖制作精良！为您点赞！{:5_116:}{:4_187:}

梦江南 发表于 2025-2-11 09:07

秋思梦景发表于 2025-2-11 08:17
问候老师好！精美音画佳作，创意新颖制作精良！为您点赞！

问好梦景老师，谢谢分享支持，祝新春快乐！{:4_204:}

页: [1] 2

花潮论坛's Archiver

红梅赞