越剧——倒塔

有声有色 发表于 2023-6-21 10:37

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1894498">
<br /><br /><style>
#papa {
margin: 130px -300px;
width: 1164px;
height: 640px;
background: url('https://pic.imgdb.cn/item/64925ab01ddac507cc482fcb.gif') no-repeat center/cover;
box-shadow: 0 0 0px #000;
position: relative;
z-index: 1;overflow:hidden;
--state: paused;
}
css-doodle { position: absolute; }
#ptpu{ width: 100%;
height: 100%;
top: 0%;left: 0%;cursor: pointer;
position:absolute;opacity: 1;
   z-index: 4;

}
#canv {filter:hue-rotate(0deg)contrast(140%)brightness(80%);
position: absolute;
display: block;
height: 100%;
position: relative;
cursor: pointer;
z-index: 4;opacity: 0;
}
#vid { display: none; }

#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
position: absolute;z-index: 6;
left: 50%;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文行楷;
color: #055306;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);

-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}

@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }

.wenzi { position: absolute; left: 15%; top: 18%; z-index: 10; color:#ffffff; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}

#fullscreen { position: absolute; top:2%; left:5%;color:#FFffff; font: normal 2.2em华文行楷; opacity: 1; cursor: pointer; z-index: 6}

</style>

<div id="papa">
   <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="ptpu"><img id="testImg"src="https://pic.imgdb.cn/item/64925ab01ddac507cc482fcb.gif" width="100%" height="100%"></div>

<divstyle="width: 400px;height: 320px;overflow:hidden;margin: 3% 70%;position: absolute;" > <div id="but">
<css-doodleid="mplayer">
   :doodle {
            @grid: 2 / 300px 60px;
         position: absolute;z-index: 40;
            color: var(--color);
         transform: scale(1);
            --prog: 0%; --size: 35px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
   }
   /* 时间信息 : 左 */
   @nth(1) {
            @place: 25% 80%;
            :after { content: var(--ttmsg1); }
   }
   /* 控制器 */
   @nth(2) {
            @size: var(--size);
            @shape: clover 5;
            @place: 50% 35%;
            background: var(--color);
            animation: rot 6s infinite linear var(--state);
   }
   /* 时间信息 : 右 */
   @nth(3) {
            @place: 75% 80%;
            :after { content: var(--ttmsg2); }
   }
   /* 进度条 */
   @nth(4) {
            @place: 50% 80%;
            @size: 100% 2px;
            background: #aaaaaa;
            display: grid;
            place-items: center start;
            :before {
                     content: '';
                     width: var(--prog);
                     height: 100%;
                     background: var(--color);
            }
   }
   @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<div class="wenzi"></div>

</div>
</div>
<canvas id="canv"></canvas>
<span id="fullscreen">全屏观赏</span>
<video id="vid" src="http://chuangshicdn.data.mvbox.cn/music/yc/21/09/27/21092708394423902689." autoplay loop muted></video>
<audio id="aud" src="https://www.joy127.com/url/105448.mp3" autoplay loop></audio>

</div>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
ctx.drawImage(vid, 0, 0, ww, hh);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
let mState = () => aud.paused ? ( mplayer.style.setProperty('--state', 'paused'), vid.pause()) : ( mplayer.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

<script>

(function() {
   let script = document.createElement('script');
   script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
   document.head.appendChild(script);
   let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
   let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('play', mState, false);
   aud.addEventListener('pause', mState, false);
   aud.addEventListener('timeupdate', () => {
            mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
            mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
            mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
   });
   mplayer.onclick = (e) => {
            if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
            if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
   }
})();

</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
（梦唱）花有子

树有根

游鱼无水

命难存

别家孩子

依娘怀

独吾梦蛟

苦伶仃

日日黄昏

至塔前

千呼万唤

哭娘亲

娘

只见雷峰

高耸天

不闻娘声

空悲啼

可怜我

寻娘走得

鞋底穿

思母长夜

难入眠

娘啊娘

你在塔中

可知情

儿今又来

找寻你

娘……

白唱）耳边声声

唤娘亲

莫非我儿他来临

儿啊

转眼已过七年整

喜见梦蛟长成人

为娘身禁雷峰下

常把我儿挂在心

（梦唱）娘啊

儿思娘来断肝肠

（白唱）娘思儿来更凄凉

（梦唱）儿思娘不吃茶和饭

（白唱）娘思儿暗把珠泪弹

（梦唱）儿思娘寒窗无心

勤攻读

（白唱）娘思儿纵死九泉

难瞑目啊

（梦唱）儿好比孤雁独宿寒林间

（白唱）娘好比三月风筝断了线

（梦唱）儿好比羔羊迷途空彷徨

（白唱）娘好比乌云遮月暗无光

（梦唱）儿好比海上漂浮失舵舟

（白唱）娘好比龙困沙滩恨不休

（梦唱）儿想娘啊

（白唱）娘思儿啊

（梦、白唱）两地相思

两地相思一样心

`;

/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};

/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};

/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};

/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}

/*函数：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 移除存储的canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         // 透明度还原
         image.style.opacity = '';
   }
   if (this.storeUrl) {
         this.src = this.storeUrl;
   }
};
HTMLImageElement.prototype.stop = function() {
   var canvas = document.createElement('canvas');
   // 尺寸
   var width = this.width, height = this.height;
   if (width && height) {
         // 存储之前的地址
         if (!this.storeUrl) {
            this.storeUrl = this.src;
         }
         // canvas大小
         canvas.width = width;
         canvas.height = height;
         // 绘制图片帧（第一帧）
         canvas.getContext('2d').drawImage(this, 0, 0, width, height);
         // 重置当前图片
         try {
            this.src = canvas.toDataURL("image/gif");
         } catch(e) {
            // 跨域
            this.removeAttribute('src');
            // 载入canvas元素
            canvas.style.position = 'absolute';
            // 前面插入图片
            this.parentElement.insertBefore(canvas, this);
            // 隐藏原图
            this.style.opacity = '0';
            // 存储canvas
            this.storeCanvas = canvas;
         }
   }
};
}

var image = document.getElementById("testImg"),
button = document.getElementById("but");
button.onclick = function() {
   if (this.value == '') {
         image.play();
         this.value = '.';
   } else {
         image.stop();
         this.value = '';
   }
};

</script>
</td></tr></table>

马黑黑 发表于 2023-6-21 12:12

{:4_174:}

有声有色 发表于 2023-6-21 16:03

马黑黑发表于 2023-6-21 12:12

都听不懂，还自得其乐。哈哈！

红影发表于 2023-6-21 16:27

每次有声有色老师分享的越剧都是认认真真听完的。这制作里的塔是扣图来的吧，背景制作很符合唱段的场景。欣赏有声有色老师好帖，又偷闲欣赏一段好听的越剧{:4_199:}

梦缘发表于 2023-6-21 17:02

问好老师，欣赏精彩佳作，点赞！{:4_178:}

有声有色 发表于 2023-6-21 17:03

红影发表于 2023-6-21 16:27
每次有声有色老师分享的越剧都是认认真真听完的。这制作里的塔是扣图来的吧，背景制作很符合唱段的场景。欣 ...

谢谢欣赏，里面三张图合成的

有声有色 发表于 2023-6-21 17:05

梦缘发表于 2023-6-21 17:02
问好老师，欣赏精彩佳作，点赞！

谢谢支持

有声有色 发表于 2023-6-21 17:18

红影发表于 2023-6-21 16:27
每次有声有色老师分享的越剧都是认认真真听完的。这制作里的塔是扣图来的吧，背景制作很符合唱段的场景。欣 ...

https://pic.imgdb.cn/item/6492bfc31ddac507ccf590a4.jpghttps://pic.imgdb.cn/item/6492bfa71ddac507ccf55d2c.jpghttps://pic.imgdb.cn/item/6492c0071ddac507ccf61368.jpg

樵歌发表于 2023-6-21 18:05

虽然戏曲中的故事家喻户晓，但人们依然喜欢，比如我就特别喜欢那韵味！{:4_174:}

红影发表于 2023-6-21 20:23

有声有色发表于 2023-6-21 17:03
谢谢欣赏，里面三张图合成的

嗯，两张人物的也是吧。辛苦了{:4_187:}

红影发表于 2023-6-21 20:25

有声有色发表于 2023-6-21 17:18

{:4_204:}

马黑黑 发表于 2023-6-21 22:02

有声有色发表于 2023-6-21 16:03
都听不懂，还自得其乐。哈哈！

旋律懂就好

有声有色 发表于 2023-6-22 09:10

红影发表于 2023-6-21 20:23
嗯，两张人物的也是吧。辛苦了

https://pic.imgdb.cn/item/64939f221ddac507cc1df913.jpghttps://pic.imgdb.cn/item/64939f091ddac507cc1dd7d5.jpghttps://pic.imgdb.cn/item/64939ef21ddac507cc1db810.jpg

有声有色 发表于 2023-6-22 09:11

樵歌发表于 2023-6-21 18:05
虽然戏曲中的故事家喻户晓，但人们依然喜欢，比如我就特别喜欢那韵味！

是的有同感

有声有色 发表于 2023-6-22 09:11

马黑黑发表于 2023-6-21 22:02
旋律懂就好

嗯

马黑黑 发表于 2023-6-22 09:25

有声有色发表于 2023-6-22 09:11
嗯

{:4_191:}

红影发表于 2023-6-24 17:08

有声有色发表于 2023-6-22 09:10

原来是这么多图里抠出来组合而成的呢，真漂亮{:4_187:}

页: [1]

花潮论坛's Archiver

越剧——倒塔