论坛 › 动画音画 › 评弹——莺莺拜月

有声有色 发表于 2023-5-20 13:41

评弹——莺莺拜月

本帖最后由 有声有色 于 2023-5-20 16:14 编辑 <br /><br /><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://pic1.imgdb.cn/item/64684dade03e90d8748c74b4.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://pic1.imgdb.cn/item/64688153e03e90d874d8c5b7.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=27598334.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-5-20 16:35

欣赏老师的精彩，感谢分享！{:4_204:}

红影 发表于 2023-5-20 19:17

这个动态清香漂亮，跟歌词也很呼应。背景图片也选得好，和唱段很适合。欣赏有声有色老师好帖{:4_199:}

红影 发表于 2023-5-20 19:18

进入有声有色老师的帖子总有评弹可以欣赏，真好{:4_187:}

红影 发表于 2023-5-20 19:21

这张图图里红娘比莺莺漂亮呢{:4_173:}

有声有色 发表于 2023-5-21 08:03

梦缘 发表于 2023-5-20 16:35
欣赏老师的精彩，感谢分享！

谢谢一直鼓励与支持

有声有色 发表于 2023-5-21 08:04

红影 发表于 2023-5-20 19:17
这个动态清香漂亮，跟歌词也很呼应。背景图片也选得好，和唱段很适合。欣赏有声有色老师好帖

图片网上找的，香与烟雾加上去的。

有声有色 发表于 2023-5-21 08:06

红影 发表于 2023-5-20 19:18
进入有声有色老师的帖子总有评弹可以欣赏，真好

估计再这样下去，你也会成评弹迷了。

有声有色 发表于 2023-5-21 08:07

红影 发表于 2023-5-20 19:21
这张图图里红娘比莺莺漂亮呢

这是越剧西厢记里的图片

红影 发表于 2023-5-21 13:19

有声有色 发表于 2023-5-21 08:04
图片网上找的，香与烟雾加上去的。

自己加的啊，厉害了{:4_199:}

红影 发表于 2023-5-21 13:19

有声有色 发表于 2023-5-21 08:06
估计再这样下去，你也会成评弹迷了。

本来之前也挺喜欢的呢{:4_173:}

红影 发表于 2023-5-21 13:20

有声有色 发表于 2023-5-21 08:07
这是越剧西厢记里的图片

嗯嗯，图片很漂亮{:4_187:}

有声有色 发表于 2023-5-21 13:23

红影 发表于 2023-5-21 13:19
本来之前也挺喜欢的呢
下回换换越剧，不知是否喜欢

红影 发表于 2023-5-21 14:15

有声有色 发表于 2023-5-21 13:23
下回换换越剧，不知是否喜欢

这些都挺喜欢的{:4_173:}

查看完整版本: 评弹——莺莺拜月