越剧——情断龙脉
<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://www.yiyuen.com/e/file/view/585873') 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/648693581ddac507cc0598c9.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://music.163.com/song/media/outer/url?id=28038409.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>
谢谢老师的精彩佳作分享！{:4_187:} 唱段好听，制作漂亮。这个唱机还是头一次看到呢，而且在按钮暂停时跟着暂停。欣赏有声有色好帖{:4_187:} 这个歌词是直接找的吧，有些地方的同步不太准确呢{:4_173:} 醉美水芙蓉 发表于 2023-6-12 17:05
老师这个老唱机做得漂亮！
谢谢鼓励 梦缘 发表于 2023-6-12 17:28
谢谢老师的精彩佳作分享！
谢谢支持 红影 发表于 2023-6-12 21:14
唱段好听，制作漂亮。这个唱机还是头一次看到呢，而且在按钮暂停时跟着暂停。欣赏有声有色好帖
看到岁月老师做的唱机，在网上找了个老式的唱机，也做了一个动图的唱机，也算一个素材吧，哈哈 红影 发表于 2023-6-12 21:16
这个歌词是直接找的吧，有些地方的同步不太准确呢
是的曲谱与唱词对不上， 有声有色 发表于 2023-6-13 07:55
看到岁月老师做的唱机，在网上找了个老式的唱机，也做了一个动图的唱机，也算一个素材吧，哈哈
这个还是自己做的素材呢，真棒{:4_199:} 有声有色 发表于 2023-6-13 07:56
是的曲谱与唱词对不上，
不过有唱词就好，很多人越剧听不懂，没有词肯定有问题呢{:4_204:} 红影 发表于 2023-6-13 10:56
这个还是自己做的素材呢，真棒
还做了其他式样的唱机，以及电影放映机到时再当素材放上来。 有声有色 发表于 2023-6-13 12:08
还做了其他式样的唱机，以及电影放映机到时再当素材放上来。
真会玩，做了那么多啊{:4_187:}
页:
[1]