论坛 › 动画音画 › 越剧——思念

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

越剧——思念

本帖最后由 有声有色 于 2023-5-21 14:32 编辑 <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/64699df2e03e90d8741da40a.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/64699df2e03e90d8741da40a.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=222269.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-21 14:31

这个唱段也很好听，那个扇子还能展开呢。这个制作真棒。感谢有声有色老师带来的好帖{:4_187:}

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

还挺长的，10分钟呢，我竟全部听完了。好听{:4_187:}

有声有色 发表于 2023-5-21 14:54

红影 发表于 2023-5-21 14:31
这个唱段也很好听，那个扇子还能展开呢。这个制作真棒。感谢有声有色老师带来的好帖

扇子是以前学做PS做的，本想新做一个偷懒了。

有声有色 发表于 2023-5-21 14:57

红影 发表于 2023-5-21 14:34
还挺长的，10分钟呢，我竟全部听完了。好听

好听吧，这是尹派，

有声有色 发表于 2023-5-21 14:59

红影 发表于 2023-5-21 14:34
还挺长的，10分钟呢，我竟全部听完了。好听

https://pic1.imgdb.cn/item/6469c0f5e03e90d874472ac7.jpg

这是原图

梦缘 发表于 2023-5-21 20:07

给力的唱段，老师辛苦了。{:4_180:}

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

有声有色 发表于 2023-5-21 14:54
扇子是以前学做PS做的，本想新做一个偷懒了。

很有趣，放在这里正好呢{:4_187:}

红影 发表于 2023-5-21 22:21

有声有色 发表于 2023-5-21 14:57
好听吧，这是尹派，

好听呢，越剧有着独特的韵味{:4_187:}

红影 发表于 2023-5-21 22:22

有声有色 发表于 2023-5-21 14:59
这是原图

这个还得去掉原图的扇子才能加动图，真不容易{:4_199:}

有声有色 发表于 2023-5-22 07:52

梦缘 发表于 2023-5-21 20:07
给力的唱段，老师辛苦了。

谢谢一直鼓励与支持

有声有色 发表于 2023-5-22 07:53

红影 发表于 2023-5-21 22:19
很有趣，放在这里正好呢

巧啊

有声有色 发表于 2023-5-22 07:55

红影 发表于 2023-5-21 22:21
好听呢，越剧有着独特的韵味
同样是尹派，因嗓子不同，唱出来的味也不一样，等会再做个尹派的段子

有声有色 发表于 2023-5-22 07:57

红影 发表于 2023-5-21 22:22
这个还得去掉原图的扇子才能加动图，真不容易

因眼老花了。扣的不是太干净

红影 发表于 2023-5-22 18:44

有声有色 发表于 2023-5-22 07:53
巧啊

是啊，和原图里的扇子十分像呢。

红影 发表于 2023-5-22 18:44

有声有色 发表于 2023-5-22 07:55
同样是尹派，因嗓子不同，唱出来的味也不一样，等会再做个尹派的段子

老师对越剧真熟悉，如数家珍{:4_187:}

红影 发表于 2023-5-22 18:45

有声有色 发表于 2023-5-22 07:57
因眼老花了。扣的不是太干净

还好，不留意也看不出呢{:4_173:}

有声有色 发表于 2023-5-23 08:17

红影 发表于 2023-5-22 18:44
老师对越剧真熟悉，如数家珍

哈哈我这是在卖老，请不要见怪啊。

有声有色 发表于 2023-5-23 08:18

红影 发表于 2023-5-22 18:45
还好，不留意也看不出呢

如有空再重新再做一把扇子。

红影 发表于 2023-5-23 10:48

有声有色 发表于 2023-5-23 08:17
哈哈我这是在卖老，请不要见怪啊。

怎么会呢，佩服还来不及呢{:4_199:}

查看完整版本: 越剧——思念