英歌舞

起个网名好难 发表于 2025-2-14 11:56

本帖最后由起个网名好难于 2025-2-14 11:56 编辑 <br /><br /><meta name="referrer" content="never">
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
/** 不满意一般设置也可以调整下 */
.lrcShow {
font-size: 2em; font-family:sans-serif;
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);
}
#oBlk {
width:1000px;height:800px; margin:90px auto 32px calc(50% - 581px); position:relative;background-image:url(https://www.16sucai.com/d/file/2012/1113/20121113122426795.jpg);
overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;
}
#showSVG {width:100%;}
#processMeter {position: absolute; right:3%; bottom:5px; width:80px; cursor: pointer; z-index:999;}
</style>
<div id="oBlk">
<div id="showSVG"></div>
<div id="processMeter">
<svg viewbox="0 0 100 100" id="svgObj">
<g fill='none' stroke-width='8'>
<path d="M 3 50 A 45 45 0 0 1 97 50 A 45 45 0 0 1 3 50" stroke="pink" 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="red" id="fgc"></path>
</g>
<g text-anchor="middle" dominant-baseline="middle" fill="brown" style="font-size:16px;font-weight:600;">
<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>
//-----------------------------------------------------------------------------
{
const pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpykNVU3Nnf33OTszrndHMgQU1PXu0URlnuDbuRHnkhp4HDYrcmSPGd3w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyRzqqwI7lORjJXcEDpapsJ41zf4AVdLlBX9vs2SWKHT5NMDj0ntGrzw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpylaygmkp1CO3POZJcFfzCu58zd7e39JZAicye6jStH2QbH5DBxicVvZUQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpy6m015fV6YCywYrt5VzBb1zFvMI1KicrRUuJLxPzE6X5AE93GbsGiarGw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpy2D9EISDia8kKKr6HbbW5kKqaic8Lzhk22syKbYX2XGAKVgNu2xIwmNEA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpydj630bHCCicnUxPSYCBYiaxAuFqWZEWPlsZsvIlgZt9eVdNG78Nhfp2g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyqPWBxK4EE2guCkUpmPOTVy9HqYjcGqSPKvjscibLxqA9kY2SgBXjJFQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpy9epx0Dia3ZxA2spltPv8XuvKicSfM3pWFicqfNnvQxgLibzhGN7o0T87sA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyuULjickpnicWxqiaKfjCsYdBDKU7v2xcwuoPh04jKe5yKYBnhxaG2aibYA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyv6X6H6icLGlTmsF1KOezIZIarRBrZpt5gHe0Be1lG08jAIS39NVRvsg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyic5BH8h9HeDDnA6nw2mia9VGiaEWDic5vfsvsiccF2H79EftaRcr2Jkpicxw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpy7toiaU9RbLYUzle7OCYDPURVeZmtzSnxHFNh2Pl8LYYvOkZlCEqicAsQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyRMLtYyFjXnXBT2WnEDx65P7ZftFGWf18syJgN6kQE3b7IJicYbMZH7w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpy6PWesRwZDrXnefvoF3ibvja27UAWNBLTyqVQbrZSYxaAzUlh1xWlib3g/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpym50x9fp8pDjrwfGQFYNxicUgs8f2vY8OaxbiaSberSrFZ76Z09clQmpg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyu1EPyJIqkXMUFanorqKueLCDqd6ichbvjchatmOnHgCKmczboCh952w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpy6xmyOoW5EP3b04IpEDZn2Z3kQJThYsz0LEqIKJOufxw0DvGhpgsHjw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyBicOAXy38eAibKIib8FfywvHUicJN6moicFUnFJiamZ8tXAvqoT4mIuDEgzA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyZjA5waTasK57hV4lqWnLZ4Gx4QU52dTlT3F3mUqwOAOU5yv4XYJj2Q/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpy5j2nhdTGBRnchVicZYEuiaLQK1Nia7UdQamRPjgpJXSRproKbOXKHgPBQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyY487Hkgqrkt4v8P4o7LT3q5ibH64yUaC2QmHYAsz7pLO0aCpVaDUTUg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/xrFYciaHL08AUiaYe0SBo63I4ibibedoibZpyUEHDGRWtibd7GpvuGDLBzPnGaMqlrsGqI80CSCjxA7QLDUj8m1oxNXA/640"
];
let aniObjs = ;
let picArr = [], errCount = 0;
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 getPictureSize = (url,pIdx) => {
let img = new Image();
img.onerror = () => {
console.log(url+" 图片加载失败，请检查url是否正确");
errCount++;
};

img.onload = () => {
picArr.push({'index':pIdx, 'url':url, 'width':img.width, 'height':img.height});
img.onload=null;//避免重复加载

}
img.src = url;
}
let dataReady = ()=> {
if(picArr.length != (pics.length - errCount)) setTimeout(dataReady,50);
else {
picArr.sort(function(a, b) {
return (a.index - b.index);
});
const viewWidth = 1400, viewHeight = 1000, numTag = picArr.length, speedRate = 3;
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 ${viewWidth} ${viewHeight}`});
let gObj = genTagObj(mysvg ,{'tag':'g', 'transform':`rotate(-90)`});
picArr.forEach((pic, idx) => {
let beginStr = idx == 0 ? `0; p${numTag}.end` : `p${idx - 1}.end-${viewWidth/(100 * speedRate)}`;
let yPos = idx == 0 ? 0 : viewWidth;
let durt = (yPos + pic.height) / (100 * speedRate);
let imgObj = genTagObj(gObj ,{'tag':'image', 'xlink:href':pic.url, 'width':pic.width, 'height':pic.height, 'opacity':0, 'x': -pic.width, 'y':yPos,'preserveAspectRatio':"none"});
let setObj = genTagObj(imgObj ,{'tag':'set', 'attributename':"opacity", 'to':1, 'begin':`p${idx}.begin`});
let aniObj = genTagObj(imgObj ,{'tag':'animate', 'id':`p${idx}`, 'attributename':"y", 'from':yPos, 'to':-pic.height, 'begin':beginStr, 'dur':durt,'fill':"freeze"});
setObj = genTagObj(imgObj ,{'tag':'set', 'attributename':"opacity", 'to':0, 'begin':`p${idx}.begin + ` + durt});
});
let imgObj = genTagObj(gObj ,{'tag':'image', 'xlink:href':picArr.url, 'width':picArr.width, 'height':picArr.height, 'opacity':0, 'x': -picArr.width, 'y':viewWidth,'preserveAspectRatio':"none"});
let setObj = genTagObj(imgObj ,{'tag':'set', 'attributename':"opacity", 'to':1, 'begin':`p${picArr.length}.begin`});
let aniObj = genTagObj(imgObj ,{'tag':'animate', 'id':`p${picArr.length}`, 'attributename':"y", 'from':viewWidth, 'to':0, 'begin':`p${picArr.length - 1}.end-${viewWidth/(100 * speedRate)}`, 'dur':viewWidth/(100 * speedRate),'fill':"freeze"});
setObj = genTagObj(imgObj ,{'tag':'set', 'attributename':"opacity", 'to':0, 'begin':`p${picArr.length}.begin + ` + viewWidth/(100 * speedRate)});
showSVG.innerHTML = mysvg.outerHTML;
sObj.addEventListener('mouseover', () => {sObj.pauseAnimations();});
sObj.addEventListener('mouseout', () => {sObj.unpauseAnimations();});
}
}
pics.forEach((url,pIdx) => getPictureSize(url, pIdx));
dataReady();
//-----------------------------------------------------------------------------
}
</script>
<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=2018273053.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-14 11:56

<p style="text-indent:2em;font:bold 1.5em sans-serif;">英歌，又称“鹰歌”、“鹦哥”、“唱英歌”或“秧歌”，是一种融舞蹈、南拳套路、戏曲演技于一体的民间广场舞蹈。相传已有三百多年的历史，来源多解释为当地民众尚武习俗的变体或搬演《水浒传》故事。——摘自中国非物质文化遗产网</p>

杨帆发表于 2025-2-14 12:00

谢谢难难老师精彩分享{:4_191:}

起个网名好难 发表于 2025-2-14 12:02

杨帆发表于 2025-2-14 12:00
谢谢难难老师精彩分享

谢谢支持欣赏！

樵歌发表于 2025-2-14 13:06

好漂亮的叙事长卷！史诗般讲术了那里人民对英雄的崇敬！

樵歌发表于 2025-2-14 13:08

虽然不是那儿的人，但也看得人热泪盈眶{:4_187:}

梦江南 发表于 2025-2-14 13:30

变成现代人了，也不失魅力。{:4_199:}

红影发表于 2025-2-14 14:11

这个长图还挺长的，边让它滚动边忍不住用鼠标去暂停，以便仔细观看。
这个英歌舞真好，看得人热血沸腾，崇尚英雄的情怀，总是那么让人感动{:4_199:}

红影发表于 2025-2-14 14:12

每个人心里都有英雄情怀，这个英歌舞把心里的梦，用舞蹈表现出来了，真好{:4_199:}

红影发表于 2025-2-14 14:13

谢谢难难带来的好帖，看得太震撼了{:4_199:}

起个网名好难 发表于 2025-2-14 16:06

樵歌发表于 2025-2-14 13:06
好漂亮的叙事长卷！史诗般讲术了那里人民对英雄的崇敬！

谢谢支持欣赏！

起个网名好难 发表于 2025-2-14 16:07

樵歌发表于 2025-2-14 13:08
虽然不是那儿的人，但也看得人热泪盈眶

广东潮州地区

起个网名好难 发表于 2025-2-14 16:07

梦江南发表于 2025-2-14 13:30
变成现代人了，也不失魅力。

谢谢支持欣赏！

起个网名好难 发表于 2025-2-14 16:08

红影发表于 2025-2-14 14:11
这个长图还挺长的，边让它滚动边忍不住用鼠标去暂停，以便仔细观看。
这个英歌舞真好，看得人热血沸腾，崇 ...

谢谢支持欣赏！

起个网名好难 发表于 2025-2-14 16:08

红影发表于 2025-2-14 14:12
每个人心里都有英雄情怀，这个英歌舞把心里的梦，用舞蹈表现出来了，真好

传统的、地域的特色。

起个网名好难 发表于 2025-2-14 16:09

红影发表于 2025-2-14 14:13
谢谢难难带来的好帖，看得太震撼了

我也是第一次见到的

深秋红枫 发表于 2025-2-14 16:28

红影发表于 2025-2-14 16:42

起个网名好难发表于 2025-2-14 16:08
谢谢支持欣赏！

有机会最好能现实里看一看就更好了{:4_173:}

红影发表于 2025-2-14 16:42

起个网名好难发表于 2025-2-14 16:08
传统的、地域的特色。

很有力量美{:4_187:}

红影发表于 2025-2-14 16:42

起个网名好难发表于 2025-2-14 16:09
我也是第一次见到的

之前都没听过这个舞，现在知道了{:4_187:}

页: [1] 2

花潮论坛's Archiver

英歌舞